Taramayı Engellemeden Görsel Optimizasyonu: Lazy Loading ve WebP

Görseller Sitenizi Yavaşlatmasın

Modern web sitelerinde görseller, bir sayfanın toplam dosya boyutunun ortalama %60 ila %80'ini oluşturur. Yüksek çözünürlüklü ancak optimize edilmemiş görseller, özellikle mobil cihazlarda sayfa yüklenme sürelerini uzatır ve Google PageSpeed skorlarını düşürür. Hem görsel kalitesinden ödün vermemek hem de milisaniyelik açılış hızlarına ulaşmak için modern görsel optimizasyonu teknikleri kullanılmalıdır.

1. Yeni Nesil Görsel Formatı: WebP Kullanımı

Geleneksel JPEG ve PNG formatları web kullanımı için hantaldır. Google tarafından geliştirilen WebP formatı, aynı görsel kalitesini JPEG'e kıyasla %30, PNG'ye kıyasla %45 daha küçük dosya boyutlarında sunar. Tüm modern tarayıcılar tarafından desteklenen WebP formatına geçiş yapmak, bant genişliği kullanımını ve sunucu yükünü hafifletir.

2. Native Lazy Loading (Tembel Yükleme) Tekniği

Sayfa ilk açıldığında, kullanıcının henüz ekranı aşağı kaydırmadan görmediği (Below the fold) tüm görsellerin indirilmesi gereksiz bir kaynak israfıdır. HTML5 ile gelen native `loading="lazy"` özniteliği sayesinde, görseller sadece kullanıcı ekranı o görsele yaklaştırdığı anda indirilir.

// ÖRNEK LAZY LOADING KULLANIMI

3. Arama Motoru Botları İçin Görsel SEO Kuralları

Görsellerinizin Google Görseller aramasında indeks alması ve sitenize organik trafik çekmesi için dikkat edilmesi gereken noktalar:

• Açıklayıcı Dosya İsimleri: `IMG_1234.jpg` yerine `pure-php-web-tasarim.webp` gibi anahtar kelime içeren isimler kullanın.
• Alt Etiketi (Alt Tag) Kullanımı: Her görselin `alt` özniteliğine görselin neyi temsil ettiğini anlatan net bir açıklama yazın.
• Boyut Belirtme: Görsellere `width` ve `height` değerleri tanımlayarak düzen kaymalarını (CLS) engelleyin.

Performans odaklı web projeleri ve profesyonel görsel altyapıları için Kod Uzmanı çözümlerinden yararlanabilirsiniz.