# Görsel optimizasyonu: WebP, AVIF, doğru boyut ve tembel yükleme
Source: https://exextramer.com/blog/gorsel-optimizasyonu-webp-avif-lazy-loading/
Updated: 2026-11-02
Bir web sayfasını yavaşlatan şeylerin başında, telefondan çekilip olduğu gibi yüklenen birkaç megabaytlık fotoğraflar gelir. Görseller çoğu sitede toplam sayfa ağırlığının en büyük bölümünü oluşturur; bu yüzden görselleri doğru hazırlamak, hız iyileştirmesinin en hızlı sonuç veren adımıdır. Bu rehberde biçim seçimini, boyutlandırmayı, tembel yüklemeyi ve görsellerin erişilebilirlik tarafını anlatıyoruz.
## 1. Doğru biçimi seçin
| Biçim | En uygun kullanım | Not |
|---|---|---|
| JPEG | Fotoğraflar | Her yerde desteklenir; yedek biçim olarak hâlâ önemli |
| PNG | Saydamlık gereken logo ve ekran görüntüleri | Fotoğraflar için çok büyük dosyalar üretir |
| WebP | Fotoğraf ve grafiklerin çoğu | Benzer kalitede JPEG’e göre belirgin şekilde küçük; tüm modern tarayıcılar destekler |
| AVIF | Fotoğraflar | Çoğu durumda WebP’den de küçük; kodlaması daha yavaş |
| SVG | Logo, simge, basit çizim | Vektördür, her boyutta keskin görünür; dışarıdan gelen SVG dosyalarına güvenlik açısından dikkat edin |
Pratik öneri: fotoğrafları WebP (veya AVIF) olarak sunun, gerekiyorsa `picture` etiketiyle JPEG yedeği verin. Logo ve simgeler için SVG kullanın.
```
```
## 2. Görseli gösterildiği boyuta göre hazırlayın
Ekranda 600 piksel genişliğinde görünen bir görsel için 4000 piksellik bir fotoğraf yüklemek, ziyaretçinin gereksiz yere megabaytlarca veri indirmesi demektir. Kural basittir: görselin genişliği, gösterildiği en büyük alanın yaklaşık iki katını (yüksek çözünürlüklü ekranlar için) geçmemelidir.
Farklı ekranlara farklı boyut göndermek için `srcset` ve `sizes` kullanılır:
```
```
Tarayıcı bu bilgiyle telefonda küçük, geniş ekranda büyük dosyayı seçer.
## 3. Sıkıştırma ayarı
Web için fotoğraflarda kalite ayarını yüzde 70–85 aralığında tutmak, gözle fark edilmeyen bir kalite kaybıyla dosya boyutunu ciddi oranda düşürür. Kaydetmeden önce görselin meta verilerini (kamera bilgisi, konum) temizleyin; hem boyut küçülür hem de istemeden konum paylaşmamış olursunuz.
Görselleri tek tek elle sıkıştırmak sürdürülebilir değildir. İyi bir içerik yönetim sistemi yüklenen görseli otomatik olarak yeniden boyutlandırmalı ve WebP sürümünü üretmelidir.
## 4. Tembel yükleme (lazy loading)
`loading="lazy"` özelliği, ekranın altında kalan görsellerin ziyaretçi o bölüme yaklaşana kadar indirilmemesini sağlar. Uzun sayfalarda ilk yükleme süresini belirgin şekilde kısaltır.
Dikkat edilmesi gereken tek ama önemli kural: **ilk ekranda görünen görsellere tembel yükleme vermeyin.** Özellikle sayfanın en büyük görseli (kahraman görseli) tembel yüklenirse, Core Web Vitals’taki LCP metriği kötüleşir. Bu görsel için tersine `fetchpriority="high"` kullanmak daha doğrudur. Ayrıntılar için [Core Web Vitals rehberimize](/blog/core-web-vitals-lcp-inp-cls-rehberi/) bakabilirsiniz.
## 5. Genişlik ve yükseklik verin
Her `img` etiketine `width` ve `height` özelliği eklemek, tarayıcının görsel yüklenmeden önce yerini ayırmasını sağlar. Bu yapılmazsa görsel geldiğinde metin aşağı kayar ve CLS metriği bozulur. CSS’te `max-width: 100%; height: auto;` ile görsel yine esnek kalır.
## 6. Alt metin yazın
Alt metin, görseli göremeyen kullanıcılar (ekran okuyucu kullananlar) ve görseli yükleyemeyen ziyaretçiler için görselin yerini tutar. Arama motorları ve yapay zekâ asistanları da görselin ne anlattığını büyük ölçüde alt metinden öğrenir.
İyi alt metin örnekleri:
- Kötü: `alt="IMG_2041"` veya `alt="kupa kupa seramik kupa ucuz kupa"`
- İyi: `alt="El yapımı mavi seramik kupa, ahşap masa üzerinde"`
- Yalnız süs amaçlı görselde: `alt=""` (boş bırakılır, ekran okuyucu atlar)
## 7. Dosya adları ve önbellek
- Dosya adlarında Türkçe karakter ve boşluk yerine küçük harf ve tire kullanın: `mavi-seramik-kupa.webp`.
- Görselleri uzun süreli tarayıcı önbelleğiyle sunun. Görsel değiştiğinde dosya adını da değiştirin ki ziyaretçiler eskisini görmesin.
- Çok ziyaretçi alan sitelerde bir CDN, görselleri ziyaretçiye coğrafi olarak yakın bir sunucudan gönderir.
## Sık yapılan hatalar
1. Kahraman görseline `loading="lazy"` vermek.
2. Logo için 500 KB’lık PNG kullanmak; SVG çoğu zaman birkaç kilobayttır.
3. Görselleri CSS arka planı olarak eklemek; tarayıcı geç keşfeder ve alt metin verilemez.
4. Galeri sayfasında 40 tam boyutlu fotoğrafı aynı anda yüklemek.
5. Görselleri küçültmek için yalnız CSS’e güvenmek; dosya yine tam boyutta iner.
## Kontrol listesi
- Fotoğraflar WebP veya AVIF, logolar SVG.
- Hiçbir görsel, gösterildiği alanın iki katından geniş değil.
- İlk ekrandaki büyük görsel tembel yüklenmiyor; diğerleri `loading="lazy"`.
- Tüm görsellerde `width`, `height` ve anlamlı `alt` var.
- Yükleme sırasında otomatik yeniden boyutlandırma ve WebP üretimi çalışıyor.
## Örnek senaryo: ürün galerisi olan bir mağaza
Her ürün sayfasında altı fotoğraflık bir galeri olan bir el yapımı ürün mağazası düşünelim. Fotoğraflar telefonla çekiliyor ve her biri 3–5 MB. Optimizasyon planı şöyle olabilir:
1. **Yükleme sırasında otomatik işleme:** Yönetim paneline yüklenen her fotoğraf en fazla 1600 piksel genişliğe indirilir, WebP sürümü ve 400 piksellik küçük bir önizleme sürümü üretilir.
2. **Galeri yapısı:** Sayfa açıldığında yalnız ilk büyük fotoğraf ve altı küçük önizleme yüklenir. Diğer büyük fotoğraflar kullanıcı önizlemeye tıkladığında indirilir.
3. **İlk fotoğraf önceliği:** Galerinin ilk fotoğrafı sayfanın LCP öğesidir; tembel yüklenmez ve `fetchpriority="high"` alır.
4. **Alt metin şablonu:** Her fotoğrafa ürün adı ve fotoğrafın gösterdiği açıyı içeren bir alt metin yazılır: “El yapımı mavi kupa, üstten görünüm”.
5. **Ölçüm:** Değişiklikten önce ve sonra aynı ürün sayfası mobil olarak test edilir; sayfa ağırlığı ve LCP değeri karşılaştırılır.
Bu tür bir düzenlemede bir ürün sayfasının toplam ağırlığı çoğu zaman 20 MB’tan 1–2 MB seviyesine iner. Fark yalnız hız testinde değil, mobil veri kullanan ziyaretçinin sayfayı terk etmeden ürünü inceleyebilmesinde ortaya çıkar.
## Sonuç
Görsel optimizasyonu, kod yazmadan bile sayfa ağırlığını yarıya indirebilen nadir iyileştirmelerden biridir. Doğru biçim, doğru boyut ve doğru yükleme sırası; hem ziyaretçinin mobil verisini hem de sizin dönüşüm oranınızı korur. Sitenizdeki büyük görselleri ve eksik alt metinleri [SEO ve hız testimizle](/araclar/seo-hiz-testi/) bulabilirsiniz.
```
Tarayıcı bu bilgiyle telefonda küçük, geniş ekranda büyük dosyayı seçer.
## 3. Sıkıştırma ayarı
Web için fotoğraflarda kalite ayarını yüzde 70–85 aralığında tutmak, gözle fark edilmeyen bir kalite kaybıyla dosya boyutunu ciddi oranda düşürür. Kaydetmeden önce görselin meta verilerini (kamera bilgisi, konum) temizleyin; hem boyut küçülür hem de istemeden konum paylaşmamış olursunuz.
Görselleri tek tek elle sıkıştırmak sürdürülebilir değildir. İyi bir içerik yönetim sistemi yüklenen görseli otomatik olarak yeniden boyutlandırmalı ve WebP sürümünü üretmelidir.
## 4. Tembel yükleme (lazy loading)
`loading="lazy"` özelliği, ekranın altında kalan görsellerin ziyaretçi o bölüme yaklaşana kadar indirilmemesini sağlar. Uzun sayfalarda ilk yükleme süresini belirgin şekilde kısaltır.
Dikkat edilmesi gereken tek ama önemli kural: **ilk ekranda görünen görsellere tembel yükleme vermeyin.** Özellikle sayfanın en büyük görseli (kahraman görseli) tembel yüklenirse, Core Web Vitals’taki LCP metriği kötüleşir. Bu görsel için tersine `fetchpriority="high"` kullanmak daha doğrudur. Ayrıntılar için [Core Web Vitals rehberimize](/blog/core-web-vitals-lcp-inp-cls-rehberi/) bakabilirsiniz.
## 5. Genişlik ve yükseklik verin
Her `img` etiketine `width` ve `height` özelliği eklemek, tarayıcının görsel yüklenmeden önce yerini ayırmasını sağlar. Bu yapılmazsa görsel geldiğinde metin aşağı kayar ve CLS metriği bozulur. CSS’te `max-width: 100%; height: auto;` ile görsel yine esnek kalır.
## 6. Alt metin yazın
Alt metin, görseli göremeyen kullanıcılar (ekran okuyucu kullananlar) ve görseli yükleyemeyen ziyaretçiler için görselin yerini tutar. Arama motorları ve yapay zekâ asistanları da görselin ne anlattığını büyük ölçüde alt metinden öğrenir.
İyi alt metin örnekleri:
- Kötü: `alt="IMG_2041"` veya `alt="kupa kupa seramik kupa ucuz kupa"`
- İyi: `alt="El yapımı mavi seramik kupa, ahşap masa üzerinde"`
- Yalnız süs amaçlı görselde: `alt=""` (boş bırakılır, ekran okuyucu atlar)
## 7. Dosya adları ve önbellek
- Dosya adlarında Türkçe karakter ve boşluk yerine küçük harf ve tire kullanın: `mavi-seramik-kupa.webp`.
- Görselleri uzun süreli tarayıcı önbelleğiyle sunun. Görsel değiştiğinde dosya adını da değiştirin ki ziyaretçiler eskisini görmesin.
- Çok ziyaretçi alan sitelerde bir CDN, görselleri ziyaretçiye coğrafi olarak yakın bir sunucudan gönderir.
## Sık yapılan hatalar
1. Kahraman görseline `loading="lazy"` vermek.
2. Logo için 500 KB’lık PNG kullanmak; SVG çoğu zaman birkaç kilobayttır.
3. Görselleri CSS arka planı olarak eklemek; tarayıcı geç keşfeder ve alt metin verilemez.
4. Galeri sayfasında 40 tam boyutlu fotoğrafı aynı anda yüklemek.
5. Görselleri küçültmek için yalnız CSS’e güvenmek; dosya yine tam boyutta iner.
## Kontrol listesi
- Fotoğraflar WebP veya AVIF, logolar SVG.
- Hiçbir görsel, gösterildiği alanın iki katından geniş değil.
- İlk ekrandaki büyük görsel tembel yüklenmiyor; diğerleri `loading="lazy"`.
- Tüm görsellerde `width`, `height` ve anlamlı `alt` var.
- Yükleme sırasında otomatik yeniden boyutlandırma ve WebP üretimi çalışıyor.
## Örnek senaryo: ürün galerisi olan bir mağaza
Her ürün sayfasında altı fotoğraflık bir galeri olan bir el yapımı ürün mağazası düşünelim. Fotoğraflar telefonla çekiliyor ve her biri 3–5 MB. Optimizasyon planı şöyle olabilir:
1. **Yükleme sırasında otomatik işleme:** Yönetim paneline yüklenen her fotoğraf en fazla 1600 piksel genişliğe indirilir, WebP sürümü ve 400 piksellik küçük bir önizleme sürümü üretilir.
2. **Galeri yapısı:** Sayfa açıldığında yalnız ilk büyük fotoğraf ve altı küçük önizleme yüklenir. Diğer büyük fotoğraflar kullanıcı önizlemeye tıkladığında indirilir.
3. **İlk fotoğraf önceliği:** Galerinin ilk fotoğrafı sayfanın LCP öğesidir; tembel yüklenmez ve `fetchpriority="high"` alır.
4. **Alt metin şablonu:** Her fotoğrafa ürün adı ve fotoğrafın gösterdiği açıyı içeren bir alt metin yazılır: “El yapımı mavi kupa, üstten görünüm”.
5. **Ölçüm:** Değişiklikten önce ve sonra aynı ürün sayfası mobil olarak test edilir; sayfa ağırlığı ve LCP değeri karşılaştırılır.
Bu tür bir düzenlemede bir ürün sayfasının toplam ağırlığı çoğu zaman 20 MB’tan 1–2 MB seviyesine iner. Fark yalnız hız testinde değil, mobil veri kullanan ziyaretçinin sayfayı terk etmeden ürünü inceleyebilmesinde ortaya çıkar.
## Sonuç
Görsel optimizasyonu, kod yazmadan bile sayfa ağırlığını yarıya indirebilen nadir iyileştirmelerden biridir. Doğru biçim, doğru boyut ve doğru yükleme sırası; hem ziyaretçinin mobil verisini hem de sizin dönüşüm oranınızı korur. Sitenizdeki büyük görselleri ve eksik alt metinleri [SEO ve hız testimizle](/araclar/seo-hiz-testi/) bulabilirsiniz.