Web sitendeki görseller nasıl daha hızlı yüklenir (bulanıklaşmadan)

Görsel ağırlığı neden önemli

Bir sayfadaki en yavaş şey genellikle en büyük görselidir ve tarayıcının Largest Contentful Paint (LCP) olarak ölçtüğü şey çoğu zaman odur. Google'ın Core Web Vitals'ı 2,5 saniyenin altındaki bir LCP'yi iyi sayar. Mobil bir bağlantıda 3 MB'lık tek bir ana fotoğraf bu bütçenin tamamını tek başına tüketebilir.

1. Görselleri gösterildikleri boyutta sun

4000 piksellik bir fotoğrafı, onu 800 piksel genişliğinde gösteren bir yere göndermenin anlamı yoktur. Pratik bir kural olarak bir görsel, görüntüleme genişliğinin en fazla yaklaşık iki katı olmalıdır; bu, yüksek yoğunluklu ekranlarda keskin kalmasını sağlar. Tipik genişlikler: tam genişlikte bir ana görsel için 1600–2000 px, makale görselleri için 800–1200 px, küçük resimler için 300–400 px.

2. Modern bir biçim kullan

WebP dosyaları, benzer kalitede genellikle JPG'den %25–35 daha küçüktür ve güncel tüm tarayıcılar onu destekler. PNG'yi yalnızca kayıpsız grafiklere veya saydamlığa ihtiyaç duyduğun yerde kullan. Eski yazılımları desteklemen gerekiyorsa yedek olarak bir JPG bulundur. Ayrıntılar için JPG, PNG ve WebP karşılaştırmasına bak.

3. Makul bir boyuta sıkıştır

Bunlar kesin kurallar değil, kaba hedeflerdir: ana görsel için yaklaşık 200 KB altı, makale içi görseller için yaklaşık 100 KB altı ve küçük resimler için yaklaşık 30 KB altı. Bir kaydırıcıyla göz kararı oynamak yerine hedefi belirle ve aracın onu karşılayan en yüksek kaliteyi bulmasına izin ver.

4. Ekranın altındaki görselleri geç yükle

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Geç yükleme (lazy loading), ziyaretçi yakınlarına kaydırana kadar görselleri erteler. Bunu sayfanın en üstündeki ana görsele uygulama — o hemen yüklenmelidir; çünkü genellikle LCP öğesidir.

5. Genişliği ve yüksekliği her zaman belirt

Ölçüler HTML'de olduğunda tarayıcı, görsel gelmeden önce doğru miktarda yer ayırır; böylece sayfa yüklenirken zıplamaz (bu zıplama Cumulative Layout Shift olarak ölçülür). Açıklayıcı bir alt özniteliği, erişilebilirliğe ve görsel aramaya yardımcı olur.

6. srcset ile birden çok boyut sun

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Tarayıcı, ziyaretçinin ekranı için yeterince keskin olan en küçük dosyayı seçer; böylece bir telefon masaüstü sürümünü indirmez.

Çalışmanı nasıl kontrol edersin

Sayfayı Chrome geliştirici araçlarındaki PageSpeed Insights'tan veya Lighthouse'tan geçir. İkisi de gereğinden büyük ve optimize edilmemiş görselleri işaretler ve tam olarak kaç bayt kazanacağını tahmin eder.

Dosyaları hazırlamak

1. Görseli WebP'ye dönüştür.
2. İhtiyacın olan genişliği yeniden boyutlandırma aracında ayarla — oran kilitli olarak.
3. Azami bir dosya boyutu belirle ve sonucu önce/sonra kaydırıcısıyla kontrol et.
4. srcset'te kullanmak istediğin her genişlik için bir dosya dışa aktar.

Her dışa aktarmada orijinalden çalış. Zaten sıkıştırılmış bir kopyayı yeniden sıkıştırmak, kaynağı bir kez sıkıştırmaktan daha fazla kalite kaybettirir.

Sık sorulan sorular