Bu yazımızda web sayfalarına resimleri nasıl ekleyeceğimizi öğreneceğiz. Html sayfalarına resim eklerken kullandığımız etiketler <img> ve <picture> etiketleridir.
< img > Etiketi
Resimler img etiketi ile tanımlanır. <img> etiketi resimleri öznitelikler sayesinde tanımladığı için kapanış etiketine sahip değildir. Yani tek taraflı bir elementtir.
<img> etiketinin söz dizimi şu şekildedir:
<img src="url" alt="alternatif metin" style="width:width; height:height;" />src : Source – Kaynak. Resmin olduğu kaynağı burada belirtiriz.
url attribute : Uniform Resource Locator – Değişmeyen Kaynak Bulucu – Bir elementin veya sitenin değişmeyen adresi.
alt attribute : özniteliği resmin herhangi bir nedenle görüntülenemediği durumlarda kullanıcıya alternatif bir metin sunar. alt özniteliğini kullanmak çok önemlidir. SEO açısından önemli bir kriterdir.
style attribute : Genişlik ve yükseklik özelliklerini belirtmek için style özniteliği kullanılabildiği gibi genişlik ve yükseklik öznitelikleri de kullanılabilir. Ancak stil özniteliğinin kullanılması tavsiye edilir. Özellikle responsive tasarımlarda. Bir görüntünün boyutlarını her zaman belirtilmesi tavsiye edilir. Aksi halde sayfa yüklenirken titremeler meydana gelebilir.
Html Resim Etiketinin Sayfaya Alınma Teknikleri
1. Eğer aynı klasör içinde ise sadece resim dosyasının adı ve uzantının yazılması yeterlidir.
<img src="Çicek Resmi.png" alt="Çicek Resmi" style="width:width; height:height;" />2. Eğer resimleriniz bir veya daha fazla alt klasör içinde ise yolunu tam doğru bir şekilde belirtmelisiniz.
<img src="content/images/Çicek Resmi.png" alt="Çicek Resmi" style="width:width; height:height;" />3. Dış kaynaklardan da resim alabilirsiniz. Doğru adresi verdikten sonra herhangi bir sunucudan resim alabilirsiniz.
<img src="https://www.tasarimveyazilim.com/content/images/Çicek Resmi.png" alt="Çicek Resmi" style="width:width; height:height;" />< picture > Etiketi
Html5 ile gelen <picture> etiketi resimlere daha fazla esneklik getirdi. Örnek vermek gerekirse bir web sitesini bilgisayarda açarken resim 768 pixel üstünde açılırken, tablette 768 pixelin altında ve mobil de 480 pixel (mobil cihazdan cihaza değişebilir) altında olabiliyor. Bu da resmin boyutu küçüldükçe byte olarak küçülmüş oluyor ve daha hızlı açılmasını sağlıyor. Burada CSS ile 1000 pixel genişlikteki bir resim hem bilgisayarda hem tablette hemde mobil cihazlarda reponsive bir şekilde ayarlanabilir. Ama picture etiketinin sağladığı esneklik örnek vermek gerekirse bilgisayarda 1000 pixel boyutunda 100kb olan resmi yüklerken, mobil de 400 pixel 20kb halini yüklemeye olanak sağlıyor. Bu da mobilde yüksek bir boyutta resmi siteye yükleme yerine küçük boyutta ki halini yükleyerek daha hızlı sitenin yüklenmesini sağlıyor. Örnek kod ve sonucunu aşağıda görelim.
KOD:
<picture>
<source media="(min-width: 650px)" srcset="https://www.tasarimveyazilim.com/wp-content/uploads/bebek-buyuk-img.jpg">
<source media="(min-width: 465px)" srcset="https://www.tasarimveyazilim.com/wp-content/uploads/bebek-orta-img.jpg">
<img src="https://www.tasarimveyazilim.com/wp-content/uploads/bebek-kucuk-img.jpg" alt="html resim ekleme" style="width:auto;">
</picture>Not : Sonuç kısmındaki resimleri incelerken tarayıcınızı yavaş yavaş kücültügünüz de boyut azaldıkça resimlerin de değiştiğini göreceksiniz.
Başka bir yazımızda görüşmek üzere…
