Web siteleri için AVIF görüntü formatı, SEO, Sayfa Hızı ve Kullanıcı Deneyimini artırır.

%0,1'inden azı, AVIF formatını kullanmakta ve resim formatları için en iyi seçenek olan AVIF ile web sitesi hızının, kullanıcı deneyiminin ve Google'daki online görünürlüğünü artırabilecek ölçülebilir bir gelişme fırsatını kullanmaktadır. Diğer tüm web site sahipleri, resim formatı olarak sunulan AVIF'in sunabileceği potansiyeli henüz kullanmamaktadır. Bu makale bu duruma çözüm getirmeyi ve sizi AVIF formatı hakkında ciddi bir şekilde bilgilendirmeyi ve ideal olarak web sitenizdeki görüntülerde de kullanmanızı teşvik etmeyi amaçlamaktadır.

Websitesi performansınızın nasıl olduğunu görmek için Google PageSpeed Insights'te internet sitesi URL'nizi test ettiniz mi? Eğer yapmadıysanız, hemen kendi internet sitenizle birlikte test edin.

Tahminimce, internet sitenizin şu anda bu değeri göstermediği doğru mu?

Değeriniz ne kadar düşükse, PageSpeed'inizi iyileştirmek için web sitesinde daha fazla optimizasyon gerekmektedir. Eğer Test Aracı sayfanın daha aşağısına doğru ilerler ve Google'ın PageSpeed'inizi geliştirmek için önerilerini görmek isterseniz, muhtemelen hala resimleriniz için JPG veya PNG dosya formatlarını kullanıyorsanız, modern resim formatlarının da yer aldığı bir öneri olabilir.

Bu, internet sitenizle henüz PageSpeed Insights'ta en üstün performansı sağlayamıyorsunuz ve muhtemelen Core Web Vitals testini de geçemiyorsunuz.

Hem ajans web sitemiz 4eck-media.de'deki hem de buradaki TutKit.com'daki görüntüler, AVIF dosya formatında yükleniyor - son derece hızlı, son derece küçük ve ikna edici bir kalitede. AVIF, bize en yüksek PageSpeed'i elde etmemize yardımcı oluyor.

Web görüntüler için oldukça yeni olan bu dosya formatı hakkında hemen tanıtmamız gereken birçok neden var, çünkü AVIF, SEO, PageSpeed ve Kullanıcı Deneyimi açısından tüm avantajlarını sunarak web siteleri için modern bir resim formatı olarak tanıtılmalıdır.

AVIF Makalesi İçindekiler:

AVIF-Bildformatı Nedir?

AVIF, 2020 yılında Alliance for Open Media (AOMedia) tarafından yayınlanan yeni bir resim formatıdır. Bu format, AV1 kayıpsız sıkıştırma algoritması temel alınarak oluşturulmuş olup JPEG ve PNG gibi yaygın resim formatlarıyla ve WebP web formatıyla karşılaştırıldığında birçok avantaja sahiptir.

AVIF resimleri, aynı resim kalitesinde JPEG resimlere kıyasla önemli ölçüde daha küçüktür. Bu, AV1'in daha etkili bir sıkıştırma sunmasından kaynaklanmaktadır. Dolayısıyla, aynı kalitede bir JPEG resme kıyasla bir AVIF resmi genellikle %50 daha küçüktür.

AVIF resimler, JPEG resimlerden daha yüksek bir renk derinliği sunar. Böylece, JPEG resimler 8 bit renk derinliğini desteklerken, AVIF resimler 12 bit renk derinliğini destekleyebilir. Bu durum, AVIF resimlerinde daha geniş bir renk yelpazesi ve daha gerçekçi renkler elde edilmesini sağlar.

Ayrıca, AVIF resimlerin Alfa kanallarını depolama yeteneğine sahiptir. Alfa kanalları, resimlerin şeffaflığını tanımlamak için kullanılır. Bu durum, resimlerin şeffaflık gerektiren grafik uygulamalarında kullanılması için AVIF resimlerini ideal hale getirir.

AVIF, açık kaynak bir formattır ve birçok yazılım ve donanım sağlayıcısı tarafından desteklenmektedir. En yaygın görülen görüntü düzenleme programları ve tarayıcılar zaten AVIF resimleri desteklemektedir. İşte tam da bu yüzden, bu modern resim formatının yaygınlaşması zamanı gelmiştir!

AVIF'in diğer yaygın resim formatlarına karşı avantajlarından bazıları şunlardır:

• Daha iyi sıkıştırma oranları: AVIF resimler, aynı kalitede JPEG ve PNG resimlere kıyasla önemli ölçüde daha küçüktür.
• Daha yüksek renk derinliği: AVIF resimler, JPEG ve PNG resimlerin desteklediği 8 bit renk derinliğine kıyasla 12 bit renk derinliğini destekler.
• Alfa kanallarını destekleme: AVIF resimler şeffaflığı depolayabilir, bu nedenle hala PNG veya WebP resimlerin web sitelerinde neden tercih edildiğini değiştirir.
• Açık kaynak formatı: AVIF, açık kaynak bir formattır ve birçok yazılım ve donanım sağlayıcısı tarafından desteklenmektedir.
• Diğer yaygın formatlara (WEBP dahil) kıyasla çok sayıda avantaj sunan web siteleri için etkileyici bir resim formatıdır.

Gelecekte, AVIF'in resimlerin depolanması ve görüntülenmesinde git gide daha büyük bir rol oynayacağı öngörülmektedir - özellikle Google'ın PageSpeed Insights sonuçlarında doğrudan önerilerde AVIF kullanımını yerleştirdiği ve artık tüm yaygın tarayıcıların daha yeni sürümlerinde AVIF'i desteklediği için. Dolayısıyla hem SEO, PageSpeed hem de Kullanıcı Deneyimi için avantajları şimdiden elde etmek için kendi web sitenize erken entegrasyon yapmanın faydalı olacağını unutmayın.

AVIF'in SEO, PageSpeed ve Kullanıcı Deneyimi İçin Faydaları Nelerdir?

En büyük avantaj en belirgin şekilde, görüntüleri birbirleriyle karşılaştırdığımızda ortaya çıkar. Örnek olarak, PNG formatında 1024x1024 çözünürlüğünde Midjourney'den bir grup palyaço balığı resmi kullandım.

• Orjinal-PNG: 1,43 MB
• TinyPNG ile optimize edildi: 393 KB - %73 tasarruf

Orjinal PNG dosyasını Squoosh.app üzerinden dönüştürdüm ve şu sonucu elde ettim:

• Squoosh ile optimize edilmiş WebP olarak: 84 kb - %94 tasarruf
• Squoosh ile optimize edilmiş AVIF olarak: 42 kb - %97 tasarruf

Sonuç olarak, AVIF görüntüsü aynı görsel kalitesine sahipken WebP görüntüsünden yarı yarıya daha küçüktür. Diğer birçok testte ortaya çıkan şey, JPG dosyalarında sıkıştırma seviyesi çok yüksek olduğunda sıkıştırma artefaktlarının ancak kalite 30'un altında 20 veya daha düşük noktalara geldiğinde hafifçe görünür hale geldiğidir. Kalite 30'da bile metin bileşenleri piksel tablolarda hala güzel ve net kalırken sıkıştırma artefaktları oluşmaz.

Bu tür tasarruflar, görüntü ağırlıklı web sitelerinde ne kadar önemli olduğunu vurgulamak istenmiştir.

AVIF ile daha iyi SEO değerleri, PageSpeed ve Kullanıcı Deneyimi

Google, 2021 yılında web sitesi sıralaması için web sitelerinin temel canlı performans verilerini (Core Web Vitals) önemli hale getirdi. Bu performans verileri arasında, kullanıcı için ana içeriğin ne kadar hızlı yüklendiği olan yükleme hızı da bulunmaktadır. Google, web sitesi sahiplerinin kullanıcıları için hedeflemesi gereken iyi bir değeri 2,5 saniyeye kadar belirtmiştir.

Büyük görüntü verileri daha uzun yükleme sürelerine neden olur. Büyük görüntü verileri, Core Web Vitals testlerinden başarısız olarak kabul edilir.

Ayrıca başka bir sorun daha var. Örneğin PNG veya JPEG gibi büyük görüntü verileri web sitesine yerleştirildiğinde, metin içeriğinin yüklenmiş olabileceği, ancak bir görüntünün daha yavaş bir şekilde yüklenebileceği durumlar ortaya çıkabilir. Sonuç olarak, bu durumlar kümülatif yer değişikliklerine yol açabilir, yani bir görüntünün yerleştirilmesiyle alt bölümler aşağı doğru itilir ve siteyi bozar. Google bu tür kümülatif yer değişikliklerden hoşlanmaz ve bunları CLS hataları olarak kabul eder, bu da Core Web Vitals'ın geçilemediği anlamına gelir.

Ayrıca, her ziyaretçinin, içeriklere hemen ulaşıldığında ve sayfaların hızlı bir şekilde yüklendiğinde harika hissedeceğini unutmayalım. Ayrıca, sıkıştırmayı o kadar ileri gitmeden web sitesinde daha iyi kalitede görüntüler yerleştirebilirsiniz, böylece sıkıştırma artefaktları görünmeye başlamaz. Dosya boyutu, kayıpsız dönüştürme veya normal sıkıştırmayla karşılaştırıldığında bile güzelce küçük kalır. AVIF formatı, birden çok açıdan her kullanıcı için Kullanıcı Deneyimi'ni artırır. Google, Core Web Vitals'ın geçilmesini zorlayarak, ziyaretçilerimize sitemizi ziyaret ettiklerinde hayal kırıklığına uğramamaları için bir şeyler yapmamızı istemektedir.

Böylece, web sitesi deneyimi, PageSpeed ve teknik kalitenin iyileştirilmesine yardımcı olabileceğiniz, tüm bunların da online görünürlüğünüze olumlu yönde etki edeceğini görebilirsiniz.

AVIF Görüntülerin Tarayıcı Desteği

Teknolojilere ilişkin yeni gelişmeler söz konusu olduğunda, her web sitesi sahibi biraz tereddütlü olabilir ve genellikle birkaç ay beklemeyi tercih eder. Bir yandan mağaza sistemlerinden veya CMS gibi büyük sürümlerden bir beta testçisi olmamak istenirken, diğer yandan belirli tarayıcılar veya cihazlarla sorun olup olmayacağı tam olarak bilinmez.

AVIF Görüntü Formatı'nda, asıl belirleyici olan popüler tarayıcıların artık bu formata destek verip vermediğidir. caniuse.com web sitesi size bunun hakkında bilgi verebilir: https://caniuse.com/avif

Global tarayıcı kullanımının yaklaşık %85'i AVIF'i zaten destekliyor. Almanya'da ise 2 Eylül'de %80,33 oranında destekleniyordu… ne de olsa Almanya, hala cep telefonu ağlarında boşlukların olduğu ve bazı bölgelerin hala yavaş internetle başa çıkmak zorunda olduğu bir ülkedir (benim da yaşadığım bölge: Ofisimde Gigabit hızında dolaşırken, Ev Ofisimde sadece 9 Mbit/sn alıyorum).

Gördüğünüz gibi, AVIF'in önemli tarayıcılarda bir süredir desteklendiğini görebilirsiniz.

Web Sitelerinde AVIF Formatını Kaç Site Kullanıyor?

caniuse.com gibi w3tech.com da belirli teknolojilerin kullanımı hakkında istatistiksel bilgiler sunar. Web sitelerinde kullanılan görüntü formatları hakkında da bilgi verir.

Bütün web sitelerinin yüzde kaçının (Eylül 2023 itibarıyla) kullandığına bir göz atalım: 

• PNG: %82,1
• JPEG: %78
• SVG: %55,2
• GIF: %21,7
• WebP: %9,2
• ICO ve BMP: sırasıyla %0,2
• AVIF: %0,1 (yaklaşık)

Dolayısıyla şu anda tüm web sitelerinin %0,07'sinden azı AVIF formatını kullanıyor. Ne? Bu gerçekten çok az. Ama hey, modern görüntü formatlarının kullanımında teknolojik öncü olma şansı senin için var. Sağdaki grafikte bir eğilimin olduğu apaçık ortada, kullanım aydan aya artıyor… henüz binde yedide. Bu muhtemelen yakında hızlanacak demektir.

Google'ın modern web formatları için önerilerine uymayan web sitelerinin %10'dan azında olduğu ilginç. Diğerleri çoğunlukla PageSpeed ve Kullanıcı Deneyimi'nde taviz veriyor ve muhtemelen Core Web Vitals'ı da karşılıyorlar, bu da online görünürlüğe olumsuz etki eden bir sıralama faktörü olarak karşımıza çıkıyor.

AVIF vs. WebP - Web siteniz için hangisi daha iyi?

Görselleştirmek için doğrudan bir test daha yapalım. Tutkit.com'un Head bölgesinden sağdaki resim AVIF olarak PNG dosyası olarak dönüştürülmeden önce şeffaflıklardan dolayı 600 KB'dan fazla bir dosya boyutuna sahipti.

Şu anda sistem tarafından 159 KB WebP dosyası olarak sunulmaktadır (yedek çözümümüz!). Bu şimdi TINYPNG gibi bir araçla optimize edilse bile, 128 KB olarak kalır. En azından %20 oranında küçültülmüş olur.

WebP dosyasının aksine, standart olarak kullanılan AVIF dosyası, resmin sadece 94 KB olduğunu gösterir, yani yedek WebP dosyasının boyutunun sadece %59'u. Tüm testlerde, aynı optik kalite altında dosya boyutu açısından AVIF'in WebP formatını geride bırakabildiği görülmüştür.

WebP yerine niçin AVIF tercih edilmelidir?

• AVIF şeffaflıkları koruyabilir ve daha yüksek sıkıştırma oranları ve daha düşük dosya boyutlarıyla bile daha iyi bir görüntü kalitesi sunabilir.
• AVIF için mevcut destek oranı, tüm yaygın tarayıcılarda yaklaşık %85'tir. Bu oranın artma eğiliminde olduğu görülmektedir.
• Web sayfanız, WebP'ye kıyasla AVIF sayesinde daha hızlı yüklenir. Özellikle kategori sayfaları gibi çok sayıda ürün resminin yer aldığı görsel ağır web siteleri ve yüksek kalitede görüntülenmesi gereken web siteleri (portföy web siteleri, referanslar vb.) için bu bir avantajdır. Yüksek optik kaliteyi düşük dosya boyutuyla sağlarsınız.

Caniuse.com'un doğrudan WebP sayfasında yazdığı şekilde çok açık bir işaret: „AVIF ve JPEG XL, WebP'nin yerini almak üzere tasarlanmıştır.“ AVIF ve JPEG XL'nin WebP'nin yerine geçeceği söyleniyor.

AVIF ile yanlış bir tercih mi yapacağınızı düşünmeden önce, JPEG XL'nin de yarışa katıldığını söyleyeyim. Ancak, JPEG XL'nin tarayıcı uyumluluğu %0,08 olarak neredeyse var olmayan bir durumda.

Squoosh'ta zaten JPEG XL fotoğrafları dönüştürebilir ve "sadece" WebP ile benzer değerlere sahiptir (aşağıdaki görsele bakınız). 

AVIF, format şampiyonu olarak kalıyor. Hemen buna yönel ve web siteleriniz için tüm avantajları kullanın!

Squoosh.app - JPG, PNG, WebP'yi AVIF'e dönüştürmek için en iyi araç

Eski zamanlarda takım olarak JPG, PNG veya WebP dosyalarını web sitelerinde kullanmak üzere optimize etmek için çevrimiçi araç olarak TinyJPG veya TinyPNG kullandık. Ancak şimdi Google'ın Squoosh'u büyük bir hayranıyım. 

Squoosh, Google tarafından geliştirilmiş ücretsiz bir resim dönüştürücüdür. Bu araç çevrimiçi bir hizmet olarak çalışır, ancak aynı zamanda yerel olarak bilgisayarınızda veya sunucunuzda (node.js!) da kullanılabilir. JPEG, PNG, GIF ve WebP gibi farklı formatlardaki resimleri dönüştürebilir. Ve en iyisi: Resimlerinizi AVIF formatına da dönüştürebilir.

Resim dönüştürücü Squoosh, kaliteyi bozmadan resim boyutunu azaltmak için çeşitli teknikler kullanır. Bunlar renk bilgilerinin sıkıştırılması, çözünürlüğün düşürülmesi ve gereksiz verilerin kaldırılmasını içerir.

Tek yapmanız gereken resmi sürüklemek ve istediğiniz formatı ayarlamak. Birkaç tıklama ve resminiz dönüştürülüp optimize edilmiş olacak.

WebP resmi eklediğinizde ve bu resmi AVIF (solda) ve JPEG XL (sağda) olarak dönüştürüp sıkıştırdığınızda nasıl göründüğünü gösteren görüntü. Kaydırmalı düğme ile hangi kalite seviyesinin doğru olduğunu görebilir, görünür kaliteyi korumanın en iyi yolu budur. Standart ayarlarda, bir sayfa daima karşılaştırma dosyası olacaktır. Sonuç üzerinde tam kontrol size verilmiş olacak.

Squoosh'u içerik bakımınız ve web geliştirmeniz için kullanarak, WebP veya AVIF gibi modern web formatları sayesinde resim boyutlarınızı küçültebilir ve sitelerinizin yükleme sürelerini iyileştirebilirsiniz. TinyJPG'de olduğu gibi JPG dosyalarınızın boyutunu azaltabilir ve sosyal medyada paylaşmak istediğinizde kullanılabilir hale getirebilirsiniz. TinyJPG ile karşılaştırıldığında, daha iyi sıkıştırma denetimi sağlar ve en küçük boyutta en iyi kaliteyi elde etmek için çeşitli optimizasyon ayarlarıyla deney yapabilirsiniz.

İşte Squoosh'un bazı avantajları:

• Dönüştürülebilecek çeşitli resim formatlarını destekler 
• Resim boyutunu azaltmak için çeşitli teknikler kullanır.
• Sıkıştırılmış resimlerin önizlemesini yapmanızı sağlar
• Bir dizi optimizasyon ayarı sunar
• Araç ücretsiz ve kolay kullanımlıdır.

Tüm olumlu özelliklere rağmen bir dezavantajı var: Şu anda Squoosh her seferinde yalnızca bir resmi işleyebilir ve yığın işlem yapamaz. Bu özelliğin gelecekte eklenmesini umuyorum.

PHP Framework'lerinde JPG ve PNG resimlerin AVIF ve WebP'ye sunucu taraflı yığın dönüşümü

TutKit.com'da, JPG ve PNG formatındaki resimlerimizi - en azından 14.000 tekil dosya - AVIF formatına sunucu taraflı olarak dönüştürdük ve daha eski tarayıcılar için WebP formatına da yedek olarak ekledik. Ayrıca, editörlerimizin resimleri hala JPG veya PNG olarak yüklemelerine olanak tanıdık ve orada meta verilerle etiketlemelerini sağladık. Sistem, çıktı verirken resimleri otomatik olarak AVIF'e gömülü olarak ve eski (veya desteklenmeyen) tarayıcılara WebP biçiminde gösterir.

Sunucu taraflı işleyebilmek için en son yazılım sürümlerini kullanın. Yeni imagecreatefromavif ve imageavif fonksiyonları AVIF formatı için yalnızca PHP 8.1+ sürümünde mevcuttur ve GD uzantısı AVIF desteği ile derlenmiş olmalıdır. libavif sürümü 0.8.2 veya üstü gerektirir.

Aynı şekilde işletim sistemlerinde uyumluluğa dikkat edin. AVIF, kütüphane paketleri ile sunulmaktadır:

• Ubuntu 21.04 ve sonrası  
• Debian 11 ve sonrası 
• Alpine 3.13 ve sonrası 
• Fedora 34 ve sonrası

İşte TutKit.com'un mobil görünümü için PageSpeed değerlendirmesi. Masaüstünde 90'ın üzerinde bir değer elde etmek nispeten kolayken, mobil görünümler için gerçekten zorlayıcı olabiliyor. Bu değeri 100'e doğru iyileştirmekte çalışıyoruz çünkü biliyoruz ki: PageSpeed, kullanıcı deneyimi için önemlidir ve bu nedenle SEO başarımıza da katkı sağlar.

Laravel PHP Frameworkümüzde AVIF'in entegre edilmesiyle ilgili olarak burada rahat ve sorunsuz gibi görünen şey, JIRA aracımızda dönüştürme ve entegrasyonla ilgili 60'tan fazla talebe neden oldu (araştırma, geliştirme, hata düzeltme, test dahil). Bu nedenle, eklentiler WordPress gibi klasik bir CMS'te işi büyük ölçüde azaltırken, kapsamlı özelleştirme gerektiren durumlarda - bizim durumumuz gibi - üç hafta gibi bir süreye ihtiyaç duyabilir. AVIF'in kullanımıyla sağlanan avantajlar kesinlikle buna değer! 

By the way: Belki de yakında, neden TutKit.com gibi platformlarda WordPress veya diğer CMS'ler yerine bir PHP Framework kullanmayı tercih ettiğimizi açıklayan bir yazı yazabilirim.

WordPress'te AVIF Kullanımı için Eklentiler

Eylül 2023'e göre, CMS WordPress, AVIF resimlerin yükleme desteğini doğal olarak sunmamaktadır - özellikle versiyon 5.0.0'dan beri AVIF desteği sunan Contao CMS'i gibi değil. Bu nedenle, WordPress kullanırken AVIF resimlerinizi çıkarabilmek için şu anda iki adıma ihtiyacınız bulunmaktadır.

1. WordPress için AVIF Desteği oluşturun
2. JPG/PNG/WEBP resimlerin AVIF'e dönüştürülmesi

AVIF resimlerin WordPress sitelerinde kullanımını sağlayan bir dizi WordPress eklentisi bulunmaktadır. İşte inceleyebileceğiniz üç eklenti:

• AVIF Desteği: Bu eklenti, AVIF resimlerin WordPress sitelerinde yüklenmesine ve görüntülenmesine olanak tanır. JPEG ve PNG resimlerin otomatik olarak AVIF resimlere dönüştürülmesini de destekler.
• Medya Dönüştürücü: Bu eklenti, WordPress Medya Kitabınızdaki tüm resimleri AVIF resimlere dönüştürür. Ayrıca, resim kalitesini ve sıkıştırma oranını özelleştirmek için bir dizi seçenek sunar.
• ShortPixel İmaj Optimize Edici: Bu eklenti, WordPress Medya Kitabındaki resimleri optimize eder ve AVIF resimlere dönüştürür. Ayrıca, resim kalitesini ve performansını artırmak için diğer bir dizi özellik sunar.

Bu eklentiler, WordPress sitelerinde AVIF resimlerin avantajlarından yararlanmanın iyi bir yoludur.

İşte AVIF-Desteği Eklentisine git - ancak şu anda yalnızca 1.956 indirme ve 800'den az kurulum var - WordPress kullanıcıları için AVIF henüz tamamen bilinmiyor gibi gözüküyor.

GÜNCELLEME 05.04.2024: WordPress 6.5 ile WordPress artık AVIF'i destekliyor! Bu nedenle Destek Eklentileri yalnızca daha eski WordPress sürümleri için gereklidir. Bu nedenle, WordPress 6.5 ve üzerine güncelleme yapmak daha da önemli hale geliyor.

Strapi Web Siteleri İçin Local Image Sharp Eklentisi

4eck-media.de adlı ajans web sitemizde AVIF'i, node.js tabanlı Strapi CMS kullanan Strapi web sitelerinde AVIF resimlerinin kullanımını sağlayan Strapi için Local Image Sharp Eklentisi kullanıyoruz. Eklenti, AVIF resimlere dönüştürmek için sharp-Image-Processing-Toolkit'i kullanmaktadır.

Local Image Sharp Eklentisi, şunlar da dahil olmak üzere çeşitli işlevler sunmaktadır:

• Resimleri AVIF resimlere otomatik olarak dönüştürme
• Resim kalitesini ve sıkıştırma oranını ayarlama
• Farklı resim formatlarını destekleme

Eklentiyi yüklemek için, Strapi Eklenti Mağazasından indirin ve diğer Strapi eklentileri gibi kurun.

Biz JPG veya PNG olarak resimleri Strapi sistemine yükleme şeklinde yapılandırdık. Sistem, tarayıcıda AVIF olarak görüntülenecek doğru boyutlandırılmış resimleri sağlamak için resimleri altı farklı çözünürlükte AVIF ve WEBP resimlerine dönüştürüyor (Masaüstü, Tablet, Mobil cihazlara bağlı olarak). Eski tarayıcılarda, WebP resimler için Fallback çözümüne sahibiz, bu da o zaman gösterilen resimlerdir.

En iyi şekilde, resimlerini doğru boyutta ve JPEG veya PNG kaynağıyla AVIF ve WebP formatları ile göstermek için <picture> etiketini kullanmalısın.

Modern web formatındaki resimler, ajans web sitemizin harika performansı için önbelleklemenin yanı sıra en önemli arttırıcılardan biriydi:

Meta-Önizlemeler ve Yapılandırılmış Verilere İlişkin Not

Google Görüntülerin hala AVIF formatını desteklemediği göz önünde bulundurulursa, "image" olarak Şema İşaretleme için hala ilgili JPG Dosyasını belirtiyoruz. Google'a arama sonuçları için bir Önizleme görüntüsü sağlamak için her ürün sayfası için belirttiğimiz Meta-Önizlemesini içeren JPG formatı da aynı kalıyor.

Her ihtimale karşı, birisi AVIF'e geçtikten sonra tüm resimlerin çevrimiçi görünürlüğünün kaybolduğundan bahseden forumlarda raporlar yapılmıştır. Bu deneyimi doğrulayamıyoruz. Çevrimiçi görünürlük bizim için sabit kaldı, ancak Googlebot'un resimler için Googlebot Crawling İstekleri arttı. İlginç bir şekilde, eski tarayıcılar için Bu Fallback olarak Quell kodunda bulunan WebP resimlerini Googlebot'un dizine eklediğini görebiliyoruz. Google şu anda WebP resimlerini dizine eklemek için WebP resimlerini taradığını gösteriyor.

Bu nedenle, Önerim, Önizleme için ve yapılandırılmış veriler için Meta Verilerde JPG kaynağını da kullanmanızdır.

AVIF Resimlerin Düzenlenmesi İçin Araçlar ve Yazılımlar

Resimler genellikle düzenlenir ve bu nedenle yaygın resim düzenleme programlarında AVIF formatı ile uyumluluk elbette istenir. Bazen bir web sitesinden mevcut bir resmi indirip düzenleme yapabilirsiniz. Bu durumda, favori resim programınız resmi açabilse iyi olur ki bu da AVIF uyumluluğundaki en önemli işlevdir. Eğer farklı bir formatta kaydedilirse, yine de Squoosh veya diğer araçlar aracılığıyla AVIF formatına dönüştürülebilir.

İşte AVIF Uyumlu Görüntü Düzenleme Yazılımı listesi (Eylül 2023 itibarıyla):

• Gimp: Sürüm 2.10.22'den beri AVIF içe aktarabilir, düzenleyebilir ve dışa aktarabilir.
• Photopea: AVIF içe aktarabilir ve düzenleyebilir, ancak dışa aktaramaz. Başka bir dosya biçimine kaydedilebilir.
• Affinity Photo: AVIF için destek yok
• Photoshop: Destek yok, ancak bir eklenti yardımcı olabilir, böylece uyumluluk sağlanır.

Photoshop için AVIF Eklentisi

Photoshop'un AVIF dosyalarını açabilmesini sağlayan bir eklentiye buradan ulaşabilirsin.
https://github.com/0xC0000054/avif-format

İndirme sayfası olan Releases sekmesinden indirme işlemi gerçekleştirebilirsin.

ZIP dosyasını indirdikten sonra, Av1Image.8bi dosyasını Photoshop'un eklentileri aradığı klasöre ekleyin. Bu, Standart kurulumlarda aşağıdaki klasördedir:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Ya da bu klasördedir: C:\Program Files\Adobe\Photoshop [versiyon]\Plug-ins.

Photoshop kapatılmalı. Daha sonra Photoshop'u başlatın, bu şekilde eklenti yüklenebilir. Ardından AVIF dosyalarını Photoshop'ta sürükle ve bırak veya Açma ile doğrudan açabilirsiniz.

Windows'da AVIF Görüntülemek

Websitesinden indirdiğim resimleri düzenlemek veya başka şekilde kullanmak için dosya tarayıcının bu resimleri açmasını ve göstermesini istiyorum.

Windows 10'dan itibaren mümkün, ancak bunun için bir uzantı gerekiyor. Bir AVIF dosyasına tıkladığınızda önce bir hata mesajı alırsınız. 

Hata mesajında bir bağlantı bulunmaktadır. Bu bağlantıya tıkladığınızda, AVIF Uzantısı için Microsoft Mağazasına yönlendirilirsiniz. Bunun indirin. Sadece 1,61 MB.

Ardından AVIF formatındaki resimleri Windows altında dosya tarayıcınızda açabilir ve görebilirsiniz.

GIF Animasyonları yerine Web Sitelerinde AVIF Animasyonları kullanın

GIF animasyonlarını AVIF animasyonlarına dönüştürmek için bir çevrimiçi dönüştürücü bulunmaktadır. https://mconverter.eu/convert/gif/avif/

Test GIF'im 787 KB iken, AVIF formatında animasyon 411 KB boyutuna düşer.

Şahsi Görüşüm

Benim görüşüme göre, şu anda modern görüntü formatlarını web sitelerine entegre etmek için en iyi seçenek olarak AVIF en iyisidir. Sıkıştırma ve görüntü kalitesindeki avantajlar etkileyicidir. Hiçbir başka görüntü formatı bu özellikleri bir araya getirmez ve yükleme sürelerini bu kadar arttırmaz. Şu anda çok az web sitesi sahibi AVIF formatını kullanıyor, halbuki tarayıcı desteği %85'ten fazladır ve teknik olarak WebP'yi yedek olarak kullanmaya devam etmek bir engel değildir. SEO değişiyor. Tabii ki AVIF tek başına PageSpeed Insights'ta en iyi sonuçları almak için yeterli değil; bunun için daha fazla teknik faktör gerekiyor. Modern görüntü formatlarını entegre etmek söz konusu olduğunda, WebP'ye kıyasla AVIF ile daha iyi sonuçlar elde edebilirsiniz.

Sadece anahtar kelime optimize edilmiş içerik artık yetersiz olmayacak, çünkü yapay zeka interneti içeriklerle adeta dolduruyor, bu da birçok web sitesinin online görünürlükleri için yüksek kalitede içeriklerle rakipleriyle aynı seviyede rekabet etmeleri gerektiği anlamına geliyor. Teknik SEO ve özellikle Çekirdek Web Değerleri'nin önemi, Google'ın kullanıcılara en iyi kullanıcı deneyimini sunmayı amaçladığı için artık daha güçlü bir sıralama faktörü ve dolayısıyla bir İkinci Düzeltici olarak öne çıkmaktadır. AVIF, diğer faktörlerle birlikte, yüklenme sürelerinizi hızlandırmak, kullanıcı deneyimini artırmak ve perspektifte online görünürlüğünüzü artırmak için bir çözümün parçasıdır.

SEO, Kullanıcı Deneyimi, Tasarım ve Teknik Trendler Hakkında Daha Fazla Bilgi Edinin

Genel olarak SEO, Kullanıcı Deneyimi, yapay zeka araçları ve yeni web teknolojileri gibi konular ilginizi çekiyorsa, blogumuzdaki eğitimlerde ve diğer makalelerde daha fazla bilgi edinebilirsiniz.

Şimdi Sıra Sende

Eğer bu yazı sizin için faydalı olduysa, lütfen Google'da bir değerlendirme yazın. Her değerlendirme bize destek olur. AVIF'i web projenizde kullanırken yardıma ihtiyacınız varsa, lütfen bize ajans sayfamızdan ulaşın.