Web Sitesi Görsel Optimizasyonu · Hızlı Sayfa Rehberi

Bir web sayfasının toplam boyutunun büyük kısmını çoğu zaman görseller oluşturur. Telefondan doğrudan yüklenen birkaç megabaytlık fotoğraflar, sayfanın mobil bağlantıda saniyelerce geç açılmasına neden olur. Ziyaretçiler yavaş sayfaları terk eder; Google da sayfa deneyimini sıralamada dikkate alır.

1. Görseli gösterileceği ölçüde yükleyin

En sık yapılan hata, 4000 piksel genişliğindeki bir fotoğrafı 800 piksellik bir alanda göstermektir. Tarayıcı fotoğrafı küçültür ama dosyanın tamamını yine de indirir. Genel bir başlangıç olarak:

Kullanım	Önerilen genişlik
Tam ekran kapak (hero) görseli	1920–2400 px
Yazı içi görseller	1200–1600 px
Kart ve küçük önizlemeler	400–800 px
Logo ve ikonlar	SVG (vektör)

Yüksek çözünürlüklü (Retina) ekranlar için, gösterim genişliğinin yaklaşık iki katı yeterlidir; daha büyüğü fark yaratmaz.

2. Doğru formatı seçin

WEBP: Fotoğraflar ve şeffaf görseller için çoğu durumda en küçük dosya.
JPG: WEBP kullanılamayan yerlerde fotoğraflar için.
PNG: Keskin kenarlı grafikler ve ekran görüntüleri için; fotoğraflarda gereksiz büyük olur.
SVG: Logo, ikon ve basit çizimler için.

3. Sıkıştırın

Fotoğraflarda 75–85 arası kalite değeri, gözle görülür bir fark olmadan dosyayı genellikle birkaç kat küçültür. Görselleri siteye yüklemeden önce sıkıştırmak, sunucuda yer ve bant genişliği de kazandırır.

4. Görsellere boyut verin

HTML'de görselin width ve height değerlerini belirtmek, tarayıcının görsel yüklenmeden önce yer ayırmasını sağlar. Böylece sayfa yüklenirken içerik kaymaz; bu kayma, Google'ın ölçtüğü sayfa deneyimi metriklerinden biridir (CLS).

5. Ekran dışındaki görselleri sonradan yükleyin

Sayfanın alt kısmındaki görseller için loading="lazy" özelliği, görselin yalnızca ziyaretçi o bölüme yaklaştığında indirilmesini sağlar. Sayfanın en üstündeki ana görsele ise bunu uygulamayın; o görselin hemen yüklenmesi gerekir.

6. Açıklayıcı dosya adı ve alt metin kullanın

"IMG_4821.jpg" yerine "beyaz-seramik-kupa.jpg" gibi bir dosya adı ve görseli tarif eden bir alt metin (alt), hem görme engelli ziyaretçiler hem de görsel aramalar için önemlidir.

Hızlı kontrol listesi

Görsel, gösterileceği alandan çok daha büyük mü?
Fotoğraflar WEBP veya sıkıştırılmış JPG mi?
width ve height değerleri tanımlı mı?
Sayfanın altındaki görseller lazy loading kullanıyor mu?
Alt metinler yazılmış mı?

Görsellerinizi Görsel Sıkıştırma aracıyla toplu olarak küçültebilir ve maksimum genişlik verebilir, Görsel Format Dönüştürücü ile WEBP'ye çevirebilirsiniz. Dosyalarınız tarayıcınızda işlenir, hiçbir sunucuya yüklenmez.