- AVIF, AV1 video codec'ini kullanarak JPEG'e göre %50'den fazla daha iyi sıkıştırma sağlar ve Temel Web Performansını önemli ölçüde artırır.
- Tarayıcı desteği artık neredeyse evrensel olsa da, eski yazılımlar ve profesyonel baskı hizmetleri uyumluluk için hala JPG'ye ihtiyaç duymaktadır.
- Resim öğesiyle üçlü yedekleme stratejisi uygulamak, tüm cihazlarda sorunsuz bir kullanıcı deneyimi sağlar.
Dürüst olalım: Web temelde devasa bir resim koleksiyonu ve eğer bu resimler çok ağırsa, kullanıcılarınız "bant genişliği" demeden çok daha hızlı bir şekilde siteden ayrılacaklar. Uzun zamandır WebP'nin son nokta olduğunu düşünüyorduk, ancak AVIF, çevrimiçi görsel varlıkları nasıl ele aldığımız konusunda kuralları tamamen yeniden yazmak için devreye girdi . Bu sadece küçük bir değişiklik değil; eski formatları çevirmeli bağlantı döneminden kalma kalıntılar gibi gösteren, verimlilikte devasa bir sıçramadan bahsediyoruz.
Chrome tarayıcınızın neden aniden resimleri .avif dosyaları olarak kaydetmeye başladığını veya en sevdiğiniz profesyonel araçların neden bunları açmadığını merak ettiyseniz, doğru yerdesiniz. AV1 codec'inin teknik detaylarına ineceğiz , kalite ve dosya boyutu arasında nasıl denge kuracağımızı keşfedeceğiz ve sitenizin eski donanım kullanan kullanıcılar için sorunsuz bir şekilde çalışmasını sağlayacak en iyi yolu bulacağız.
Gizli Sır: AVIF Neden Çığır Açıyor?
AVIF aslında bir görüntü formatı olarak başlamadı; özünde AV1 video kodeğinden elde edilen bir durağan karedir . Açık Medya İttifakı (Google, Netflix ve Amazon gibi devler de dahil) tarafından geliştirilen bu kodek, lisanslı kodekleri ortadan kaldırmak ve bize telifsiz bir şekilde yüksek çözünürlüklü video akışı sağlamak için tasarlandı. Aynı algoritmaları statik fotoğraflara uyguladıklarında, inanılmaz derecede güçlü bir şey elde ettiler: görsel kaliteyi neredeyse aynı tutarken dosya boyutlarını JPEG'e kıyasla %50 veya daha fazla azaltma yeteneği .
AVIF'i WebP veya JPG'den bu kadar üstün kılan nedir? Her şey matematikte gizli. JPEG, katı bir 8x8 blok sistemi kullanırken, AVIF değişken boyutlu DCT dönüşümleri kullanır ; bu da açık mavi bir gökyüzü için büyük bloklar ve detaylı bir yüz için küçük bloklar kullanabileceği anlamına gelir. Ayrıca, Yüksek Dinamik Aralık (HDR) ve Geniş Renk Gamı (WCG) desteği sayesinde , standart bir JPG'de mümkün olmayan renkler ve parlaklık seviyeleri sunar.
Teknik Detaylar: AV1 vs. Dünya
İşin özüne inmek için, İçsel Tahmin modlarına bakmamız gerekiyor . WebP'nin pikselleri tahmin etmenin birkaç yolu varken, AV1 71 farklı yönlü moda sahip . Bu, kodlayıcının görüntüde neler olup bittiği konusunda çok daha hassas olmasını sağlar, bu da daha az "atık" veri depolanması anlamına gelir. Bir diğer şaşırtıcı özellik ise Film Tanecik Sentezi . Düşük ışıklı bir fotoğraftaki her bir gürültü zerresini kodlamaya çalışmak yerine (ki bu genellikle dosya boyutunu şişirir), AVIF sadece taneciğin istatistiksel parametrelerini depolar ve tarayıcıya oynatma sırasında "taklit etmesini" söyler, böylece çok fazla yer tasarrufu sağlar.
Dengeleme: Hız ve Verimlilik
İşte sorun burada: AVIF, oluşturma aşamasında oldukça fazla kaynak tüketiyor. Avifenc gibi bir araç kullanıyorsanız , bir fotoğrafı kodlamanın WebP'ye göre önemli ölçüde daha uzun sürdüğünü fark edeceksiniz. Saniyelerle milisaniyeler arasında bir farktan bahsediyoruz. Çoğu geliştirici için bu bir sorun teşkil etmez çünkü bunu derleme sürecinde bir kez yaparsınız, ancak canlı bir sunucuda anlık olarak görüntü dönüştürmeye çalışıyorsanız , çok agresif bir önbellekleme stratejisine ihtiyacınız olacak, aksi takdirde işlemcinizi aşırı yükleyebilirsiniz.
Pratik Dönüştürme: JPG'den AVIF'e
Resmi olanı kullanırken libavif araçlar, cq-level (Nicelleştirme düzeyi) en önemli ayarınızdır. JPEG'in 0-100 ölçeğinin aksine, AVIF'in cq seviyesi ters orantılıdır.: 0 kayıpsızdır (ve çok büyüktür), 63 ise en düşük kalitedir. Çoğu web projesi için, "En uygun yaş aralığı" genellikle 18 ile 23 arasındadır.Daha düşük değerler boyut açısından azalan getiri sağlarken, daha yüksek değerler ise yakınlaştırdığınızda biraz bulanık görünmeye başlar.
Komut satırına aşina iseniz, bunu bir toplu iş dosyası kullanarak otomatikleştirebilirsiniz. –speed parametresini 6'ya ayarlamak genellikle en iyi dengeyi sağlar; rahatsız edici olmayacak kadar hızlı, ancak dosyaları küçük tutacak kadar verimlidir. Terminalden nefret edenler için, Squoosh veya FormatVault gibi web tabanlı araçlar , hiçbir şey yüklemeden kaliteyi görsel olarak ayarlamanıza ve sonuçları gerçek zamanlı olarak görmenize olanak tanır.
Uyumluluk Açığı: Neden Hala JPG'ye İhtiyacınız Var?
Chrome, Firefox, Safari ve Edge gibi tarayıcıların neredeyse %95'ini desteklemesine rağmen , AVIF her şey için sihirli bir çözüm değil. Sorun tarayıcıda değil; her şeyde. Photoshop CS6 , Windows Fotoğraf Görüntleyici'nin eski sürümleri ve çoğu devlet veya kurumsal yükleme portalı gibi eski yazılımlar AVIF dosyalarını okuyamıyor. Bir .avif dosyasını bir baskı hizmetine veya eski bir CMS'ye yüklemeye çalışırsanız, büyük olasılıkla bir doğrulama hatası verecektir.
Bu nedenle AVIF dosyalarını JPG'ye dönüştürmek hala gerekli bir beceridir. İster Outlook gibi JPG'yi görüntülemeyen bir e-posta istemcisi için olsun, ister PowerPoint sunumu için olsun, JPG görüntülerin evrensel dili olmaya devam ediyor. Özellikle bir klasör dolusu indirilen dosyayı aynı anda işlemeniz gerektiğinde, Total Image Converter gibi araçlar bu iş için harika.
Profesyonel Gibi Görüntü Sunmak: Üçlü Yedekleme
JPG dosyalarınızı AVIF dosyalarıyla değiştirip en iyisini ummak yeterli değil. Bunu profesyonelce yapmanın yolu, şu yöntemi kullanmaktır: <picture> öğe. Listeleyerek Önce AVIF, sonra WebP ve son olarak JPEG.Tarayıcının gerçekten anladığı en iyi formatı seçmesine izin veriyorsunuz. Bu, üç seçeneği olan bir menüye sahip olmak gibidir; tarayıcı ilk beğendiği seçeneği alır.
Tutmak için Temel Web Hayatı Yeşil alanda, her zaman dahil edin. açık genişlik ve yükseklik nitelikleriBu, resimler yüklenirken içeriğinizin yer değiştirmesine neden olan korkulan Kümülatif Yerleşim Kayması'nı (CLS) önler. Ana "kahraman" görseliniz için şunu ekleyin: fetchpriority="high" Tarayıcıya hemen yakalamasını söylemek için, ancak şunu kullanın: loading="lazy" Geri kalan her şey için ilk yükü hafif tutmak.
SEO ve Kullanıcı Deneyimi Üzerindeki Etki
Google, AVIF kullandığınız için size rozet vermez, ancak LCP'ye (En Büyük İçerik Boyama Alanı) takıntılıdır . Dev bir ürün fotoğrafını 400 KB'tan 150 KB'a küçülttüğünüzde, sayfanın "hazır" hale gelmesi için gereken süreyi doğrudan kısaltmış olursunuz. Bu, özellikle her kilobaytın önemli olduğu kesintili mobil bağlantılara sahip kullanıcılar için daha düşük hemen çıkma oranlarına ve daha yüksek dönüşüm oranlarına yol açar.
