AVIF mi WebP mi: hangi görsel biçimini seçmelisiniz?

AVIF ve WebP: önemli farklar

İki biçim de sitenin ziyaretçilere gönderdiği görsel verisini azaltabilir. Hiçbiri her görsel için daha küçük dosya garantisi vermez. Ayrıntılı bir manzara, düz renkli bir illüstrasyon ve şeffaf bir ürün fotoğrafı sıkıştırmaya farklı tepki verebilir. Kaynak görsel, dışa aktarma ayarları ve gösterim boyutu, uzantı kadar önemlidir.

Bunlar biçimlerin yapabildikleridir; her dönüştürücüde bulunan özelliklerin listesi değildir. MDN görsel biçimleri kılavuzu AVIF’in özelliklerini, Google’ın WebP belgeleri ise WebP sıkıştırmasını ve şeffaflığını açıklar. JPG, PNG ve metin içeren grafiklerin de yer aldığı daha geniş seçim için web siteleri için görsel biçimi kılavuzuna bakın.

AVIF her zaman WebP’den küçük mü?

Hayır. Aşağıdaki kaydırmalı karşılaştırma, aynı 1920 × 1440 piksellik JPG’den alınmış iki gerçek Pixilo çıktısını gösterir: kalite 80 ile 299,0 kB WebP ve sabit kalite 65 ön ayarıyla 275,7 kB AVIF. AVIF, WebP’ye göre 23,3 kB, yani yaklaşık %8 tasarruf sağlar. Kaynak JPG’nin 413,1 kB boyutuna göre AVIF yaklaşık %33 tasarruf etse de bu WebP’yi değiştirirken esas alınması gereken karşılaştırma %8’dir.

İki aday da yeniden boyutlandırılmadan doğrudan aynı JPG’den oluşturuldu. Bunlar, farklı ve biçime özgü kalite ayarlarıyla üretilen dosyaların toplam boyutlarıdır; eşit görsel kaliteye göre ayarlanmamışlardır. Kaynak zaten sıkıştırılmıştı, dolayısıyla hiçbir çıktı kayıp ayrıntıları geri getiremez. Sonuç, AVIF’ten garanti edilen bir tasarrufu değil, bu dosyaları ve ayarları anlatır.

Ayırıcıyı kaya dokusu, dağların dış çizgisi ve düz gökyüzü üzerinde sürükleyin. Ayrıntı görünümünde yumuşamış dokuları, haleleri ve renk bantlarını inceleyin; sonra hedeflenen boyutta farkın önemli olup olmadığına karar vermek için tam görüntüye dönün. Sürümlerden birinin görünümünü kabul etmiyorsanız boyuta göre seçim yapmadan önce başka bir çıktıyı karşılaştırın.

Pixilo WebPPixilo AVIF

AVIF ne zaman iyi bir seçimdir?

AVIF’i sayfanın indirdiği veri miktarına belirgin katkı yapan fotoğraflarda deneyin: büyük ürün görünümleri, editoryal fotoğraflar ve banner’lar. Tasarrufu hem bayt hem yüzde olarak değerlendirin. Yukarıdaki 23,3 kB, tek görsel için mütevazı bir azalmadır; gerçek faydası görselin ne sıklıkta yüklendiğine ve alternatifin yayın sürecine ne kadar iş eklediğine bağlıdır.

Bir arşivi dönüştürmeden önce ince kumaş veya saç, koyu alanlar ve yumuşak renk geçişlerinden oluşan temsili bir grubu deneyin. Boyutları sabit tutun ve önemli ayrıntıları kaybeden sürümleri eleyin. Kalan tasarruf anlamlıysa ve siteniz dosyayı güvenilir biçimde sunabiliyorsa AVIF yararlı bir alternatiftir. Bu dengenin uygun olmadığı görsellerde WebP’yi koruyun.

Biçimin HDR desteği, sıradan bir dönüştürmeyi HDR iş akışına dönüştürmez. Pixilo’nun mevcut AVIF aracı, tarayıcının çözdüğü piksellerden 8 bitlik kayıplı çıktı oluşturur. HDR koruma veya kayıpsız seçenek sunmaz. Arşiv, baskı ya da özel renk çalışmaları için özgün dosyayı ayrıca saklayın.

WebP’yi ne zaman korumalısınız?

Görsel zaten iyi görünüyorsa, dosya boyutu uygunsa ve siteniz güvenilir biçimde sunuyorsa WebP’yi koruyun. Sırf başka bir biçim daha yeni diye değiştirmek, garantili fayda olmadan iş yükü ekler. Yayınlama sisteminiz, görsel işleme hizmetiniz veya düzenleyiciniz de WebP için daha kolay bir süreç sunabilir.

Metin ve keskin kenar içeren grafiklerde çıktıyı özellikle dikkatle kontrol edin. Kayıplı çıktı küçük etiketleri bozuyor veya çizgilerin çevresinde izler oluşturuyorsa, kayıpsız WebP sunan bir araç düşünün ya da uygun olduğunda PNG’yi koruyun. Pixilo’nun WebP dönüştürücülerinde ayrı bir kayıpsız mod yoktur. Bu kararı ayrıntılı incelemek için PNG ve WebP karşılaştırmasını okuyun.

Alıcı veya yükleme formu JPG ya da PNG istiyorsa önce bu koşulu karşılayın. Sitenizde iyi çalışan bir biçim, başvuru sisteminde reddedilebilir. Sitede sunulan görsel ile indirilebilir dosyanın aynı biçimde olması gerekmez.

Pixilo ile AVIF ve WebP nasıl karşılaştırılır?

1. Özgün dosyayla başlayın. JPG, PNG veya WebP kaynağını kullanıp ayrıca saklayın. Bir deneme çıktısını başka bir sıkıştırılmış deneme çıktısından üretmeyin.
2. Önce boyutları ayarlayın. Gerekirse iki aday için ortak kaynak oluşturmak üzere görsel boyutlandırma aracını kullanın. Bu karşılaştırmada uzun kenarı 4000 piksel veya altında tutun.
3. AVIF sürümünü oluşturun. JPG → AVIF / PNG → AVIF / WebP → AVIF araçlarını kullanın. Mevcut araç sabit, kayıplı kalite 65 ön ayarını kullanır ve kaynağın piksel boyutlarını korur; AVIF kalite kaydırıcısı sunmaz.
4. WebP sürümünü aynı kaynaktan oluşturun. JPG’den WebP’ye veya PNG’den WebP’ye aracını kullanın. Görünen sonucu kontrol ederek WebP kalitesini ayarlayın. Bu dönüştürücüler, varsayılan olarak açık olan en uzun kenarda 4000 piksel sınırı sunar. Yeniden boyutlandırmanın yalnızca bir adayın boyutlarını değiştirmediğini doğrulayın.
5. İndirilen iki dosyayı inceleyin. Önce boyutları ve görsel kaliteyi kontrol edin. Ardından değiştirme tasarrufunu hesaplamak için bayt farkını WebP dosyasının boyutuna bölün. AVIF daha büyükse veya daha küçük çıktı gerekli ayrıntıları kaybediyorsa WebP’yi koruyun.
6. Sitede test edin. Yayınlanan görseli telefonda ve bilgisayarda, gerçek kırpma ve gösterim boyutuyla kontrol edin. Yeni sürümü doğrulayana kadar eski sürümü saklayın.

Kalite değerleri biçimler ve kodlayıcılar arasında ortak bir ölçek değildir. AVIF ve WebP için 65 seçmek eşit kaliteyi kanıtlamaz. Pixilo seçilen görselleri tarayıcınızda yerel olarak işler. AVIF kodlayıcısı gerektiğinde indirilir; ilk dönüştürmede kodlayıcının yüklenmesi de gerekir.

Dosya boyutu dışında neyi kontrol etmelisiniz?

İnce ayrıntılar ve metin

Saç, çimen, kumaş ve küçük yazıları %100 yakınlaştırmada inceleyin; ardından ziyaretçilerin göreceği boyuta dönün. Yakınlaştırma bozulmayı gösterir, normal boyut ise bunun önemli olup olmadığını anlamanızı sağlar. Ekran görüntülerinde okunabilirlik genellikle en küçük dosyadan daha önemlidir.

Renk geçişleri ve karanlık alanlar

Gökyüzünde, stüdyo fonlarında ve gölgelerde belirgin renk bantları arayın. Karanlık alanların düz lekelere dönüşmeden yararlı ayrıntıları koruduğunu kontrol edin. Bir aday kötü görünüyorsa, küçük dosyanın iyileştirme olduğunu varsaymak yerine daha hafif sıkıştırma veya başka bir biçim kullanın.

Şeffaflık ve kenarlar

Şeffaf görselleri açık ve koyu arka planlarda inceleyin. Ürün çevresindeki soluk bir hale beyazda kaybolup siyahta belirginleşebilir. Arka plan sorunları için şeffaf görsellerin neden siyah veya beyaz arka planlı görünebildiğini okuyun.

Renk, animasyon ve özgün dosya

Dönüştürücünün biçimin taşıyabildiği her özelliği koruduğunu varsaymayın. Pixilo, çözülen görseli yeniden çizerek dışa aktarır; animasyonu, HDR bilgisini veya tüm özgün metaverileri korumak için tasarlanmamıştır. Bu özellikler önemliyse indirilen sonucu kontrol edin ve kaynağı saklayın.

Burada %100, görsel görüntüleyicide gerçek piksel boyutu demektir: bir görsel pikseli bir ekran pikseli olarak gösterilir. Tarayıcının sayfa yakınlaştırması ayrı bir ayardır.

AVIF’i WebP veya JPG alternatifiyle sunma

Güncel başlıca tarayıcılar iki biçimi de destekler, fakat eski tarayıcılar ve bazı uygulama içi görüntüleyiciler alternatif dosya gerektirebilir. HTML’i yönetiyorsanız picture öğesi alternatifler sunmanızı sağlar. Buradaki dosya adları örnektir; kodu kullanmadan önce gerçek dosyaları oluşturup yükleyin.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" width="1200" height="800"
       alt="Önden görünen yeşil ceket">
</picture>

Tarayıcı desteklediği ilk uygun kaynağı seçer; üçünü de indirip boyutlarını karşılaştırmaz. AVIF’i yalnızca destekleyen tarayıcıların o sürümü kullanmasını istiyorsanız ilk sıraya koyun. img alternatif dosyayı, boyutları ve alternatif metni sağlar. Şeffaflık gerekiyorsa JPG yerine PNG kullanın. MDN’nin picture belgelerine bakın.

Bir içerik yönetim sisteminde görsel hizmetinin veya eklentinin gerçekte ne ürettiğini ve sunduğunu kontrol edin. AVIF yüklemek kendiliğinden duyarlı boyutlar veya alternatif dosyalar oluşturmaz. Yayınlandıktan sonra görsel isteklerini inceleyin; önbellek veya CDN eski sürümü sunuyor olabilir.

AVIF sayfa hızını ve SEO’yu iyileştirir mi?

Daha küçük görsel aktarım süresini azaltabilir, fakat uzantı tek başına hızlı sayfa garantisi değildir. Gösterim boyutları, duyarlı görsel seçimi, önbellekleme ve tarayıcının görseli ne zaman bulduğu da önemlidir. Gereğinden büyük bir AVIF, doğru boyutlandırılmış WebP’den kötü olabilir.

Dışa aktarma süresini sunum süresinden ayırın. Kaydırmalı karşılaştırmadaki dosyaların kodlama hızını ölçmedik. İş akışınızı değerlendirmek için cihazınızda temsili bir grubun süresini ölçün ve ilk dönüşümü ayrı kaydedin: Pixilo, AVIF kodlayıcısını gerektiğinde yükler. Önceden hazırlanmış dosyalarda ziyaretçiler bu aşamayı beklemez. Sürümleri istek üzerine üreten bir hizmet, işleme ve önbelleği de hesaba katmalıdır. Ayarlar ve uygulama bu maliyeti etkiler; web.dev’in AVIF kodlama makalesi bunu açıklar.

Google Görseller hem AVIF’i hem WebP’yi destekler. Biçim değiştirmek yararlı içerik, açıklayıcı alternatif metin veya erişilebilir görsel URL’sinin yerini tutmaz. picture kullanırken src içeren img öğesini koruyun ve gerçek biçimle uyumlu uzantı kullanın. Google’ın görsel SEO yönergelerine bakın.

Bir dosya değişikliğinden sıralama artışı beklemek yerine tamamlanmış sayfayı ölçün. Yükleme öncelikleri ve yerleşim kararlılığı için görsellerin Core Web Vitals üzerindeki etkisini okuyun.

Sık sorulan sorular

Her WebP görselini AVIF’e çevirmeli miyim?

Hayır. Önce küçük, temsilî bir grubu deneyin. Sonuç faydalıysa ve sunum sisteminiz destekliyorsa değiştirin. O görsel için daha iyi denge sağlıyorsa WebP’yi koruyun.

AVIF dosyam neden WebP’den büyük?

Önce piksel boyutlarını ve görünen kaliteyi kontrol edin. Farklı ön ayarlar kullanılmış olabilir veya görsel WebP ayarlarınızla daha iyi sıkışıyor olabilir. Büyük bir AVIF, iyi bir WebP’yi değiştirmek için gerekçe değildir.

JPG’yi AVIF’e dönüştürmek kaliteyi geri getirir mi?

Hayır. Önceki JPEG kaydında kaybolan ayrıntılar geri gelmez. En iyi özgün dosyayla başlayıp yeni kopyanın görünümünü ve boyutunu değerlendirin.

.webp uzantısını .avif olarak değiştirebilir miyim?

Hayır. Adı değiştirmek kodlanmış görseli değiştirmez. Dönüştürücü kullanın; sonucu doğru uzantı ve içerik türüyle sunun.

Pixilo’da AVIF daha kötü görünürse ne yapmalıyım?

Pixilo’nun AVIF çıktısı sabit ayar kullanır. Görselinize uygun değilse kalitesi ayarlanmış WebP kullanın, özgün dosyayı koruyun veya gerekli denetimleri sunan bir kodlayıcı seçin. Sabit ayarlı sonuç, tüm olası AVIF çıktılarının temsilcisi değildir.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)