Sitenin görsellerini hafifletmek istediğinde karşına iki modern format çıkar: WebP ve AVIF. İkisi de JPG ve PNG'ye göre genellikle daha küçük dosyalar üretir, ikisi de şeffaflığı ve animasyonu destekler. Ama sıkıştırma karakterleri, kodlama hızları ve güçlü oldukları durumlar farklıdır. Bu rehberde farkları somut olarak ele alıyor, sonunda ikisini birlikte kullanmanın pratik yolunu gösteriyoruz.
İki formatın kısa geçmişi
WebP, Google'ın 2010'da duyurduğu bir formattır. Kayıplı modu VP8 video kodekine dayanır; bunun yanında ayrı bir kayıpsız modu vardır. Şeffaflık ve animasyon desteği sonradan eklendi. Bugün web'de yaygın olarak kullanılır ve desteği köklüdür.
AVIF (AV1 Image File Format), Alliance for Open Media (AOMedia) adlı birliğin geliştirdiği formattır; 1.0 sürümü 2019'da yayımlandı. AV1 video kodekine dayanır ve HEIF kapsayıcı yapısını kullanır. Yani teknik olarak iPhone'un HEIC formatıyla akrabadır, ancak telif ücreti gerektirmeyecek şekilde tasarlanmış bir kodek kullanır.
Sıkıştırma ve düşük kalitede görünüm
Aynı görsel kalitesi hedeflendiğinde AVIF çoğu durumda WebP'den daha küçük dosya üretir. Fark özellikle düşük kalite ayarlarında belirginleşir. WebP, sıkıştırma arttıkça bloklanma ve renkli kenarlarda bulanıklık gösterebilir; AVIF ise ayrıntıyı daha yumuşak biçimde kaybeder. Bu yumuşama bazen yüzeyleri plastik gibi gösterebilir. Kumaş, çimen ya da cilt dokusu gibi ince ayrıntılar önemliyse kaliteyi biraz yüksek tutman gerekir.
Önemli bir teknik ayrıntı daha: kayıplı WebP, renk bilgisini her zaman yarı çözünürlükte (4:2:0) saklar. Fotoğraflarda bu fark edilmez, ama koyu zemin üzerinde ince kırmızı yazı gibi keskin renk geçişlerinde kenarlar bulanıklaşabilir. AVIF formatı tam renk çözünürlüğünü (4:4:4) de destekler; ancak bunun kullanılıp kullanılmadığı kodlayıcının ayarına bağlıdır. Yazı ağırlıklı grafiklerde, ekran görüntülerinde ve logolarda PNG ya da SVG hâlâ güçlü seçeneklerdir.
Kodlama hızı ve işlem yükü
AVIF'in bedeli hızdır. Bir fotoğrafı AVIF'e kodlamak, WebP'ye kodlamaktan belirgin şekilde uzun sürer. AVIF dönüştürücü aracında büyük bir fotoğrafın birkaç saniye sürmesi bu yüzden normaldir; AVIF kodlayıcısı da ilk ihtiyaç duyulduğunda tarayıcına bir kez indirilir. Siten için görselleri bir kez hazırlıyorsan bu süre önemli değildir; ama kullanıcıların yüklediği görselleri anında dönüştüren bir sistemde fark hissedilir.
Görseli ekranda gösterme, yani çözme tarafında da AVIF biraz daha fazla işlem gücü ister. Modern cihazlarda bu genellikle sorun olmaz, ama çok sayıda büyük görselin aynı anda açıldığı galerilerde düşük güçlü telefonlarda hissedilebilir.
Tarayıcı desteği
Bugün Chrome, Edge, Firefox ve Safari'nin güncel sürümlerinin tamamı hem WebP'yi hem AVIF'i gösterir. WebP desteği daha eskiye dayanır; AVIF desteği ise bazı tarayıcılara daha yakın zamanda geldi. Bu yüzden güncellenmemiş eski telefonlarda ve eski işletim sistemlerinde AVIF'in açılmama ihtimali WebP'ye göre daha yüksektir. Çözüm basit: aşağıda anlatılan yedekli kullanım.
Tarayıcı dışında tablo farklıdır. Bazı eski resim düzenleyicileri, ofis programları ve mesajlaşma uygulamaları bu formatları açamayabilir. Ziyaretçinin bir görseli indirip başka yerde kullanması bekleniyorsa (örneğin bir basın kiti), JPG ya da PNG sunmak daha güvenlidir.
Yan yana karşılaştırma
| Özellik | WebP | AVIF |
|---|---|---|
| Geliştiren | Google (2010) | AOMedia (sürüm 1.0, 2019) |
| Dayandığı kodek | VP8 (kayıplı), ayrı kayıpsız mod | AV1 |
| Aynı kalitede dosya boyutu | JPG'den genellikle küçük | Çoğu durumda WebP'den de küçük |
| Düşük kalitede görünüm | Bloklanma, renkli kenarda bulanıklık | Yumuşama, ayrıntı kaybı |
| Kodlama hızı | Hızlı | Belirgin şekilde yavaş |
| Şeffaflık | Var | Var |
| Animasyon | Var | Var |
| Yüksek bit derinliği ve HDR | Yok, kanal başına 8 bit | Var |
| Güncel tarayıcı desteği | Tümü | Tümü |
Hangisini ne zaman seçmelisin?
- Tek format kullanacaksan ve hızlı bir çözüm istiyorsan WebP: Kodlaması hızlı, desteği köklü, sonuçları öngörülebilir. Blog yazıları, ürün fotoğrafları ve genel site görselleri için rahat bir varsayılandır.
- Büyük ve öne çıkan görsellerde AVIF: Ana sayfadaki büyük kapak fotoğrafı gibi sayfanın en ağır görselleri, bayt kazancının en çok hissedildiği yerlerdir. Burada AVIF'in ek kodlama süresi kendini öder.
- Keskin kenarlı grafikler ve yazılar: Kayıplı WebP'nin renk alt örneklemesi sorun çıkarıyorsa AVIF'i yüksek kaliteyle dene ya da PNG veya SVG'de kal.
- Yüksek dinamik aralıklı (HDR) içerik: Bu durumda seçenek AVIF'tir; WebP 8 bit ile sınırlıdır.
Kalite ayarı için başlangıç noktası olarak araçlardaki varsayılanlar WebP için 80, AVIF için 60'tır. İki formatın kalite ölçekleri aynı anlama gelmez; bu yüzden AVIF'in varsayılanı daha düşük bir sayıdır. Kendi görsellerinle birkaç deneme yap ve sonuçları İki resmi karşılaştır aracında yan yana incele.
İkisini birlikte kullanmak: picture etiketi
Tek bir format seçmek zorunda değilsin. HTML'deki <picture> öğesi tarayıcıya birkaç seçenek sunar; tarayıcı desteklediği ilk formatı kullanır, hiçbirini desteklemiyorsa sondaki <img> devreye girer. Tipik bir sıralama şöyledir:
<picture>öğesini aç.- İlk kaynak olarak AVIF'i ver:
<source type="image/avif" srcset="kapak.avif"> - İkinci kaynak olarak WebP'yi ver:
<source type="image/webp" srcset="kapak.webp"> - Son olarak herkesin açabileceği JPG'yi ekle:
<img src="kapak.jpg" alt="Görselin açıklaması" width="1200" height="800"> </picture>ile kapat.
Sıralama önemlidir: tarayıcı listeyi yukarıdan aşağı okur ve ilk uygun kaynağı seçer. Bu yüzden en küçük dosyayı veren formatı en üste koyarsın. width ve height değerlerini <img> üzerinde vermek, görsel yüklenirken sayfanın kaymasını önler; bu konuyu web sitesi görsel optimizasyonu rehberinde ayrıntılı anlatıyoruz.
Bu yöntemin tek dezavantajı, her görseli üç ayrı formatta hazırlayıp saklamaktır. Statik bir site için bu genellikle küçük bir iş yüküdür.
Dönüştürme için pratik akış
- Orijinal görseli kullanılacağı boyuta getir. 4000 piksellik bir fotoğrafı 1200 piksellik bir alanda göstermek, format ne olursa olsun israftır.
- WebP'ye dönüştür aracıyla WebP sürümünü oluştur. Bu araçtaki kodlayıcı yalnızca kayıplı çalışır ama şeffaflığı korur.
- AVIF dönüştürücü ile AVIF sürümünü oluştur. Aynı araç AVIF dosyalarını JPG, PNG ya da WebP'ye geri çevirmek için de kullanılabilir.
- Yedek JPG'yi Resim sıkıştır aracından geçir; format aynı kalır, boyut düşer.
- Sonuçları karşılaştır. AVIF beklediğinden büyük çıktıysa ya da görünümde sorun varsa o görsel için WebP ve JPG ile yetin.
Tüm bu işlemler tarayıcında yapılır; görsellerin bir sunucuya yüklenmez. Format ayrıntıları için WebP ve AVIF sayfalarına bakabilirsin.
Sık sorulan sorular
WebP ve AVIF arama motoru sıralamasını etkiler mi?
Formatın kendisinin doğrudan bir sıralama etkeni olduğu bilinmiyor. Ancak daha küçük görseller sayfanın daha hızlı yüklenmesine yardım eder; Google da yükleme hızını içeren sayfa deneyimi ölçümlerini değerlendirdiğini belgelerinde açıklar.
Animasyonlu GIF yerine hangisini kullanmalıyım?
İki format da animasyonu destekler ve GIF'e göre genellikle çok daha küçük dosya üretir. Uzun animasyonlarda kısa, sessiz bir video çoğu zaman daha da verimlidir. Bu sitedeki dönüştürücülerin hareketli dosyalarda yalnızca ilk kareyi kullandığını unutma.
Eski tarayıcılarda AVIF görünmezse ne olur?
<picture> kullandıysan tarayıcı AVIF'i atlar ve WebP'ye ya da JPG'ye geçer; ziyaretçi bir şey fark etmez. Görseli yalnızca <img src="foto.avif"> ile eklediysen desteklemeyen tarayıcıda görsel hiç görünmez; bu yüzden yedeksiz kullanım önerilmez.
