Web sitenizde AVIF görselleri nasıl kullanılır?

Temel adımlar

1. Sayfada zaten kullanılan bir görsel seçin ve orijinalini saklayın.
2. AVIF sürümünü oluşturun ve kalitesini kontrol edin.
3. AVIF dosyasını yayın sisteminizin desteklediği bir yöntemle sitenize ekleyin.
4. Yayınlanan sayfayı telefonda ve bilgisayarda kontrol edin.
5. Hangi görsel dosyasının yüklendiğini tarayıcının ağ isteklerinden doğrulayın.

Aşağıdaki bölümlerde her adımda nelere dikkat etmeniz gerektiği anlatılıyor.

Sitenizin AVIF dosyalarını nasıl işlediğini kontrol edin

Bir yayın sistemi AVIF dosyasını medya kütüphanesine kabul etse bile JPG veya PNG’den farklı işleyebilir. Bu nedenle hem dosyanın eklenmesini hem de yayınlanan sayfada kullanılmasını kontrol edin.

Tek bir görselle deneyin:

• Medya kütüphanesi dosyayı kabul ediyor mu?
• Görsel sayfa düzenleyicisinde görünüyor mu?
• Yayınlanan sayfada çalışıyor mu?
• Sistem normalde küçük görsel sürümleri oluşturuyorsa, gerekli sürümler bu dosya için de oluşturuluyor mu?

Bir görsel optimizasyon hizmeti veya CDN, görsellerinizi zaten AVIF biçiminde sunuyor olabilir. Dosyaları elle değiştirmeden önce mevcut işleyişi kontrol edin. Medya kütüphanesindeki bir JPG, ziyaretçiye hangi biçimin gönderildiğini tek başına göstermez.

Deneme için bir görsel hazırlayın

Sitenizin içeriğini temsil eden bir görsel seçin. Ürün fotoğrafı, yazının ana görseli veya şeffaf bir grafik, içerikle ilgisiz bir test görselinden daha yararlı bir başlangıçtır.

Kaynak biçimine uygun dönüştürücüyü kullanın:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Pixilo’nun AVIF dönüştürücüleri orijinal piksel boyutlarını korur ve sabit bir kayıplı sıkıştırma ayarı kullanır. Tek bir durağan görsel oluştururlar. Animasyon, orijinal HDR bilgileri ve meta veriler korunmaz.

İndirdiğiniz AVIF görselini orijinalle karşılaştırın. Özellikle metnin okunabilirliğini, ince kenarları, renk geçişlerini ve şeffaf alanları inceleyin. Dosya boyutuna da bakın: dönüştürme dosyayı her zaman küçültmez.

Kalite yeterli değilse veya dosya büyüyorsa mevcut sürümü koruyun. Biçimi değiştirmek tek başına bir amaç değildir.

AVIF dosyasını yayın sisteminiz üzerinden ekleyin

Sayfa oluşturucu veya içerik yönetim sistemi kullanıyorsanız AVIF dosyasını medya kütüphanesine ekleyin ve ilgili görsel öğesinde yeni görsel olarak seçin.

Deneme sırasında görüntüleme boyutunu ve kırpmayı değiştirmeyin. Böylece sayfa düzenini aynı anda değiştirmeden biçim değişikliğinin etkisini değerlendirebilirsiniz.

Görseli değiştirirken şunları kontrol edin:

• alternatif metin
• en boy oranı ve kırpma
• varsa görsel açıklaması ve bağlantı
• bilgisayar ve mobil cihazlardaki sayfa düzeni.

URL’deki dosya uzantısını değiştirmek görseli dönüştürmez. Gerçek bir AVIF dosyası yayınlayın veya dönüştürmeyi yapan bir hizmet kullanın.

Gerektiğinde alternatif bir biçim sunun

HTML kodunu kendiniz düzenliyorsanız picture öğesiyle AVIF’i ilk seçenek, JPG’yi ise alternatif olarak sunabilirsiniz.

Bu örnekte iki dosya da aynı görseli 1200 × 800 piksel boyutlarında gösterir. Dosya yollarını, boyutları ve alternatif metni kendi görselinize göre değiştirin.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Önden görünen mavi sırt çantası">
</picture>

AVIF’i destekleyen bir tarayıcı AVIF sürümünü seçebilir. Belirtilen biçimi desteklemiyorsa bu örnekte JPG kullanılır. Şeffaf bir görsel için PNG gibi şeffaflığı koruyan bir alternatif seçin. Ayrıntılar için MDN’nin picture öğesi belgelerine bakın.

Bu alternatif, görsel biçiminin desteklenmemesi durumunu karşılar. Yanlış bir AVIF adresini veya bozuk dosyayı otomatik olarak düzeltmez.

Yayın sisteminiz alternatif biçimleri otomatik yönetiyorsa sistemin kendi özelliğini kullanın.

Tarayıcının hangi görseli yüklediğini doğrulayın

Görselin sayfada görünmesi AVIF kullanıldığını kanıtlamaz. Tarayıcı eski görseli, daha küçük bir sürümü veya optimizasyon hizmetinin oluşturduğu bir dosyayı yükleyebilir.

Chrome’da bunu geliştirici araçlarıyla kontrol edebilirsiniz:

1. Yayınlanan sayfayı ve geliştirici araçlarını açın.
2. Network sekmesini ve Img filtresini seçin.
3. Disable cache seçeneğini etkinleştirin ve araçlar açıkken sayfayı yeniden yükleyin.
4. Kontrol etmek istediğiniz görsele ait isteği açın.
5. URL’yi ve yanıtın Content-Type değerini kontrol edin. AVIF için bu değer image/avif olur.

Uzantı tek ipucu değildir: optimizasyon hizmeti, sonu .jpg olan bir URL’den AVIF sunabilir. Network paneli aktarılan dosyanın boyutunu kontrol etmenizi de sağlar. Ayrıntılar için Chrome’un ağ isteklerini inceleme kılavuzuna bakın.

Sayfa mobil cihazlar için ayrı bir görsel veya birden fazla boyut kullanıyorsa bunlara ait istekleri de kontrol edin.

Başka görselleri değiştirmeden önce yayınlanan sayfayı kontrol edin

Görseli gerçekten kullanıldığı yerde inceleyin. Medya kütüphanesinin önizlemesi, mobil kırpmayı, sayfa arka planının etkisini veya doğru sürümün yüklenip yüklenmediğini göstermez.

Şunlardan emin olun:

• görselin tamamı görünür veya kırpma bilinçli yapılmıştır
• metin ve önemli ayrıntılar yeterince net kalır
• şeffaf alanlar sayfa arka planı üzerinde doğru görünür
• görsel için ayrılan alan ve sayfa düzeni doğru kalır
• tarayıcı beklenen dosyayı yükler.

Değişiklik öncesi ve sonrası yüklemeyi karşılaştırırken aynı sayfayı, pencere boyutunu ve test ayarlarını kullanın. Tek bir hızlı yükleme, kalıcı iyileşme olduğunu göstermez. Görseller aynı boyutlarda ve kabul edilebilir kalitedeyse dosyanın küçüldüğünü doğrulamak daha kolaydır.

AVIF görseli görünmüyorsa

Önce görselin doğrudan URL’sinin tarayıcıda açılıp açılmadığını kontrol edin. Açılmıyorsa dosyanın konumunu ve yayın sisteminin hata mesajlarını inceleyin.

Görsel doğrudan açılıyor ama sayfa eski sürümü gösteriyorsa görsel öğesinin URL’sini, diğer görsel boyutlarını ve sitenin önbelleğini kontrol edin. Tarayıcı önbelleğini devre dışı bırakmak yayın sisteminin veya CDN’nin önbelleğini temizlemez.

Neden hâlâ belirsizse ilgili öğede çalışan orijinali geri yükleyin ve yeniden denemeden önce AVIF desteğini araştırın.

Sık sorulan sorular

Sitedeki tüm görseller AVIF’e dönüştürülmeli mi?

Hayır. Dosya boyutunda yararlı bir azalma sağlayan ve yayın sisteminizde kabul edilebilir kaliteyle çalışan görselleri değiştirin.

AVIF dosyasını medya kütüphanesine eklemek yeterli mi?

Hayır. Görseli sayfada kullanılmak üzere de seçmelisiniz. Hangi dosyanın yüklendiğini yayınlanan sayfanın ağ isteklerinden kontrol edin.

AVIF için her zaman alternatif bir görsel gerekir mi?

Bu, ziyaretçilerin tarayıcılarına ve yayınlama yönteminize bağlıdır. AVIF’in çalışmadığı ortamları desteklemek istiyorsanız başka bir biçim sunmak yararlıdır.

Yeni AVIF, sayfanın yüklediği dosyayı neden küçültmüyor?

Sayfa eski görseli veya yayın sisteminin oluşturduğu başka bir sürümü kullanıyor olabilir. AVIF dosyasının kendisi de daha büyük olabilir. Gerçek isteği kontrol edin ve aynı piksel boyutlarındaki dosyaları karşılaştırın.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)