Görüntü Etiketi (<img>)
Görüntüler, web sayfalarının görsel çekiciliğini artırmak ve içeriği daha ilgi çekici hale getirmek için vazgeçilmezdir. <img> etiketi, HTML belgelerine resimler eklemek için kullanılan temel öğedir.
Temel Kullanım ve Sözdizimi:
<img src=”resim_yolu” alt=”Resim Açıklaması”>
src Özelliği (Source): Bu, en önemli özelliktir. Görüntü dosyasının yolunu belirtir. Yol, resmin URL’si (internet üzerindeki adresi) veya yerel dosya yolu olabilir.
- Mutlak URL: Tam adresini içeren URL’dir (örnek: https://www.example.com/images/logo.png).
- Göreceli URL: Mevcut sayfanın konumuna göre belirlenen URL’dir (örnek: resimler/logo.png veya ../images/foto.jpg). Aynı web sitesindeki farklı resimleri belirtmek için kullanılır.
alt Özelliği (Alternative Text): Bu özellik, resmin yüklenemediği durumlarda veya ekran okuyucular tarafından görüntülenen alternatif metindir. Erişilebilirlik ve SEO için son derece önemlidir. Resmin ne olduğunu açıklayan kısa ve anlamlı bir metin yazın.
- Resim açıklaması, görsel içeriğin amacını ve bağlamını belirtmelidir.
- Arama motorları, resimleri indekslemek için alt etiketini kullanır.
Görüntü Boyutlandırma:
Görüntünün boyutlarını kontrol etmek için width (genişlik) ve height (yükseklik) özelliklerini kullanabilirsiniz. Ancak, CSS kullanarak daha esnek ve duyarlı bir şekilde boyutlandırmak genellikle daha iyi bir uygulamadır.
- Örnek: <img src=”resim.jpg” width=”200″ height=”150″>
- Uyarı: width ve height özelliklerini birlikte belirtmek, resmin orantılı kalmasını sağlar. Aksi takdirde, görüntü bozulabilir.
Görüntü Formatları:
Farklı amaçlar için farklı görüntü formatları kullanılır.
- JPEG (.jpg veya .jpeg): Fotoğraflar ve karmaşık renkli görüntüler için idealdir. Sıkıştırılabilir, bu da dosya boyutunu küçültür ancak kalite kaybına neden olabilir.
- PNG (.png): Şeffaflık gerektiren grafikler, logolar ve çizimler için uygundur. Kayıpsız sıkıştırma kullanır, yani kalite kaybı olmaz. Ayrıca, alfa kanalı sayesinde şeffaf arka planlar desteklenir.
- GIF (.gif): Animasyonlu resimler (animeler) ve basit grafikler için kullanılır. Sınırlı renk paleti vardır.
- WebP (.webp): Google tarafından geliştirilen modern bir görüntü formatıdır. JPEG ve PNG’ye göre daha iyi sıkıştırma sağlar ve daha küçük dosya boyutları sunar. Tarayıcı desteği giderek artmaktadır.
Görüntü Optimizasyonu:
Görüntülerin web sitenizin performansını etkileyebilecek büyük dosyalar olabileceğini unutmayın. Bu nedenle, görüntüleri optimize etmek önemlidir.
- Dosya Boyutunu Küçültün: Görüntü düzenleme araçları kullanarak dosya boyutunu küçültebilirsiniz (özellikle JPEG formatında).
- Doğru Formatı Seçin: İçeriğe uygun doğru formatı seçmek, dosya boyutunu optimize etmeye yardımcı olur.
- Duyarlı Görüntüler Kullanın: Farklı ekran boyutlarına uyum sağlayan duyarlı görüntüler kullanmak için <picture> etiketi veya srcset özelliğini kullanabilirsiniz.
Ek Özellikler:
- title Özelliği: Görüntü üzerine fare ile gelindiğinde gösterilen bir araç ipucu metni sağlar. Örnek: <img src=”resim.jpg” alt=”Güneşin batışı resmi” title=”Akşam güneşinin denize vurduğu manzara”>
- loading=”lazy” Özelliği: Görüntünün sayfa yüklenirken hemen yüklenmesini engeller ve kullanıcı ekranına yakın olan görüntüleri önceliklendirir. Bu, sayfa yükleme hızını artırabilir.
Erişilebilirlik İpuçları:
- alt etiketini her zaman doldurun. Boş alt etiketi, resmin erişilebilir olmadığını gösterir.
- Resim açıklaması, görsel içeriğin amacını ve bağlamını doğru bir şekilde yansıtmalıdır.
- Dekoratif resimler için boş alt etiketi kullanabilirsiniz (alt=””), ancak bu durumda ekran okuyucular tarafından görüntülenmemesini sağlamış olursunuz.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML