WebP veya AVIF'i, kendi görüntünüzün gerçek görüntüleme boyutundaki dışa aktarmalarını karşılaştırarak seçin. AVIF fotoğraf teslimi için çekici bir seçenek olabilir; WebP hem kayıplı hem kayıpsız iş akışları sunar. İki uzantı da en küçük dosyayı veya en iyi görünen sonucu garanti etmez.
Hangisini önce denemeli?
| Varlık | Başlangıç karşılaştırması | Seçmeden önce inceleyin |
|---|---|---|
| Fotoğraf veya ürün fotoğrafı | AVIF ve kayıplı WebP | Doku, geçişler, bayt ve kodlama süresi |
| Küçük yazılı ekran görüntüsü | PNG ve kayıpsız WebP | Harf kenarları ve tam piksel ayrıntısı |
| Saydam kesit | PNG, WebP ve AVIF | Açık ve koyu arka planlarda alfa kenarları |
| Vektör logo | SVG'yi aday olarak tutun | Gerçek çizim ve alan platform |
Sıkıştırma ve kalite: karşılaştırılabilir dışa aktarmalar kullanın
İki kodlayıcıda 80 kalite değeri eşit görsel kalite demek değildir. Aynı kaynaktan başlayın, aynı çıktı boyutlarını kullanın ve iki çıktı da kalite gereksiniminizi karşılayana kadar her kodlayıcıyı ayarlayın. Sonra baytları karşılaştırın. Karşılaştırmanın tekrarlanabilmesi için kodlayıcı sürümünü, kalite ayarını, effort veya speed ön ayarını ve metadata işlemesini not edin.
Küçük bir test için kendi varlıklarınızdan bir dokulu fotoğraf, bir düz geçiş, bir ekran görüntüsü ve bir saydam kesit seçin. Sonuçları ayrı kaydedin; bir ortalama kötüleşen görüntüyü gizleyebilir. Bu bir test yöntemidir, bir biçimin sabit bir yüzde kazandırdığına dair ölçülmüş bir iddia değildir.
Saydamlık, animasyon ve HDR
WebP'nin kapsayıcı belirtimi alfa ve animasyon içerir. AVIF belirtimi alfayı, görüntü dizilerini ve HDR'yi destekler. Biçim yeteneği kodlayıcınızın, CMS'inizin veya görüntüleyicinizin her özelliği desteklediğini garanti etmez. Animasyonlu veya HDR dosyayı amaçlanan uygulamada test edin.
İki biçim de saydam varlıklar için kullanılabilir. Dışa aktarma ayarları yine önemlidir: dönüşümden sonra gölgeleri ve yumuşak kenarları inceleyin. Alttaki kontrol için saydamlığın nasıl doğrulanacağına bakın.
Alternatifleri picture öğesiyle sunun
Bu örnek HTML aynı fotoğrafın üç dışa aktarmasını kullanır. Dosya adlarını, boyutları ve alternatif metni kendinizinkilerle değiştirin:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="Mountain lake">
</picture>Tarayıcı işaretlemeye ve kendi desteğine göre ilk uygun kaynağı kullanır; üç dosyayı görsel kalite veya bayt boyutu için karşılaştırmaz. MDN picture başvurusu kaynak seçimini açıklar. Saydam bir varlık için JPEG yerine PNG yedeği kullanın.
Dosya boyutu kadar teslimi de kontrol edin
Tüm görüntü kütüphanesini değiştirmeden önce test sayfasını bir telefonda ve bir masaüstünde açın, seçilen kaynağı tarayıcı geliştirici araçlarında inceleyin ve önemsediğiniz bağlantıda yüklemeyi ölçün. Daha küçük bir indirme tek başına daha hızlı bir sayfa kanıtlamaz: keşif, öncelik, kod çözme ve yerleşim de bir görüntünün ne zaman göründüğünü etkiler.
Yükleme davranışı önemliyse AVIF progressive decoding yazısını okuyun. Vektör çizim için logolarda SVG ve PNG ile başlayın; saydam raster teslim için saydam görüntü biçimlerini karşılaştırın.
