İçindekiler
HTML’de görsellerle çalışmak, modern web geliştirmenin temel taşlarından biridir. Doğru kullanıldığında kullanıcı deneyimini zenginleştiren görseller, yanlış uygulamalarda sayfa performansını düşürebilir veya erişilebilirlik sorunlarına yol açabilir. Bu rehberde, HTML’de görsel kullanımını detaylı örneklerle ele alacağız.
Temel <img> Etiketi ve Nitelikleri
Görsel eklemenin en temel yolu <img> etiketidir. Bu etiket, src (kaynak) ve alt (alternatif metin) nitelikleriyle birlikte kullanılır.
<img src="elma.jpg" alt="Kırmızı Elma">Neden alt Niteliği Önemli?
- SEO: Arama motorları, görsel içeriğini anlamak için
altmetnini kullanır. - Hata Durumları: Görsel yüklenmezse alternatif metin kullanıcıya bilgi verir.
- Erişilebilirlik: Görme engelli kullanıcılar için ekran okuyucular bu metni seslendirir.
Görsel Boyutlandırma: width ve height
Görsellerin boyutunu ayarlamak için width ve height niteliklerini kullanabilirsiniz. Ancak bu yöntem yerine CSS ile boyutlandırma yapmak daha esnektir (özellikle responsive tasarımlar için).
<img src="araba.jpg" alt="Klasik otomobil" width="600" height="400">Performans İpuçları:
- Görseli gerçek boyutlarıyla yükleyip CSS ile küçültmek performans kaybına yol açar.
- Görselleri sunucuda doğru boyutta optimize edin (örneğin 600×400 piksel).
Responsive Görseller: srcset ve sizes
Farklı ekran boyutlarına uyumlu görseller için srcset ve sizes niteliklerini kullanın. Bu, mobil kullanıcıların gereksiz büyük dosyalar yüklemesini engeller.
<img
srcset="gorsel-320w.jpg 320w,
gorsel-480w.jpg 480w,
gorsel-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="gorsel-800w.jpg"
alt="Responsive görsel örneği">Nasıl Çalışır?
- Tarayıcı, cihazın ekran genişliğine ve yoğunluğuna göre en uygun görseli seçer.
sizesniteliği, görselin hangi koşulda ne kadar yer kaplayacağını belirtir.
Modern Formatlar: <picture> Etiketi
WebP veya AVIF gibi yüksek sıkıştırmalı formatları destekleyen tarayıcılar için <picture> etiketi kullanın. Bu, performansı artırırken kaliteyi korumanızı sağlar.
<picture>
<source srcset="manzara.webp" type="image/webp">
<source srcset="manzara.jpg" type="image/jpeg">
<img src="manzara.jpg" alt="Dağ manzarası">
</picture>Neden WebP/AVIF?
- JPEG’e kıyasla %25-35 daha küçük dosya boyutu.
- Tarayıcı destekliyorsa otomatik olarak yüklenir.
Görsel Optimizasyonu ve SEO
- Sıkıştırma Araçları: TinyPNG, Squoosh veya ImageOptim ile görsellerinizi optimize edin.
- İsimlendirme:
elma.jpgyerinekirmizi-elma.jpggibi açıklayıcı isimler kullanın. - Lazy Loading: Sayfa kaydırıldıkça görselleri yüklemek için
loading="lazy"niteliğini ekleyin.
<img src="kahve-makinesi.jpg" alt="Kahve makinesi" loading="lazy">Erişilebilirlik İçin Ekstra Adımlar
- ARIA Etiketleri: Görsel interaktifse
role="img"ekleyin.
<img src="logo.png" alt="Patika Dev" role="img">- Kapalı Yazı (Caption):
<figure>ve<figcaption>ile görsel açıklaması ekleyin.
<figure>
<img src="grafik.png" alt="2024 satış grafiği">
<figcaption>2024 Yılı Aylık Satış Verileri</figcaption>
</figure>Sık Yapılan Hatalar ve Çözümleri
- Alt Metin Eksikliği:
alt=""boş bırakılırsa, ekran okuyucular görseli atlar. Dekoratif görseller için bilealtniteliği ekleyin. - Boyut Uyumsuzluğu: Mobilde 800px genişlikte bir görsel kullanmak veri israfıdır. Responsive tekniklere sadık kalın.
- Format Seçimi: Arka plan şeffaflığı gerekiyorsa PNG, fotoğraflar için WebP kullanın.
Örnek: Responsive ve Optimize Edilmiş Galeri
<!DOCTYPE html>
<html>
<head>
<style>
.gallery { max-width: 1200px; margin: auto; }
.gallery img { width: 100%; height: auto; }
</style>
</head>
<body>
<div class="gallery">
<picture>
<source srcset="galeri-1.webp" type="image/webp">
<img src="galeri-1.jpg" alt="Sanat sergisi" loading="lazy">
</picture>
<figure>
<img
srcset="galeri-2-480w.jpg 480w,
galeri-2-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="galeri-2-800w.jpg"
alt="Heykeller">
<figcaption>Modern Heykel Sergisi</figcaption>
</figure>
</div>
</body>
</html>HTML’de görsellerle çalışırken sadece etiketleri bilmek yetmez; performans, erişilebilirlik ve SEO’yu da düşünmelisiniz. Bu rehberde öğrendiğiniz srcset, <picture> ve lazy loading gibi tekniklerle hem kullanıcı dostu hem de arama motorlarında üst sıralarda yer alan sayfalar oluşturabilirsiniz. Daha fazlası için “HTML” kategorisine bakabilirsin.
Unutmayın: Bir görsel bin kelimeye bedeldir, ancak doğru optimize edilmemişse bin probleme de yol açabilir!
🔗 Daha fazla Örnek-1 göz atın.
🔗 Daha fazla Örnek-2 göz atın.
-
<picture>Etiketi Ne Zaman Kullanılmalı?Farklı formatlar sunmak istediğinizde (örneğin, WebP destekleyen tarayıcılar için). Farklı kırılımlara (mobile/desktop) özel görsel kesimleri kullanmak istediğinizde.
-
Görsellerim Neden Yavaş Yükleniyor? Nasıl Optimize Ederim?
-
Lazy Loading Her Zaman İyi midir?
Hayır. Sayfanın hemen görünen kısmındaki (above the fold) görsellerde
loading="lazy"kullanmayın. Bu, ilk yükleme hızını yavaşlatabilir. Lazy loading, sayfanın alt kısımlarındaki görseller için idealdir. -
Görsel Yüklenmezse Ne Olur?
Tarayıcı,
altmetnini gösterir.altmetni yoksa görselin adı veya boş bir alan görüntülenir. -
Görselleri CSS ile mi HTML ile mi Boyutlandırmalıyım?
Temel boyutlandırma için HTML’de
widthveheightkullanın, ancak responsive tasarım için CSS tercih edin. Bu, tarayıcının görsel için yer ayırmasını (layout shift önleme) sağlar.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!