1. Optimizasyona başlamadan önce görseli sınıflandırın
Görselleri şablon bazında envanterleyin. Her görselin rolünü, en büyük ve en küçük render edilen genişliğini, başlangıç görünüme (initial-viewport) dahil olup olmadığını ve küçük ekranların başka bir kırpma gerektirip gerektirmediğini kaydedin. Bu, dosya boyutu çalışmalarını önemli sayfalarda test edilebilen kararlara dönüştürür.
Fotoğraflar genellikle denetlenmiş kayıplı (lossy) sıkıştırmayı tolere eder. Logolar, arayüz simgeleri, çizgi sanatı ve grafikler SVG veya keskin kenarları koruyan raster formatına daha uygun olabilir. SVG; çizgi sanatı, diyagramlar ve grafikler için uygundur, detaylı fotoğraflar için değil.
Temel detayı koruyun ve görselin amacını ileten metin sağlayın.
Boş alternatif metin (alt="") kullanın; önemli bilgilerin tek kaynağı yapmayın.
Sadece görüntü piksellerini değil, eylemi veya hedefi adlandırın.
2. Render edilen slota göre boyutlandırın, sonra duyarlı adaylar sunun
İçsel (intrinsic) boyutları CSS slotuyla eşleştirin. Masaüstü ölçeğinde bir dosyayı dar bir kartta kullanmak transferi israf eder; küçük bir raster'ı aşırı ölçekte geriye gerilir ve yumuşar. Cihaz piksel yoğunluğunu hesaba katın, ancak her ekranın en büyük adayı gerektirdiğini varsaymayın; görsel doğrulama yapın.
Tek bir kompozisyonun çeşitli genişlikleri varsa, srcset genişlik bildiricilerini kullanın ve sizes ile gerçek slot genişliğini bildirin. Tarayıcı sonra bir adayı seçer. Kırpma veya kompozisyon görünümle değişiyorsa art direction için picture kullanın: küçük ekran kırpması, masaüstü görselinin küçültülmesinden farklı olabilir. picture içinde kullanılmayan istemciler için img ile bir fallback src ve alt bırakın.
Aynı kompozisyon, farklı piksel boyutları.
Ölçeklenince mesajı kaybolan farklı kırpma veya kompozisyon.
Duyarlı öznitelikleri kullanmayan istemciler için img üzerinde src bulundurun.
3. Görselin özelliklerine göre format ve sıkıştırma seçin
WebP ve AVIF uygun durumlarda raster transferi azaltabilir, ancak format kalite garantisi değildir. Temsil niteliğindeki yüzler, ince doku, marka degradeleri, içine gömülü metin ve şeffaflık test edin. JPEG fotoğraflar için yaygın bir yedek iken; PNG kayıpsız raster detay veya şeffaflık için uygun olabilir. AVIF desteğini ve operasyonel uygunluğunu hedef kitleniz ve dağıtım yığını açısından kontrol edin.
Kayıplı (lossy) sıkıştırma, bayt tasarrufu için bilgiyi kaldırır ve genelde keskin çizgilere veya metne göre detaylı fotoğraflarda daha hoşgörülüdür. Kayıpsız sıkıştırma kodlanmış pikselleri korur ancak daha az tasarruf sağlayabilir. Kaliteyi kopyalanmış bir sayısal ayara göre değil, render edilen boyutta yan yana incelemeyle seçin. Yönlendirme, renk ve iş akışı ihtiyaçlarını doğrulamadan önce meta verilerini kaldırmayın.
Render boyutunda kayıplı AVIF, WebP ve JPEG yedeğini karşılaştırın.
Uygun SVG'yi tercih edin veya keskin raster kenarlarını test ile koruyun.
Her teslim edilen format ve yedekte alfa görünümünü doğrulayın.
4. İşaretleme hız ve düzen kararlılığını korusun
Her içerik img için intrinsic en-boy oranına uyan width ve height öznitelikleri verin. Tarayıcı dosya gelmeden önce alan ayırabilir ve düzen hareketini azaltır. CSS yine de görüntülenen boyutları ayarlayabilir.
loading=lazy sadece gerçek anlamda ekran dışı olanlarda kullanın. Başlangıç görünümünde olması muhtemel bir görseli, özellikle muhtemel bir Largest Contentful Paint (LCP) adayını lazy-load ile yüklemeyin. LCP, görünümde görünen en büyük görselin, metin bloğunun veya videonun render süresidir. fetchpriority=high yalnızca göreceli bir ipucudur; bunu dikkatli kullanın ve sonucu ölçün. Alternatif metin veya görsel keşfi gereken içerik için HTML görsel işaretlemesini kullanın; Google CSS görsellerini indexlemediğini belgeler.
Width ve height ayarlarını yapın; lazy-loadlu galeri görselleri dahil.
Muhtemel LCP görsellerini eager tutun ve istek önceliğini inceleyin.
Ekran dışı görselleri lazy-load yapın ve kısıtlı ağda kaydırmayı test edin.
5. Anlamı, keşfedilebilirliği ve görsel kaliteyi koruyun
Alternatif metin amaç ve bağlama bağlıdır. Bilgilendirici bir görsel için temel bilgiyi tanımlayın, dekorasyon için alt="" kullanın ve bağlantılı veya buton şeklindeki görsellerin işlevini adlandırın. Karmaşık bir grafik veya diyagram için yakınlarda eşdeğer bir açıklama sağlayın. Anahtar kelime listeleri kullanmayın.
Keşfedilebilir içerik görselleri için standart HTML img öğelerini, ilgili yakın metni, uygulanabiliyorsa kısa açıklayıcı dosya adlarını ve duyarlı işaretleme ile bir fallback kaynağını kullanın. Dekoratif arka planları keşif için gereksiz şekilde içerik haline getirmeyin.
Sıkıştırılmış dosyaları en büyük ve en küçük amaçlanan boyutlarda kontrol edin.
Normal metni tercih edin; aksi halde eşdeğer ifadeyi sağlayın.
Bilgilendirici görselleri ilgili sayfa metni yakınına yerleştirin.
6. Yalnızca varlığı değil sayfayı doğrulayın
Dar ve geniş görünüm noktalarında temsil sayfaları test edin. Tarayıcı geliştirici araçlarında srcset adayını, transfer boyutunu, render edilen boyutları ve düzen hareketini inceleyin. Ağı kısıtlayarak geç yüklenen kahraman görselleri ve yavaş galerileri ortaya çıkarın. Bir dışa aktarma, yanlış sizes değeri, beklenmedik kırpma veya üretim dönüşümü sorununu ortaya çıkaramayabilir.
Varsa laboratuvar (lab) ve alan (field) sinyallerini kullanın. Lighthouse ve PageSpeed Insights yanlış boyutlandırılmış görselleri belirleyebilir; alan LCP gerçek ziyaretleri yansıtır. Aynı şablon, cihaz sınıfı, sürüm ve ölçüm penceresini karşılaştırın. Sunucu zamanı, scriptler, fontlar veya üçüncü taraflar da değiştiğinde görsellere metric değişikliği yüklemeyin. Paylaşılan şablon değişikliklerini sahneleyin ve doğrulana kadar geri alma yolunu açık tutun.
Slotun beklenmeyen şekilde aşırı büyük bir adayı seçmediğini doğrulayın.
Kırpma, keskinlik, renk, alternatifler ve düzen kararlılığını kontrol edin.
Sahibini, beklenen sinyali ve geri dönüş yolunu adlandırın.