Görüntünün yapması gereken işle göre seçin
Başlangıçta uzantıyla değil varlıkla başlayın. Bir fotoğraf sürekli tonlu içeriktir; bu nedenle gösterilen boyutta bazı kayıplar kabul edilebilir. Bir ekran görüntüsü, grafik, logo veya çizim keskin kenarlara ve metne sahiptir; bu tür bölgelerde artefaktlar göze çarpar. Bunları kayıpsız çıktı veya titiz onayla koruyun. Varsa bir vektör logo veya diyagram için SVG kullanın.
Sonra yetenekleri tanımlayın. Alfa, piksel başına şeffaflık anlamına gelir. Animasyon bir sıra karedir. Gerekli tarayıcı kapsamı, yayın hacmi ve derleme süresi, daha küçük bir formatın tercih edilmesini engelleyebilen teslimat kısıtlarıdır.
Önce kayıplı AVIF ve WebP’yi test edin. Geniş uyumlu opak bir yedek gerektiğinde JPEG bulundurun.
Kayıpsız bir kaynak tutun. Seçim yapmadan önce gerçek gösterim ölçeğinde PNG ile kayıpsız WebP veya AVIF’i karşılaştırın.
AVIF, WebP veya PNG kullanın; JPEG seçmeyin çünkü alfa kanalı taşımaz.
Her formatın ne kattığını anlayın
AVIF, AV1 kodlu görüntüleri HEIF tabanlı bir kapsayıcıda saklar. Spesifikasyonunda durgun görüntüler, görüntü dizileri ve alfa görüntü öğeleri yer alır. Kayıplı ve kayıpsız kodlamayı, şeffaflığı ve animasyonu destekler. Tasarruflar sabit değildir: kaynak içerik, kodlayıcı, hız, hedef kalite ve meta veriler sonucu değiştirir.
WebP, kayıplı ve kayıpsız modları, şeffaflığı ve animasyonu destekler. JPEG, çok geniş tarihsel desteğe sahip kayıplı bir durgun görüntü formatıdır ve opak fotoğraf yedeği olarak yararlıdır. PNG, alfa ile kayıpsızdır; bu onu kesin grafikler için sağlam bir yedek yapar, ancak fotoğrafik PNG’ler genellikle verimsizdir. Olağan PNG statiktir; hareket gerekiyorsa ayrı bir animasyon formatını test edin.
Daha küçük aktarım boyutu kodlama ve yedek çalışmasını haklı çıkarabildiğinde yüksek değerli raster görüntüler için keşfedilmeye değerdir.
Şeffaflık ve animasyon dahil modern genel amaçlı raster seçeneği olarak kullanışlıdır.
Opak fotoğraf yedeği için kullanın; şeffaf logo veya kesitler için kullanmayın.
Kayıpsız, şeffaf raster yedeği ve piksel sadakatinin minimum baytlardan daha önemli olduğu varlıklar için kullanın.
Bir formata tek başına bahis yapmak yerine yedek yolu oluşturun
Tarayıcının alternatifleri değerlendirmesine izin veren `picture` öğesi kullanın. AVIF’i ilk sıraya, sonra WebP’yi, en son JPEG veya şeffaflık/kayıpsız kenarlar gerektiğinde PNG’yi img yedeği olarak koyun; doğru MIME türünü belirtin. Tarayıcı desteklenmeyen bir kaynağı atlar ve hiçbir kaynak kullanılabilir değilse yedeği kullanır. Anlamlı alternatif metin aynı kalmalı; kırpımı kasıtlı değiştirmediğiniz sürece alternatif metni koruyun.
Format yedeği, duyarlı boyutlandırmanın yerini almaz. Yuva değişiyorsa genişlik tabanlı adaylar ve dürüst bir sizes değeri sağlayın. Tarayıcının alan ayırabilmesi için width ve height ekleyin. Küçük dosya, aşırı büyük piksel boyutunda yine bayt israfıdır.
AVIF önce, WebP ikinci, opak fotoğraflar için JPEG veya yedeğin şeffaflık ya da kayıpsız kenarlar gerektirdiği durumda PNG sonra.
Sunucu isteğin yeteneklerinden format seçiyorsa `picture` işaretlemesinden ziyade cache varyasyonunu doğru yapılandırın ve her istemcinin çözümlenebilir bir temsil aldığını test edin.
Tercih edilen kod çözücüyü desteklemeyen bir istemci kullanın veya bir kaynağı staging ortamında kasıtlı devre dışı bırakın; görüntünün, boyutların ve alternatif metnin doğru olduğunu doğrulayın.
Kodlama süresini bütçeleyin ve görsel kaliteyi koruyun
Modern sıkıştırma işi kodlama aşamasına kaydırır. AVIF’in referans kodlayıcısı 0’dan (en yavaş) 10’a (en hızlı) bir hız aralığı sunar; WebP de çıktı boyutu ve kalite için daha fazla kodlayıcı işiyle hız karşıtlığı yapar. Toplu yeniden kodlama veya isteğe bağlı dönüşümü operasyonel bir karar olarak ele alın, ücretsiz bir ayar değişikliği olarak değil.
Varlık sınıfına göre tekrarlanabilir bir politika belirleyin ve orijinalleri yaygın gösterim boyutlarında gözden geçirin. Yüzleri, gradyanları, metni, kenarları ve şeffaf sınırları inceleyin. Master’ı saklayın ve bir kusur tekrar üretilebilsin diye kodlayıcı sürümü ve ayarlarını kaydedin.
Daha hızlı kodlama derleme baskısını azaltabilir fakat daha büyük dosya veya daha az verimli sıkıştırma üretebilir; kendi kaynak setinizde benchmark yapın.
Bir skor veya ön ayar, ziyaretçiler için anlam taşıyan görüntü bölgelerinin görsel incelemesinin yerini alamaz.
Görüntü formatı değişikliklerini proaktif güvenilirlik uygulaması haline getirin
Status Is UP için, görüntü optimizasyonu kritik bir sayfanın bozulmasını önlediğinde proaktif çalışma — yani uptime işi — sayılır. Kritik görüntü URL’lerinin envanterini çıkarın, temsili bir dönüşümü aşama ortamında uygulayın ve içerik türü, CDN davranışı ve önbellek geçersiz kılmayı site çapı bir göçten önce doğrulayın.
Geri alınabilir bir toplu dağıtım yapın. Yayın adayında render ve aktarım davranışını karşılaştırın, sonra yeni yol kanıtlanana kadar eski temsilcileri saklayın. Bir dönüşüm veya önbellek kuralı başarısız olursa bilinen iyi kaynağı geri yükleyin. Bu, AVIF veya birden çok format için evrensel bir zorunluluk değil; dayanıklı bir teslimat yönüdür.
Her arşiv görüntüsünü aynı anda değil, ilk kullanışlı görünümü etkileyen lead ve içerik görsellerini önceliklendirin.
Deterministik varlık adları veya sürümlenmiş bir eşleme tutun ki önceki JPEG, PNG veya WebP yolu hızlıca geri yüklenebilsin.