Sitemin tüm görsellerini AVIF'e çevirmeli miyim?

Tümünü çevirip JPG'leri silmek riskli bir yaklaşımdır. Doğru strateji, AVIF sürümlerini üretip JPG'leri yedek olarak korumak ve tarayıcının destekleyebildiğini indirmesini sağlamaktır. Bu şekilde AVIF destekleyen ziyaretçiler hız kazancından yararlanır, desteklemeyenler ise hiçbir şey fark etmeden JPG görür. Ayrıca ileride farklı bir formata geçmeniz gerekirse temiz kaynağınız elinizde kalır.

AVIF'e geçmek sayfa hızımı gerçekten etkiler mi?

Görsel ağırlıklı sayfalarda etkisi somuttur, çünkü sayfa boyutunun büyük kısmını genellikle görseller oluşturur ve daha az veri indirilmesi doğrudan daha kısa yükleme süresi demektir. Etki özellikle yavaş mobil bağlantılarda ve büyük hero görselleri ya da uzun galerileri olan sayfalarda belirgin olur. Buna karşılık sayfanız zaten hafifse veya darboğazınız görseller değil de sunucu yanıt süresi ya da script yüküyse kazanç sınırlı kalır. Değişiklikten önce ve sonra ölçüm yapmak tek güvenilir yöntemdir.

JPG artık eskimiş bir format mı sayılır?

Eskimiş değil, sadece verimsiz. JPG hâlâ dünyadaki en yaygın desteklenen görüntü formatıdır ve bu tek başına onu değerli kılar; hiçbir modern format bu evrenselliğe yaklaşamıyor. Fotoğrafik içerikte makul kalite/boyut dengesi de sunar. AVIF onu verimlilikte açık farkla geçer ama uyumlulukta yanına bile yaklaşamaz. Bu yüzden doğru soru hangisinin daha iyi olduğu değil, ikisini birlikte nasıl kullanacağınızdır.

AVIF üretmek iş akışıma ne kadar yük getirir?

İki tür yük var. Birincisi, her görsel için ikinci bir sürüm üretmek ve saklamak gerekir; bu, depolama ve dosya yönetimi anlamına gelir. İkincisi, AVIF kodlaması hesaplama açısından ağırdır ve büyük bir arşivi dönüştürmek JPG'ye kıyasla belirgin biçimde uzun sürer. Ayrıca sayfalarınızın HTML'ini yedekli sunum yapacak şekilde güncellemeniz gerekir. Küçük bir sitede bu tek seferlik bir çalışmadır; sürekli görsel eklenen büyük bir sitede otomasyon kurmadan sürdürülebilir olmaz.

Web Sitesi Görselleri İçin JPG mi AVIF mi?

Yanlış kurulmuş bir soru

"JPG mi AVIF mi" sorusu, iki formatın birbirinin yerine geçeceğini varsayar. Web bağlamında bu varsayım hatalıdır.

AVIF, verimlilikte JPG'yi açık farkla geçer. JPG ise uyumlulukta AVIF'in ulaşamayacağı bir yerde durur. Profesyonel web geliştirme pratiği bu ikisi arasında seçim yapmaz — ikisini birden sunar ve tarayıcının seçmesine izin verir.

Yine de bu kararı bilinçli vermek için iki formatın ne sunduğunu net görmek gerekiyor. Bu yazıda karşılaştırmayı dürüstçe yapıyoruz.

Verimlilik: AVIF açık ara önde

Aynı görsel kalitede AVIF, JPG'ye kıyasla genellikle belirgin ölçüde daha küçük dosyalar üretir. Yaygın olarak telaffuz edilen kabaca yarı yarıya oranı bir yaklaşıklıktır ve gerçek kazanç görselden görsele önemli ölçüde değişir.

Kazancın büyüklüğü içeriğe bağlıdır. Düz renk alanları, yumuşak gradyanlar ve geniş tek tonlu bölgeler içeren görsellerde fark çok belirgin olur. Yoğun gürültü ve ince rastgele doku içeren fotoğraflarda ise aradaki mesafe daralır.

Web bağlamında bu fark önemsiz değildir. Görseller çoğu sayfada indirilen toplam verinin en büyük kalemidir. Daha az veri, özellikle yavaş mobil bağlantılarda doğrudan daha hızlı bir sayfa demektir.

AVIF ayrıca JPG'nin taşıyamadığı şeyleri taşır: alfa kanalı, 10-12 bit renk derinliği, geniş renk gamı ve HDR. Şeffaflık gerektiren bir öğeyi JPG ile sunamazsınız — PNG'ye geçmek zorunda kalır ve boyutta ağır bir bedel ödersiniz. AVIF bunu tek dosyada halleder.

Uyumluluk: JPG'nin rakibi yok

Güncel ana akım tarayıcılar AVIF'i destekliyor. Bu, siteniz için önemli bir eşiktir ve AVIF'i ciddiye almanın temel gerekçesidir.

Ama tablo bununla bitmiyor:

Eski cihazlar ve işletim sistemleri. Uzun süredir güncelleme almamış telefonlar ve bilgisayarlar dosyayı gösteremez.
Eski tarayıcı sürümleri. Kurumsal ortamlarda ve düşük gelirli pazarlarda güncel olmayan tarayıcı kullanımı gerçek bir olgudur.
Kullanıcının indirdiği dosya. Ziyaretçi görsele sağ tıklayıp kaydettiğinde elinde bir AVIF olur ve bunu masaüstü programında açamayabilir.
Sizin dışınızdaki sistemler. Görselinizi başka bir platforma yükleyen, bir e-postaya ekleyen veya bir dokümana koyan biri sorunla karşılaşabilir.

JPG'de bu sorunların hiçbiri yaşanmaz. Otuz yılı aşkın süredir her yerde çalışıyor ve bu yakın gelecekte değişmeyecek.

Kalite: dönüşüm bir şey kazandırmaz

Sık rastlanan bir yanılgıyı temizleyelim. Mevcut JPG'lerinizi AVIF'e çevirmek görüntüyü iyileştirmez.

JPG'nin sıkıştırma sırasında attığı detay dosyada yoktur; AVIF sadece kalanı daha verimli paketler. Görselde blok artefaktı, bantlaşma veya bulanıklık varsa AVIF'te de olacaktır.

Daha da önemlisi, kalite ayarını çok düşük seçerseniz iki kayıplı sıkıştırma katmanı üst üste biner ve sonuç kaynaktan gözle görülür şekilde kötüleşir. Dönüşümü yaparken makul bir kalite değeri kullanın; AVIF zaten verimli olduğu için orada bile ciddi bir boyut kazancınız olur.

Elinizde JPG'den daha temiz bir kaynak varsa — orijinal fotoğraf, PNG hali, ham dosya — AVIF'i ondan üretmek her zaman daha iyi sonuç verir.

İş yükü: gerçekçi olalım

AVIF'e geçmenin görmezden gelinen maliyeti operasyoneldir.

Her görsel için ikinci bir sürüm üretip saklamanız gerekir. Sayfa şablonlarınızı yedekli sunum yapacak şekilde güncellemeniz gerekir. Yeni eklenen her görsel için bu süreci tekrarlamanız gerekir.

Küçük ve durağan bir sitede bu tek seferlik bir çalışmadır. Sürekli içerik eklenen bir sitede ise otomasyon kurmadan sürdürülemez. İçerik yönetim sisteminiz görsel varyantlarını otomatik üretebiliyorsa iş kolaydır; üretemiyorsa bir süreç tasarlamanız gerekir.

AVIF kodlamasının hesaplama açısından ağır olduğunu da hesaba katın. Büyük bir arşivi dönüştürmek JPG'ye kaydetmeye kıyasla belirgin biçimde uzun sürer.

Profesyonel cevap: ikisi birden

Bu tartışmanın gerçek çözümü seçim yapmamaktır.

HTML'in picture etiketi, aynı görsel için birden fazla kaynak tanımlamanıza izin verir. Tarayıcı listeyi yukarıdan aşağı okur ve destekleyebildiği ilkini indirir. AVIF'i destekleyen bir tarayıcı AVIF'i alır ve hızdan yararlanır; desteklemeyen bir tarayıcı sessizce JPG'ye düşer ve ziyaretçi hiçbir şey fark etmez.

Bu yaklaşımın güzelliği, riski tamamen ortadan kaldırmasıdır. Hiçbir ziyaretçi kırık görsel görmez, destekleyenler ise ödüllendirilir.

Pratik sonuç: AVIF üretin, JPG'leri silmeyin. Orijinaller artık yedek katmanınızdır.

Nerede hangisini kullanmalı?

Somut öneriler:

Hero görselleri, büyük banner'lar, galeriler: AVIF'ten en çok bunlar kazanır, çünkü boyutları büyüktür. Yedekli sunumla verin.
Küçük ikonlar ve basit grafikler: Zaten küçük oldukları için kazanç mütevazıdır; ek iş yükü değmeyebilir. Vektör (SVG) uygunsa çoğu zaman daha iyi bir cevaptır.
Kullanıcının indirmesi beklenen görseller: Ürün kataloğu, basın kiti, indirilebilir fotoğraf. Burada JPG sunun; kullanıcının dosyayı açabilmesi hızdan önemlidir.
Şeffaflık gerektiren öğeler: AVIF burada PNG'ye göre ciddi bir boyut avantajı sunar, ama yedeğin PNG olması gerekir.

Özetle

AVIF verimlilikte kazanıyor, JPG uyumlulukta. Bu iki gerçek çelişmiyor; birbirini tamamlıyor. Görsel ağırlıklı bir sitede AVIF'e geçmek gerçek bir hız kazancı sağlar, ama JPG'yi ortadan kaldırmak yerine yedek olarak konumlandırmak gerekir. Dönüşümün kalite kazandırmadığını, düşük ayarlarda ise kalite kaybettirdiğini unutmayın. Ve iş yükünü hafife almayın — sürdürülemeyecek bir optimizasyon, yapılmamış bir optimizasyondan daha zararlıdır.