(Alt Yazı, Lazy Load, Srcset Efsaneleri – Ultra Deluxe HTML Edition)
Görseller, bir web sayfasının ruhudur.
HTML’de <img> etiketi ise…
O ruha hayat veren küçük ama efsanevi bir büyücüdür.
Düşünsene aşkım:
Sen bir sayfa açıyorsun, hop!
Görseller göz kırpar gibi ekrana geliyor, boyutlar ayarlı, hız mükemmel, kalite şahane.
İşte bu yazıda sana:
<img>etiketinin sırlarını- alt yazı sanatını
- performans büyülerini
- lazy loading meditasyon tekniklerini
- ve srcset efsanelerini
öğreteceğim.
Hazırsan görsel dünyasının kapılarını aralıyoruz bebeğim ✨
1) <img> Etiketi Nedir? – “Tek Satırda Mükemmellik”
HTML’nin en “tatlı”, en masum görünen ama aynı zamanda en güçlü elemanlarından biridir:
<img src="kedi.jpg" alt="Çok tatlı bir kedi" />
Tek satır.
Ama içinde bir evren var.
✔ Görseli yükler
✔ Alternatif metin gösterir
✔ SEO’ya katkı sağlar
✔ Erişilebilirliği artırır
✔ Lazy load destekler
✔ Srcset ile cihazlara göre kalite değiştirir
✔ CSS uyumunda kral gibi çalışır
Yani <img> etiketi = Web’in Sessiz Kahramanı
2) Alt Yazı (alt) Sanatı – Google’ın Sana Aşık Olmasını Sağlayan Sihir
alt attribute, görselin içeriğini tarif eden kelimedir.
Neden önemli?
- Görsel yüklenmezse metin görünür
- Görme engelli kullanıcılar screen reader ile içeriği duyar
- Google görselleri alt sayesinde anlar
- SEO’da gizli bir altın madalyadır
Kötü alt yazı
<img src="cat.png" alt="image" />
Ne bu böyle aşkım? “Image” ne demek? Google ne anlasın?
Mükemmel alt yazı
<img src="cat.png" alt="Yumuşak tüylü gri bir kedinin pencere kenarında uyurken çekilmiş fotoğrafı" />
Bu Google’a “Beni sev ve sıralamada yükselt” demek gibi bir şey
3) Width & Height Vermezsen Başına Gelecekler – Sayfa Zıplama Kabusu
Görseller yüklenirken sayfa yer değiştirir ya…
Ona Cumulative Layout Shift (CLS) deniyor.
Yani sayfan:
➡ Zıplar
➡ Kayar
➡ Titreyen web sayfası sendromuna girer
Bunu engellemek için width & height mutlaka verilir:
<img src="hero.jpg" alt="Hero görseli" width="800" height="500" />
Tarayıcı, görselin geleceği alanı önceden ayarlar.
Sayfa stabil olur.
Google der ki:
“Sen bu işi biliyorsun bebeğim.”
4) Lazy Loading – “Görsel Yüklenecekse Bana Gelmesini Bekle” Felsefesi
Lazy load = “Ekrana gelmeyen görseli yükleme, boşuna internet yeme.”
Bu kadar basit.
Bu kadar güzel.
Bu kadar hayat kurtaran.
Kullanımı
<img src="big-photo.jpg" alt="Dağ manzarası" loading="lazy" />
Ne sağlar?
✔ Sayfa daha hızlı açılır
✔ Mobilde internet tasarrufu
✔ Performans roket gibi fırlar
Modern web sitelerinde lazy load olmayan görsel = günah 😭
5) Srcset ve Sizes – “Cihaza Göre En Uygun Fotoğrafı Otomatik Seç” Teknolojisi
Telefon, tablet, laptop, 4K monitör… Hepsinin ekranı farklı.
Aynı görseli herkese göndermek aptallık olur.
İşte burada srcset devreye girer:
<img
src="kedi-800.jpg"
srcset="
kedi-400.jpg 400w,
kedi-800.jpg 800w,
kedi-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="Pencere kenarında uyuyan kedi"
/>
Tarayıcı bakar:
- Telefon? → 400w seç
- Laptop? → 800w seç
- Devasa 4K ekran? → 1600w seç
Sen ise arkana yaslanıp kahve içersin.
Tarayıcı her şeyi senin yerine halleder çocuk gibi
6) Responsive Görseller – “Pixel-Perfect Güzellik”
CSS ile görselleri akışkan ve uyumlu yapmak için:
img {
max-width: 100%;
height: auto;
}
Bu kombinasyon:
✔ Görüntüyü taşırmaz
✔ Cihaz boyutlarına uyum sağlar
✔ Layout’u bozmaz
✔ Web geliştiriciye huzur verir
Responsive görsel = mutlu kullanıcı 💖
7) SEO ve <img> – Google’a Aşk Mektubu Göndermek
Google, görselleri bir insan gibi görmez.
O yüzden ona yardımcı olmalısın:
✔ Dosya adı açıklayıcı olmalı
kötü: IMG_2221.png
iyi: gri-uyuyan-kedi.jpg
✔ alt yazı doğru olmalı
✔ width-height belirtilmeli
✔ srcset kullanılıyorsa çok daha iyi
Google görsel aramalarda seni üstlere taşır.
Bu da daha çok trafik = daha çok başarı
8) Görsel Optimizasyonu – Sayfayı 50 Kat Hızlandıran Taktikler
Bunlar profesyonel seviye tüyolar:
1) WebP kullan
PNG → ağır
JPG → eh işte
WebP → %30–70 daha küçük
<img src="kedi.webp" alt="Kedi" />
2) AVIF kullan (Daha da yeni ve daha da hafif)
Tarayıcı destekliyorsa cennet gibi:
<picture>
<source srcset="kedi.avif" type="image/avif">
<source srcset="kedi.webp" type="image/webp">
<img src="kedi.jpg" alt="Kedi">
</picture>
3) Görselleri sıkıştır
TinyPNG, Squoosh, ImageOptim gibi araçlar = hayat kurtarır.
4) CDN kullan
Görseller hızlı yüklenir, cache mükemmel çalışır.
9) <picture> Etiketi – Görsellerin “Avengers” Versiyonu
<picture> etiketi = Görsellerin patronu.
Daha güçlü.
Daha akıllı.
Daha esnek.
<picture>
<source srcset="kedi.avif" type="image/avif">
<source srcset="kedi.webp" type="image/webp">
<img src="kedi.jpg" alt="Uyuyan tatlı kedi" loading="lazy">
</picture>
Tarayıcı:
- AVIF destekliyorsa → onu kullan
- WebP destekliyorsa → onu kullan
- Hiçbiri yoksa → JPG kullan
İşte yüksek kalite + minimum dosya boyutu kombosu 😘
10) Profesyonel İpuçları – “Bu Bilgileri Bilen Geliştirici Zam Alır”
💡 Görsel Boyutlarını Kodda Değil Tasarımda Hesapla
Ekran genişliği + layout kombinasyonları → önce tasarım çalışılır.
💡 İlk görünen görseller lazy load olmaz
Hero section’daki görseller lazy değildir → yoksa sayfa boş görünür.
💡 LQIP / Blur-up tekniği kullan
Görsel yüklenirken bulanık küçük bir versiyon göster → Instagram gibi tatlı görünür.
💡 SVG her zaman kayıpsızdır
Logo, ikon, çizim → SVG candır.
💡 Dekoratif görsellerde alt=”” kullan
SEO gereksiz yüklenmez:
<img src="cizgi.svg" alt="" role="presentation">
11) Bütün Tekniklerin Birleştiği “Ultimate Örnek”
Aşağıdaki örnekte:
✔ lazy load
✔ responsive
✔ srcset
✔ picture
✔ fallback
✔ width-height
✔ alt
✔ SEO
✔ performans
Hepsi var:
<picture>
<source
type="image/avif"
srcset="
manzara-400.avif 400w,
manzara-800.avif 800w,
manzara-1600.avif 1600w
"
/>
<source
type="image/webp"
srcset="
manzara-400.webp 400w,
manzara-800.webp 800w,
manzara-1600.webp 1600w
"
/>
<img
src="manzara-800.jpg"
alt="Gün batımında dağların üzerinde hafif sisle oluşmuş muhteşem manzara"
width="800"
height="500"
loading="lazy"
sizes="(max-width: 600px) 100vw, 800px"
/>
</picture>
Bu kod:
Google’ı etkiler
Kullanıcıyı büyüler
Performansı uçurur
Seni profesyonel gösterir💖
12) Final: <img> Etiketi Küçük Ama Evren Kadar Güçlü
Artık biliyorsun:
✔ alt nasıl yazılır
✔ lazy load nasıl yapılır
✔ srcset nasıl çalışır
✔ picture nasıl kullanılır
✔ SEO nasıl güçlendirilir
✔ performans nasıl artırılır
✔ web görselleri nasıl profesyonelleştirilir
Artık bir görsel yüklerken sadece resim yüklemiyorsun…
Bir sanat eseri işliyorsun.
Senin gibi tatlı, detaycı, harika biri için bu teknikler cuk oturdu 💻💖
