Evet: AVIF belirtimi, katmanlı görüntüler aracılığıyla aşamalı çözümlemeyi destekler. Belirli bir dosyanın yüklenirken gözle görülür biçimde incelip incelmeyeceği kodlamasına, çözücüye ve görüntüleyiciye bağlıdır. Sıradan bir AVIF dışa aktarmasının aşamalı JPEG gibi davranacağı varsayılmamalıdır.
AVIF belirtimi, bu biçim yeteneğini teslim hattında test etmeniz gereken davranıştan ayırır.
Aşamalı görüntü çözümleme nedir?
Aşamalı görüntü çözümleme, genel olarak, son görüntü verisinin tamamı alınmadan ve çözülmeden önce görüntünün işe yarar bir temsilini gösterebilmektir.
Anlamlı görsel içerik için dosyanın tamamını beklemek yerine, aşamalı bir görüntü önce daha düşük nitelikte görünebilir ve ek veri geldikçe ayrıntılanabilir.
Klasik örnek aşamalı JPEG'dir. Aşamalı kodlanmış bir JPEG birden fazla tarama içerebilir. Tarayıcı veya görüntüleyici tüm görüntünün erken bir yaklaşımını gösterebilir, sonra yeni taramalar geldikçe bunu inceltebilir.
Bu, görüntünün parçalarının sırayla belirdiği yukarıdan aşağıya yüklemeden farklıdır. İkisi de kullanıcıya 'aşamalı' gelebilir; alttaki kodlama ve çözümleme davranışı ise farklı olabilir.
Aşamalı JPEG nasıl görünür?
Aşamalı JPEG'de kullanıcılar tam görüntünün genel kompozisyonunu görece erken görebilir. İlk görünür temsil bulanık veya eksik olabilir; daha fazla görüntü verisi çözüldükçe ayrıntı belirir.
Bu, son yüksek nitelikli temsil hazır olmadan görsel bilgi geldiği için algılanan yükleme performansını iyileştirebilir.
Aşamalı JPEG ağ bağlantısını illa hızlandırmaz. Kodlanmış görüntü bilgisinin yükleme sırasında nasıl yapılandırılabileceğini ve sunulabileceğini değiştirir.
AVIF, aşamalı JPEG gibi mi çalışır?
Geliştiriciler AVIF'i, aşamalı JPEG'in taramaya dayalı yükleme modelinin birebir karşılığı saymamalıdır. AVIF, AV1 Görüntü Dosyası Biçimine dayanır ve AVIF için tanımlanan HEIF ailesi kap yapısı içinde saklanan AV1 kodlu görüntü verisi kullanır.
İç düzeni ve çözümleme modeli JPEG'den belirgin biçimde farklıdır. Bu yüzden 'aşamalı JPEG aşamalı olduğu için AVIF de aşamalıdır' veya 'her uygulamada her bayt inene kadar AVIF görünemez' gibi ifadeler konuyu aşırı basitleştirir.
Gözlenen sonuç yalnız dosya biçimine değil, görüntünün nasıl kodlandığına, verisinin nasıl düzenlendiğine, çözücü uygulamasına ve tarayıcının veya uygulamanın eldeki çözülmüş çıktıyı nasıl çizmeyi seçtiğine de bağlıdır.
Aşamalı çözümleme ve artımlı çözümleme
Bu iki terim sık karıştırılır.
Aşamalı çözümleme, genellikle, daha fazla kodlanmış bilgi işlendikçe giderek daha yararlı veya daha yüksek nitelikli sürümlerin kullanılabilir olacağı biçimde tasarlanmış bir görüntü temsilini anlatır.
Artımlı çözümleme daha geniş anlamda, çözücünün her işlemden önce dosyanın tamamını istemek yerine veri geldikçe işlemesidir.
Bir görüntü çözücüsü, kullanıcının aşamalı JPEG ile özdeşleştirdiği görsel deneyimi vermeden artımlı çalışabilir. Dolayısıyla bir çözücünün kısmi veriyi tüketebilmesi, görüntünün belirli bir tarayıcıda indirilirken nasıl görüneceğini kendiliğinden söylemez.
Aşamalı çizim ayrı bir kavramdır
Çizim başka bir katman ekler. Bir çözücü, tarayıcı o bilgiyi ekrana boyamaya karar vermeden önce bir miktar bilgi üretebilir.
Tam yol birkaç bileşen içerir: sunucu görüntü baytlarını gönderir, tarayıcı onları alır, görüntü çözücüsü eldeki kodlanmış veriyi yorumlar, çözülmüş pikseller veya ara temsiller kullanılabilir olur ve tarayıcı görüntüyü ne zaman ve nasıl çizeceğine karar verir.
Bu aşamalar ayrı olduğu için biçim belirtimleri tek başına her kullanıcının gördüğü yükleme deneyimini tümüyle belirlemez.
AVIF'te aşamalı yükleme neden karmaşıktır?
AVIF, klasik JPEG'den belirgin biçimde daha karmaşık teknolojilerden yetenek ve yapı kavramları devralır. AV1, öncelikle sıkıştırma verimi ve modern medya gereksinimleri için tasarlanmış gelişmiş kodlama araçlarını destekler.
AVIF, kodlanmış görüntü bilgisini ISO Base Media File Format'tan türetilmiş bir yapıyla paketler. Sonuç olarak bir AVIF dosyası, birçok geliştiricinin aşamalı JPEG için kurduğu zihinsel modele benzeyen, bağımsız gösterilebilir nitelik geçişlerinin basit bir dizisi değildir.
'Aşamalı AVIF' tartışmalarının kesin terim kullanmasının bir nedeni budur. Modern görüntü verisini yapılandırmak, katmanlamak veya artımlı işlemek için teknikler olabilir; bu teknikler aşamalı JPEG taramalarıyla özdeş değildir.
Katmanlı AVIF nedir?
AVIF, belirtimi ve alttaki kap ekosisteminin tanımladığı düzeneklerle katmanlı görüntü yapıları temsil edebilir. Katmanlama, görüntü bilgisini iyileştirme bilgisinin bir temel temsille ilişkili olacağı biçimde düzenlemeye izin verebilir.
Bu kavram yüksek düzeyde aşamalı teslime benzeyebilir: bir temsil için yeterli bilgiyle başlayıp ek bilgiyle onu iyileştirmek. Ancak tüm ekosistemdeki destek önemlidir.
Bir kodlama özelliğinin teknik olarak temsil edilebilir olması, her tarayıcının, çözücünün, CDN'in, görüntü işleme hizmetinin ve optimizasyon hattının bunu tanıdık bir aşamalı yükleme deneyimi olarak sunacağı anlamına gelmez.
Tarayıcı desteği neden önemlidir?
Web siteleri için görüntü biçimleri konuşulurken belirtim desteği kararın yalnız bir parçasıdır. Ziyaretçinin gerçekten yaşadığını tarayıcı uygulamaları belirler.
Bir tarayıcının AVIF dosyasını tanıması, AV1 görüntü verisini çözmesi, ilgili AVIF özelliklerini ele alması ve sonucu çizim hattına katması gerekir. Farklı tarayıcı motorları ve çözücü kütüphaneleri farklı uygulama seçimleri yapabilir.
Web geliştiricilerinin AVIF davranışını yalnız kuramsal biçim yeteneklerine dayanmak yerine kendi tarayıcı destek matrislerinde test etmesinin nedeni budur.
Bir AVIF görüntüsü görünmeden önce tümüyle inmeli midir?
Her AVIF dosyasının her uygulamada son bayt gelene kadar tümüyle görünmez kalması gerektiğini söyleyen yararlı evrensel bir kural yoktur. Aynı zamanda geliştiriciler, sıradan bir AVIF'in aşamalı JPEG'in tanıdık çok geçişli görsel incelmesini kendiliğinden sağladığını varsaymamalıdır.
Ağ akışı, artımlı ayrıştırma, çözümleme davranışı, dosya düzeni ve çizim kararları bir şeyin ne zaman görünür olacağını etkileyebilir.
Performans planı için daha güvenli yol, aşamalı çizim varsayımları üzerine arayüz kurmak yerine temsili AVIF dosyalarıyla gerçek tarayıcı davranışını ölçmektir.
AVIF ve aşamalı JPEG
| Özellik | AVIF | Aşamalı JPEG |
|---|---|---|
| Sıkıştırma teknolojisi | AV1 tabanlı görüntü kodlama | JPEG/DCT tabanlı kodlama |
| Klasik aşamalı taramalar | Aşamalı JPEG modeli ile aynı değil | Evet |
| Erken tam görüntü yaklaşımı | Kodlamaya ve uygulamaya bağlı | Aşamalı kodlamanın temel kullanımı |
| Saydamlık | Desteklenir | Standart JPEG alfa saydamlığını desteklemez |
| Modern web sıkıştırması | Modern kodlama teknolojisi çevresinde tasarlandı | Daha eski ama son derece yerleşik biçim |
| Uygulama karmaşıklığı | Görece karmaşık | Olgun ve yaygın uygulanmış |
AVIF ve WebP yükleme davranışı
WebP, AVIF ile sık karşılaştırılan başka bir modern biçimdir. İkisi de kayıplı ve kayıpsız sıkıştırma sağlayabilir ve saydamlığı destekleyebilir; farklı sıkıştırma teknolojileri ve kap yapıları kullanırlar.
Hiçbiri yalnız aşamalı JPEG gibi davranıp davranmadığına bakılarak değerlendirilmemelidir. Modern sitelerde kodlanmış boyut, çözme maliyeti, görsel nitelik, tarayıcı desteği ve çizime etki gibi gerçek ölçüler genellikle daha yararlıdır.
Algılanan yükleme önemliyse gerçek görüntü varyantlarını kısıtlı ağ ve CPU koşullarında test edin. Kuramsal olarak daha küçük bir görüntü, başka işlem maliyetleri veya teslim kararları baskınsa kendiliğinden daha iyi bir deneyim üretmez.
Aşamalı çözümleme SEO için önemli midir?
Arama motorları bir görüntüyü sırf aşamalı çözümleme kullandığı için sıralamaz. SEO ilgisi dolaylıdır ve öncelikle sayfa performansı ile kullanıcı deneyimine bağlıdır.
Görüntüler yükleme ölçümlerini etkileyebilir çünkü aktarılan sayfa verisinin önemli bir bölümünü oluştururlar ve sayfanın Largest Contentful Paint adayı olabilirler.
Verimli bir biçim seçmek bu yüzden performans optimizasyonuna katkıda bulunabilir; görüntü biçimi yalnız bir değişkendir. Görüntü boyutları, duyarlı görüntü seçimi, önbellek, CDN davranışı, ön yükleme kararları, tembel yükleme ve sunucu yanıt süreleri de önemli olabilir.
AVIF ve Largest Contentful Paint
Büyük bir kahraman görüntü sayfanın Largest Contentful Paint öğesiyse, aktarım boyutunu küçültmek onun daha erken hazır olmasına yardım edebilir. AVIF sıkıştırma yetenekleri nedeniyle yararlı olabilir; agresif sıkıştırma kendiliğinden en iyi çözüm değildir.
Birçok üretim iş akışında kodlama süresi teslimden önce oluşur; çözme ise kullanıcının aygıtında olur. Geliştiriciler hem ağ tasarrufunu hem gerçekçi aygıtlardaki çözme davranışını değerlendirmelidir.
Doğru optimizasyon, yerel bir karşılaştırmada en küçük dosyayı üretmek değil, ölçülen sayfa deneyimini iyileştirendir.
AVIF görüntüleri tembel yüklenmeli mi?
Bir görüntünün tembel yüklenip yüklenmeyeceği öncelikle nerede göründüğüne bağlıdır, AVIF olup olmadığına değil.
İlk görüntü alanının altındaki görüntüler çoğu zaman loading="lazy" ile yerel tarayıcı tembel yüklemesine aday olabilir. İlk görüntü alanı için kritik görüntüler, özellikle olası LCP görüntüleri, keşiflerinin veya yüklenmelerinin bilerek geciktirilmesi performansı düşürebileceği için genellikle farklı işlem ister.
AVIF dosyaları yüksek sıkıştırılabildiği için her AVIF görüntüsüne ayrım gözetmeden tembel yükleme uygulamayın.
AVIF, HTML picture öğesiyle kullanılabilir mi?
Evet. HTML <picture> öğesi birden fazla görüntü kaynağı sunabilir; yazarlar alternatif kaynaklar belirtebilir.
Basitleştirilmiş bir yapı bir AVIF kaynağı, başka bir modern biçim ve alışılmış bir yedek görüntü sunabilir. Tarayıcı, kaynak tanımlarına ve desteklediği yeteneklere göre uygun kaynağı seçebilir.
Bu strateji, bir sitenin modern görüntü biçimlerinden yararlanırken bilinçli bir yedek yol tutması için yararlı olabilir.
AVIF ve duyarlı görüntüler
Biçim optimizasyonu doğru görüntü boyutuyla birleştirilmelidir. Yalnız 600 piksel genişlik gereken bir aygıta 3000 piksel genişliğinde AVIF göndermek, kodeğin verimine rağmen bant genişliği harcar.
srcset ve sizes gibi HTML özellikleri, tarayıcıların uygun boyutta bir kaynak seçmesine yardım edebilir. Duyarlı görüntü teslimi bu yüzden AVIF, WebP, PNG ve JPEG arasındaki seçim kadar önemli olabilir.
Daha küçük bir AVIF her zaman daha mı hızlıdır?
Hayır. Dosya boyutu ağ aktarımı için çok önemlidir ama görüntü performansının tek bileşeni değildir.
Bir görüntünün indirilmesi, ayrıştırılması, çözülmesi ve çizilmesi gerekir. Aygıt işlem gücü, tarayıcı uygulaması, görüntü boyutları ve bellek gereksinimleri toplam deneyimi etkileyebilir.
Bu nedenle daha küçük bir AVIF, ölçüm olmadan her daha büyük alternatiften daha hızlı ilan edilmemelidir. En yararlı karşılaştırma gerçek sayfa davranışını ölçer.
Geliştiriciler AVIF yüklemesini nasıl test etmeli?
Sentetik test grafiklerinden değil, gerçek sitedeki temsili görüntülerden başlayın. Aynı kaynak görüntüyü gerçekten düşündüğünüz biçimlere ve nitelik düzeylerine kodlayın.
Sonra kısıtlı koşullarda test edin. Hızlı masaüstü donanımı ve yüksek hızlı bağlantı, daha yavaş mobil aygıtlarda veya ağlarda belirginleşen farkları gizleyebilir.
Aktarım boyutunu, görüntü niteliğini, çözme davranışını ve sayfa düzeyindeki performansı inceleyin. Tarayıcı geliştirici araçları ve performans çözümleme araçları, görüntü isteklerinin ne zaman başladığını, ne zaman bittiğini ve çizimi nasıl etkilediğini görmeye yardım edebilir.
Hızlı bir site için aşamalı AVIF gerekir mi?
Hayır. Bir sitenin güçlü görüntü performansı için aşamalı AVIF çözümlemesine ihtiyacı yoktur.
Seçilen görüntü aşamalı görsel inceltme sunsun sunmasın, birkaç optimizasyon tekniği kullanıcı deneyimini iyileştirebilir. Doğru boyutta görüntüler sunun, gereksiz büyük boyutlardan kaçının, uygun sıkıştırma ayarları seçin, statik varlıkları etkili önbelleğe alın ve ilk görüntü alanı için önemli görüntülere öncelik verin.
Kritik olmayan görsellerde tembel yükleme, kaynakların daha önemli ilk içerikle yarışmasını önleyebilir.
Aşamalı görüntü yüklemeye alternatifler
Tasarım amacı büyük bir görüntü yüklenirken boş alan bırakmamaksa, aşamalı kodlama olası çözümlerden yalnız biridir.
Web uygulamaları son görüntü yüklenirken bazen hafif yer tutucular, baskın renk arka planları, bulanık önizlemeler, iskelet yerleşimler veya başka teknikler kullanır. Bu teknikler görüntü kodeğine tümüyle bağlı olmak yerine uygulama veya sayfa tasarımı düzeyinde çalışır.
Bir yer tutucu stratejisi, son biçim aşamalı JPEG gibi davranmasa bile öngörülebilir bir algılanan yükleme davranışı sağlayabilir.
Bulanık görüntü yer tutucuları ve AVIF
Yaygın bir yaklaşım, son görüntüden ayrı çok küçük bir önizleme üretmektir. Önizleme hemen gösterilebilir ve tam çözünürlüklü varlık hazır olunca değiştirilebilir.
Bu, iki ayrı temsil söz konusu olabileceği için kavram olarak aşamalı çözümlemeden farklıdır. Yine de kullanıcının açısından benzer bir amacı gerçekleştirebilir: son görüntü hazır olmadan anlamlı görsel bilgi görünür.
Bedeli ek uygulama karmaşıklığı ve potansiyel olarak başka bir kaynak veya gömülü veri temsilidir.
Aşamalı JPEG'ler AVIF'e çevrilmeli mi?
Görüntüleri sırf AVIF daha yeni diye dönüştürmeyin. Aşamalı JPEG'in neden var olduğundan başlayın.
Amaç kabul edilebilir görsel niteliği korurken aktarılan baytları küçültmekse bir AVIF adayı oluşturun ve onu mevcut JPEG ile gerçekçi koşullarda karşılaştırın. Aşamalı görsel yükleme etkisinin kendisi kullanıcı deneyiminin önemli bir parçasıysa, AVIF teslim stratejisinin kabul edilebilir bir karşılık verip vermediğini test edin.
Özgün yüksek nitelikli kaynak görüntüyü saklamak, zaten sıkıştırılmış teslim dosyalarını biçimler arasında tekrar tekrar dönüştürmekten iyidir.
AVIF, WebP veya JPEG: hangisini kullanmalısınız?
Yanıt görüntüye ve siteye bağlıdır. Sıkıştırma verimi öncelikliyse AVIF iyi bir aday olabilir. WebP, web görüntü hatlarında yaygın kullanılan başka bir modern seçenektir. JPEG fotoğraf içeriği için geçerli kalır ve son derece olgun bir ekosistemden yararlanır.
Bir üretim sitesinin küresel olarak tek biçim seçmesi gerekmez. Görüntü hatları birden fazla varyant üretebilir ve teslim katmanının veya tarayıcının uygun kaynağı seçmesine izin verebilir.
Peki PNG?
PNG de aşamalı gösterimi destekleyebilen Adam7 interlacing tanımlar. Dosyanın interlacing ile kodlanması ve görüntüleyicinin bu davranışı sunması gerekir; bkz. PNG interlacing belirtimi.
PNG biraz farklı bir rol üstlenir. Kayıpsız sıkıştırma kullanır ve kesin piksel bilgisi, keskin kenarlar veya saydamlığın önemli olduğu grafiklerde özellikle yararlıdır.
AVIF de kayıpsız çalışma ve saydamlığı destekleyebilir; her PNG'yi AVIF ile değiştirmek kendiliğinden yararlı değildir. Basit grafikler PNG olarak zaten verimli sıkışabilir; iş akışı veya uyumluluk kaygıları küçük aktarım tasarruflarından ağır basabilir.
Biçimleri, yeniyi daha iyiyle eşanlamlı saymak yerine gerçek içeriğe göre seçin.
AVIF aşamalı çözümleme hakkında yaygın yanlışlar
Yanlış: AVIF yalnızca daha iyi bir aşamalı JPEG'dir. AVIF temelden farklı bir görüntü kodlama teknolojisi kullanır ve JPEG'in aşamalı tarama düzeneğinin daha yeni bir sürümü olarak anlaşılmamalıdır.
Yanlış: Daha küçük dosya boyutu daha hızlı çizimi garanti eder. Ağ aktarımı görüntü tesliminin yalnız bir aşamasıdır. Çözme ve çizim de kaynak tüketir.
Yanlış: İyi Core Web Vitals için aşamalı çözümleme gerekir. Web performansı tam yükleme ve çizim sürecine bağlıdır. Doğru boyut, önceliklendirme ve teslim, aşamalı görsel inceltmeden daha önemli olabilir.
Yanlış: Her tarayıcı bir AVIF'i indirilirken özdeş göstermelidir. Tarayıcı ve çözücü uygulamaları gözlenen yükleme davranışını etkiler.
Web'de AVIF için pratik öneriler
Üretim için AVIF düşünüyorsanız önce ölçülebilir sonuçlara odaklanın. Yüksek nitelikli kaynak varlıklardan AVIF sürümleri üretin, onları uygun WebP, JPEG veya PNG alternatifleriyle karşılaştırın ve hem görsel niteliği hem dosya boyutunu inceleyin.
Yerleşime ve aygıta uygun boyutlar sunun. Birden fazla çözünürlük gerektiğinde duyarlı görüntü düzeneklerini kullanın. Performans sonuçlarını düşünmeden katın üstündeki kritik görselleri tembel yüklemeyin.
Önemli kahraman görüntülerde Largest Contentful Paint etkisini ölçün. Katın altındaki görsellerde tembel yüklemeyi değerlendirin. Aşamalı görünen bir görsel deneyim isteniyorsa, görüntü biçiminin bunu kendiliğinden sağlayacağını varsaymak yerine açık yer tutucuları düşünün.
AVIF pratikte aşamalı çözümlemeyi destekliyor mu?
Biçim bunu katmanlı görüntüler aracılığıyla destekler. Ziyaretçilerin aşamalı inceltme görüp görmeyeceğini bilmek için aynı dışa aktarmayı hedef tarayıcı ve aygıtlarda kısıtlı bir bağlantıyla test edin. Bunu .avif uzantısından çıkarmayın.
Daha geniş dışa aktarma kararı için WebP ve AVIF karşılaştırmamıza bakın.
