Web siteleri için görseller nasıl optimize edilir
Görseller genellikle bir sayfanın ağırlığının çoğunu oluşturur. Beş karar bunun çoğunu çözer.
1 Eylül 2026 tarihinde güncellendi
Görseller, çoğu sitede sayfa ağırlığına en büyük katkıyı sağlayan unsurlardır ve Largest Contentful Paint öğesi, sayfaların çoğunda bir görseldir. Bunları optimize etmek, mevcut en yüksek kaldıraçlı performans çalışmasıdır ve çoğu, araçlardan ziyade kararlarla ilgilidir.
Bu, en büyük etkiden en küçüğe doğru önemli olan sıradır.
Adımlar
- 1
1. Doğru boyutları sunun
Görüntünün kapladığı en büyük CSS genişliğini ölçün ve yüksek yoğunluklu ekranlar için bunun yaklaşık iki katı boyutunda dışa aktarın. 1200 CSS pikseli olan bir kahraman görseli, 6000 piksel kamera orijinali yerine 2400 piksel bir kaynak gerektirir. Bu tek adım genellikle diğer her şeyin toplamından daha etkilidir.
- 2
2. WebP kullanın, mümkünse AVIF ile
WebP, aynı kalitede JPEG'den %25-35 daha küçüktür ve her yerde desteklenir. AVIF daha da ileri gider ancak daha yavaş kodlar. Çok eski istemcileri desteklemeniz gerekiyorsa bir JPEG yedeği bulundurun.
- 3
3. Kaliteyi alışkanlığa göre değil, içeriğe göre ayarlayın
Fotoğraflar için 75–85. Keskin kenarlı grafikler için daha yüksek, burada sıkıştırma artefaktları daha görünürdür. Sonucu gerçek görüntüleme boyutunda kontrol edin.
- 4
4. Her zaman genişlik ve yükseklik ayarlayın
Açık boyutlar, tarayıcının görüntü yüklenmeden önce yer ayırmasına olanak tanır, bu da düzen kaymasını önler. Bu, hiçbir maliyeti olmayan bir Kümülatif Düzen Kayması düzeltmesidir.
- 5
5. Katlamanın altındaki içeriği tembel yükleyin, asla üstündekini değil
Sayfanın alt kısımlarındaki görsellere loading="lazy" özelliğini ekleyin. LCP görselinizi geç yüklemeyin; bu, tam olarak ölçülen şeyi geciktirir.
Dışa aktarırken meta verileri kaldırın
EXIF ve gömülü renk profilleri, web'de herhangi bir görüntüleme faydası sağlamadan ağırlık ekler.
Logolar ve simgeler için SVG kullanın
Bir vektör logosu genellikle birkaç kilobayttır ve her boyutta ve yoğunlukta keskin kalır.