Web sitesinde AVIF görsel nasıl kullanılır?

Web sitesinde AVIF görsel kullanmak için dosyayı AVIF formatında hazırlayıp HTML içinde <picture> etiketiyle, JPEG veya WebP yedeğiyle sunmanız gerekir. Bu yöntem dosya boyutunu azaltabilir; ancak tarayıcı uyumluluğu, görsel kalitesi, alt metin, ön yükleme ve gerçek cihaz testleri birlikte değerlendirilmelidir.

AVIF tek başına bir SEO taktiği değildir. Sayfa hızına, özellikle görselin kapladığı alan ve yüklenme sırasına katkı sağlar. Google için teknik erişilebilirlik, içerik açıklığı ve sayfa deneyimi birlikte önem taşır. Bu nedenle format dönüşümü, görsel optimizasyon sürecinin yalnızca bir adımıdır.

AVIF nedir ve web sitesinde neden kullanılır?

AVIF, web için geliştirilmiş, modern sıkıştırma özellikleri sunan bir görsel formatıdır. JPEG ve PNG gibi formatların yerine her durumda geçmez; görselin türüne göre avantajı değişir.

AVIF özellikle fotoğraf, ürün görseli, banner ve karmaşık renk geçişleri bulunan görsellerde dosya boyutunu düşürebilir. Saydamlık desteği de bulunduğu için bazı PNG dosyalarının yerine kullanılabilir. Ancak küçük ikonlarda, basit logolarda veya çok keskin metin içeren grafiklerde sonuç her zaman daha iyi olmayabilir.

Dosya boyutu küçüldüğünde tarayıcının indirmesi gereken veri azalır. Bu durum mobil bağlantıda ilk görünür görselin daha erken yüklenmesine yardımcı olabilir. Fakat kazanç; kaynak dosyanın boyutuna, sıkıştırma ayarına, görselin ekrandaki ölçüsüne ve sunucu yanıt süresine bağlıdır.

Örneğin 2400 piksel genişliğinde bir ürün fotoğrafını doğrudan yüklemek yerine, ekranda kullanılacağı genişliğe uygun sürümler hazırlamak gerekir. AVIF’e dönüştürmek, gereksiz büyük görsel sorununu tek başına çözmez. Önce boyutlandırma, sonra format ve sıkıştırma seçimi yapılmalıdır.

AVIF’in işe yaramadığı durumlar da vardır. Görsel zaten küçükse, dönüşüm sonrasında gözle görülür kalite kaybı oluşuyorsa veya kullanılan uygulama AVIF dosyasını yönetemiyorsa JPEG ya da WebP daha pratik olabilir. Karar, dosya uzantısına değil test sonucuna dayanmalıdır.

AVIF görsel nasıl hazırlanır ve dönüştürülür?

AVIF görsel hazırlamak için önce orijinal dosyanın kullanım amacını belirleyin, ardından görseli doğru boyuta getirip kaliteyi karşılaştırarak dönüştürün.

Ürün sayfasındaki ana görsel, kategori kartı ve mobil banner aynı boyutta olmamalıdır. Her kullanım alanı için hedef genişlik ve yükseklik belirlenir. Orijinal görsel bu ölçülere yakın hazırlanır; ardından AVIF çıktısı alınır.

Dönüşüm sırasında iki kontrol yapılmalıdır. İlk kontrol dosya boyutudur. İkinci kontrol ise detay, kenar keskinliği, yazı okunabilirliği ve renk geçişidir. Aynı görseli JPEG, WebP ve AVIF olarak üretip gerçek ekranda karşılaştırın. Sadece kilobayt değerine bakmak, düşük kaliteli görsel seçmenize neden olabilir.

Dönüştürme için görsel düzenleme yazılımları, komut satırı araçları veya sunucu taraflı görsel servisleri kullanılabilir. Araç seçerken AVIF desteği, kalite ayarı, yeniden boyutlandırma ve otomatik yedek format üretimi bulunmalıdır.

Yanlış: Her görseli aynı kalite ayarıyla AVIF’e dönüştürmek. Doğru: Görsel türüne göre farklı çıktılar üretip dosya boyutu ve algılanan kaliteyi birlikte ölçmek.

Orijinal dosyaları daima ayrı saklayın. Sadece dönüştürülmüş dosyaları saklamak, ileride farklı ekran ölçülerine yeniden üretim yapmayı zorlaştırır.

HTML içinde AVIF görsel nasıl gösterilir?

HTML içinde AVIF göstermek için en güvenli yöntem, AVIF’i önceleyen ve desteklenmediğinde yedek format sunan <picture> etiketidir.

Temel kullanım şu şekildedir:

<picture>
  <source srcset="/gorseller/urun-450.avif" type="image/avif">
  <source srcset="/gorseller/urun-450.webp" type="image/webp">
  <img src="/gorseller/urun-450.jpg" width="450" height="450" alt="Siyah deri omuz çantası" loading="lazy" decoding="async">
</picture>

Tarayıcı, desteklediği ilk <source> seçeneğini kullanır. AVIF desteklenmiyorsa WebP, o da kullanılamıyorsa JPEG yüklenir. <img> etiketi mutlaka bulunmalıdır; çünkü alternatif format, alt metin ve erişilebilirlik bilgileri burada tanımlanır.

width ve height değerleri görselin gerçek oranını yansıtmalıdır. Bu değerler, görsel indirilmeden önce sayfada yer ayrılmasına yardımcı olur. Böylece içerik yüklenirken butonların veya metinlerin aşağıya kayması azalabilir.

loading="lazy" ekranın altındaki görseller için kullanılabilir. Sayfanın üst bölümünde, özellikle ana başlığın yanında görünen LCP adayı görseller tembel yüklemeye alınmamalıdır. İlk görünür görsel için önceliklendirme gerekebilir.

alt metni görselin dosya adını değil, sayfadaki işlevini açıklamalıdır. Dekoratif görsellerde boş alt metin kullanılabilir. Ürün görselinde ürünün ayırt edici bilgisi yazılmalıdır. Alt metin alanına anahtar kelime listesi eklemek doğru değildir.

AVIF responsive görsellerle nasıl kullanılır?

AVIF’i responsive kullanmak için farklı ekran genişliklerine uygun dosyalar üretip srcset ve sizes niteliklerini birlikte tanımlayın.

Tek bir 2000 piksel görseli her cihaza göndermek, mobil kullanıcıya gereksiz veri indirtir. Bunun yerine aynı görselin örneğin küçük, orta ve geniş kullanım için ayrı sürümleri hazırlanır. Bu sürümlerin ölçüleri tasarımda gerçekten kullanılan alanlarla uyumlu olmalıdır.

<picture>
  <source
    type="image/avif"
    srcset="/gorseller/urun-480.avif 480w, /gorseller/urun-960.avif 960w, /gorseller/urun-1440.avif 1440w"
    sizes="(max-width: 600px) 92vw, (max-width: 1000px) 50vw, 420px">
  <img
    src="/gorseller/urun-960.jpg"
    srcset="/gorseller/urun-480.jpg 480w, /gorseller/urun-960.jpg 960w, /gorseller/urun-1440.jpg 1440w"
    sizes="(max-width: 600px) 92vw, (max-width: 1000px) 50vw, 420px"
    width="960"
    height="960"
    alt="Siyah deri omuz çantası"
    loading="lazy"
    decoding="async">
</picture>

srcset tarayıcıya hangi genişliklerde dosyalar bulunduğunu bildirir. sizes ise görselin ekranda yaklaşık ne kadar yer kaplayacağını açıklar. Bu iki bilgi uyuşmazsa tarayıcı gereğinden büyük dosya seçebilir.

Responsive görsel hazırlarken kırpma biçimini de kontrol edin. Mobil ekranda ürünün tamamı görünmüyorsa dosyayı küçültmek sorunu çözmez. Sanat yönetimi gerekiyorsa masaüstü ve mobil için farklı kırpılmış görseller kullanılabilir.

Galeriler, önerilen ürün alanları ve kategori kartlarında lazy loading genellikle uygundur. Ancak kullanıcı kaydırmadan önce görünen ilk kartlarda tarayıcı önceliğini düşürmemek gerekir. Her görsele aynı yükleme niteliğini vermek yerine görünürlük sırasına göre karar verin.

Responsive görsel düzeni, Google’da ürün görseli için tercih edilen resmi seçme sürecinden ayrıdır. Arama motoru için ana ürün görseli tutarlı kalırken, sayfada kullanılan dosya ölçüleri cihaza göre değişebilir.

WordPress ve e-ticaret sitesinde AVIF nasıl uygulanır?

WordPress veya e-ticaret sitesinde AVIF uygulamak için önce altyapının formatı yükleyip yüklemediğini, sonra medya işleme ve önbellek davranışını kontrol edin.

Birçok sistemde AVIF desteği üç farklı şekilde kurulabilir. İlk yöntemde yükleme sırasında dosya otomatik dönüştürülür. İkinci yöntemde görsel CDN’i, istek yapan tarayıcıya uygun formatı üretir. Üçüncü yöntemde AVIF dosyaları manuel hazırlanır ve HTML ya da tema bileşenlerine eklenir.

Otomatik dönüştürme pratik görünse de her eklenti doğru HTML üretmez. Bazı sistemler AVIF dosyasını oluşturur, fakat sayfada JPEG’i göstermeye devam eder. Bazıları ise eski tarayıcılar için yedek üretmez. Kaynak kodda <picture>, srcset ve doğru MIME türünü kontrol etmek gerekir.

E-ticarette ürün görselleri genellikle ürün yönetim sistemi, CDN, önbellek ve tema katmanından geçer. Bu zincirin bir noktasında eski dosya URL’si tutuluyorsa dönüşüm etkisi görünmeyebilir. Ürün listeleme, ürün detay, sepet önerileri ve mobil menü ayrı ayrı test edilmelidir.

AVIF dosyalarının sunucuda doğru MIME türüyle servis edilmesi gerekir. Sunucu yapılandırması hatalıysa tarayıcı dosyayı görüntülemeyebilir. Ayrıca CDN önbelleği eski JPEG dosyasını uzun süre sunabilir. Değişiklik sonrasında gerçek URL, yanıt başlıkları ve önbellek temizliği kontrol edilmelidir.

JavaScript ile sonradan oluşturulan görsellerde de aynı sorun görülebilir. Google SEO’da JavaScript içeriğin nasıl indekslendiğini incelerken görsel URL’lerinin tarayıcı ve arama motoru tarafından erişilebilir olup olmadığını ayrıca değerlendirin.

AVIF kullanırken SEO ve erişilebilirlik nasıl korunur?

AVIF kullanırken SEO ve erişilebilirliği korumak için format değişikliğini alt metin, anlamlı URL, boyut bilgisi, görünür metin ve klavye erişiminden bağımsız düşünmeyin.

Arama motoru görselin yalnızca uzantısına göre anlam çıkarmaz. Görselin çevresindeki metin, sayfa başlığı, ürün bilgileri, alt metin ve yapılandırılmış veri birlikte değerlendirilir. Ürün sayfasında fiyat ve stok bilgisi görselin içine yazılmışsa, bu bilgi metin olarak da sayfada bulunmalıdır.

Alt metin ürünün görünür ve işlevsel bilgisini vermelidir. “urun-avif-1” veya “en iyi çanta satın al” alt metin değildir. “Kahverengi, ayarlanabilir askılı deri sırt çantası” gibi açıklamalar, görselin içeriğini daha doğru aktarır.

Erişilebilirlik açısından renk kontrastı, yakınlaştırma, odak sırası ve metin alternatifleri birlikte incelenmelidir. Görsel yalnızca dekoratifse alt metni boş bırakmak, ekran okuyucunun gereksiz dosya adını okumasını engeller.

• AVIF dosyasının yanında uygun bir yedek format bulunuyor mu?
• Görselde doğru ve anlamlı bir alt metni var mı?
• width ve height değerleri oranı doğru yansıtıyor mu?
• İlk görünür görsel yanlışlıkla lazy loading ile geciktiriliyor mu?
• Mobil ekranda görsel üzerindeki metin okunabiliyor mu?
• Görsel URL’si tarayıcı, CDN ve test araçları tarafından erişilebiliyor mu?

Web sitesinde WCAG 2.2 AA uyumunu kontrol etme sürecinde AVIF dosyasını ayrıca incelemek gerekir. Formatın modern olması, erişilebilirliğin otomatik olarak sağlandığı anlamına gelmez.

AVIF sayfa hızını nasıl etkiler ve nasıl ölçülür?

AVIF’in sayfa hızına etkisini ölçmek için aynı sayfayı aynı koşullarda karşılaştırmalı test edin; yalnızca dosya boyutuna bakmayın.

Önce mevcut sürümün ölçümlerini kaydedin. Ana görselin dosya boyutu, görselin gerçek piksel ölçüsü, sunucu yanıt süresi ve sayfadaki toplam görsel ağırlığı not edilmelidir. Ardından yalnızca formatı değiştirip aynı ölçüm sürecini tekrarlayın.

PageSpeed Insights veya Lighthouse sonuçlarında LCP, toplam aktarım miktarı, render-blocking kaynaklar ve görsellerin doğru boyutlandırılması gibi verileri inceleyin. Bu araçlardaki tek bir puan, neden-sonuç ilişkisini açıklamaz. Hangi görselin LCP adayı olduğunu ayrıca bulun.

Gerçek kullanıcı verileri ile laboratuvar testleri farklı sorulara cevap verir. Laboratuvar testi kontrollü koşullarda karşılaştırma yapar. Gerçek kullanıcı verileri ise cihaz, bağlantı ve konum çeşitliliğini gösterir. Değişiklikten sonra ölçüm verilerinin oluşması için yeterli trafik ve süre gerekebilir.

1. Mevcut JPEG veya WebP sürümünün dosya boyutunu ve ölçülerini kaydedin.
2. Aynı görseli hedef ölçülerde AVIF olarak üretin.
3. AVIF, WebP ve mevcut formatı aynı cihazlarda karşılaştırın.
4. HTML kaynağında tarayıcının gerçekten AVIF seçtiğini doğrulayın.
5. LCP, görsel aktarımı ve mobil kullanılabilirlik sonuçlarını yeniden ölçün.
6. Kalite kaybı varsa sıkıştırma ayarını veya kaynak ölçüsünü değiştirin.

Bir sayfada AVIF kullanıldığı halde hız artmıyorsa sorun görsel dışında olabilir. Sunucu yanıtı, JavaScript, üçüncü taraf kodlar, yazı dosyaları veya yanlış ön yükleme davranışı baskın darboğaz oluşturabilir.

AVIF hangi durumlarda kullanılmamalıdır?

AVIF, kalite kaybı oluşturuyorsa, altyapı yedek format sunamıyorsa veya görsel çok küçükse kullanılmamalıdır.

Basit bir SVG logo, birkaç kilobaytlık bir ikon veya düz renkli bir arka plan AVIF’e çevrildiğinde anlamlı kazanç sağlamayabilir. Dönüşüm sonrasında dosya büyüyorsa veya işlem zinciri karmaşıklaşıyorsa mevcut formatı korumak daha doğru olabilir.

Çok küçük boyutlu görsellerde sıkıştırma izleri daha belirgin hale gelebilir. Ürün etiketleri, fiyat karşılaştırma tabloları veya görsel içinde bulunan küçük yazılar bu riski artırır. Bu tür içeriklerde metni HTML olarak sunmak, görseli yalnızca destekleyici unsur yapmak gerekir.

Eski kurumsal uygulamalar, e-posta şablonları, bazı uygulama içi tarayıcılar veya üçüncü taraf entegrasyonlar AVIF’i beklediğiniz gibi göstermeyebilir. Bu nedenle AVIF’i doğrudan tüm sistemlerde zorunlu kılmadan önce kullanım ortamlarını listeleyin.

Görsel CDN’i formatı otomatik seçiyorsa, aynı URL’nin farklı içerik döndürme davranışını kontrol edin. Önbellek anahtarında içerik türü dikkate alınmıyorsa bir kullanıcıya AVIF, diğerine uyumsuz dosya gönderilebilir. Teknik ekip, CDN sağlayıcısının içerik anlaşması ve önbellek kurallarını incelemelidir.

AVIF’i kullanmama kararı başarısızlık değildir. Amaç her dosyayı modern formata geçirmek değil, ölçülebilir biçimde daha az veriyle aynı görsel anlamı sunmaktır. Kazanç yoksa WebP, JPEG, PNG veya SVG seçenekleri karşılaştırılmalıdır.

AVIF geçişi nasıl yapılır ve nasıl kontrol edilir?

AVIF geçişi, tüm görselleri tek seferde değiştirmek yerine en fazla veri taşıyan ve en görünür görsellerden başlayarak kontrollü yapılmalıdır.

İlk aşamada medya envanteri çıkarın. Ana sayfa, kampanya sayfaları, kategori listeleri ve ürün detaylarında en büyük dosyaları belirleyin. Dosya boyutu yüksek olan her görsel önemli değildir; ekranın üst bölümünde görünen görseller ve LCP adayları öncelikli incelenmelidir.

İkinci aşamada dosya adlarını, ölçüleri, alt metinleri ve yedek formatları standardize edin. Aynı ürünün farklı sayfalarda farklı kırpılması, kullanıcı deneyimini bozabilir. Dosya adında açıklayıcı ve kısa ifadeler kullanın; URL’ye gereksiz tarih veya otomatik kod eklemeyin.

Üçüncü aşamada küçük bir sayfa grubunda uygulama yapın. Bir ürün kategorisi, bir ürün detay şablonu veya bir kampanya landing page seçilebilir. Uygulama sonrasında görsellerin göründüğünü, fallback çalıştığını ve mobilde kayma oluşmadığını kontrol edin.

Dördüncü aşamada raporlama yapın. Eski ve yeni sürüm için dosya boyutu, LCP, görsel hata oranı, dönüşüm hunisindeki ilgili sayfa metrikleri ve destek talepleri karşılaştırılabilir. Satış veya dönüşüm etkisini yalnız AVIF’e bağlamak için diğer değişikliklerin de kayıt altına alınması gerekir.

Bu süreçte AI ajanları için web sitesinde erişilebilirliğin neden önemli olduğunu da göz önünde bulundurun. Görselin formatı değişse bile sayfanın metinsel açıklaması, etkileşim bilgisi ve erişilebilir yapısı korunmalıdır.

AVIF kullanımı için uygulanabilir kontrol listesi nedir?

AVIF uygulamasını tamamlamadan önce format, kod, performans, SEO ve kullanıcı deneyimi kontrollerini aynı listede değerlendirin.

Bir görselin başarılı şekilde AVIF’e geçirilmesi, tarayıcıda görünmesiyle bitmez. Kaynak dosyanın doğru ölçüde olması, alternatif formatın çalışması, alt metnin anlamlı olması ve sayfa hızının ölçülmesi gerekir. Aşağıdaki liste, yayın öncesi son kontrolde kullanılabilir.

• Görselin kullanım amacı ve hedef ekran ölçüsü belirlendi mi?
• Kaynak dosya gereksiz yüksek çözünürlükte mi?
• AVIF çıktısı görsel kalite açısından manuel kontrol edildi mi?
• JPEG veya WebP yedek formatı üretildi mi?
• <picture> yapısında <img> etiketi bulunuyor mu?
• srcset ve sizes değerleri gerçek tasarım genişliğiyle uyumlu mu?
• Görselin en-boy oranı için width ve height tanımlandı mı?
• İlk görünür görsel gereksiz şekilde lazy loading ile erteleniyor mu?
• Görseldeki anlamlı içerik HTML metni veya alt metinle aktarılıyor mu?
• Tarayıcıda AVIF, desteklenmeyen ortamda fallback dosyası açılıyor mu?
• CDN, önbellek ve sunucu doğru içerik türünü döndürüyor mu?
• Mobil cihazda bulanıklık, kırpılma, kayma veya okunamayan metin var mı?
• Değişiklikten önce ve sonra performans ölçümü kaydedildi mi?

Kontrol listesi sonucunda yalnız dosya boyutu küçülmüşse fakat kalite veya erişilebilirlik bozulmuşsa uygulama tamamlanmış sayılmaz. Görsel optimizasyonunda teknik kazanç, kullanıcıya sunulan görüntü ve bilgiyle birlikte değerlendirilmelidir.

Kurumsal sitelerde ana sayfa, hizmet sayfaları ve referans galerileri ayrı şablonlar olarak incelenmelidir. E-ticarette ise ürün görselleri, varyant görselleri, kampanya kartları ve kullanıcı yorumlarındaki görseller ayrı test edilmelidir.

Sonuç olarak AVIF, doğru boyutlandırma, responsive sunum, fallback, alt metin ve performans ölçümüyle birlikte kullanıldığında web sitesinin görsel aktarımını iyileştirebilir. En doğru karar, mevcut formatla yapılan karşılaştırmalı testten sonra verilir.