WebP ve AVIF Nedir? Web Sitesi Görselleri Hangi Formatla Yüklenmeli?

WebP ve AVIF Nedir?

WebP ve AVIF, görselleri daha verimli biçimde saklamak ve web ortamında sunmak amacıyla kullanılan modern dosya formatlarıdır.

WebP nedir?

WebP, hem kayıplı hem de kayıpsız sıkıştırmayı destekleyen görüntü formatıdır.

Şeffaf arka plan ve animasyon desteği sunar. Güncel tarayıcılarda yaygın olarak desteklenmektedir.

Örneğin bir web sitesindeki JPEG fotoğrafın WebP sürümü, benzer görsel kalite hedeflendiğinde daha küçük olabilir.

AVIF nedir?

AVIF, AV1 görüntü sıkıştırma teknolojisini temel alan modern bir görsel formatıdır.

Yüksek sıkıştırma verimliliğinin yanında şeffaflık, farklı renk derinlikleri ve uygun uygulamalarda yüksek dinamik aralık gibi özellikleri destekler.

AVIF, birçok fotoğraf senaryosunda WebP’den bile daha küçük dosya oluşturabilir. Ancak sonuç, kaynak görüntü, dönüştürme ayarları ve kodlayıcıya bağlıdır.

JPEG, PNG, WebP, AVIF ve SVG Arasındaki Farklar

Farklı görsel formatları farklı ihtiyaçlar için geliştirilmiştir. Bir fotoğraf için uygun olan format, logo veya ekran görüntüsü için ideal olmayabilir.

Görsel Formatları Karşılaştırma Tablosu

Aşağıdaki tablo, web sitesi için format seçerken temel özellikleri bir arada gösterir.

En iyi görsel formatı hangisi?

Her durumda geçerli tek bir format yoktur.

Fotoğraflarda WebP ve AVIF avantajlı olabilirken, çok keskin metin içeren ekran görüntülerinde PNG veya kayıpsız WebP daha iyi sonuç verebilir.

Bir logo için ise güvenli biçimde kullanılan SVG, farklı çözünürlüklerde avantaj sağlayabilir.

Kayıplı ve Kayıpsız Görsel Sıkıştırma Nedir?

Görsel formatlarının dosya boyutu farkını anlamak için kayıplı ve kayıpsız sıkıştırma ayrımını bilmek gerekir.

Kayıplı sıkıştırma

Kayıplı sıkıştırma, dosya boyutunu azaltmak amacıyla görüntü verilerinin bir kısmını çıkarır.

Uygun kalite ayarlarında değişiklikler gözle çok zor fark edilebilir. Ancak fazla sıkıştırmada fotoğraftaki ayrıntılar bozulabilir.

Kayıpsız sıkıştırma

Kayıpsız sıkıştırmada görüntü yeniden açıldığında sıkıştırma öncesi piksel bilgileri korunur.

Bu yöntem yazı, ekran görüntüsü, ikon ve keskin çizgilerde yararlı olabilir.

Kalite ayarı kaç olmalı?

JPEG, WebP ve AVIF kodlayıcılarının kalite ölçekleri birbirleriyle doğrudan eşdeğer değildir.

Örneğin bir araçta 80 değerinin başka bir araçta aynı kaliteyi oluşturacağı varsayılmamalıdır.

WebP ve AVIF Dosya Boyutu Ne Kadar Küçülür?

WebP ve AVIF birçok görselde daha düşük dosya boyutu sağlayabilir. Ancak belirli bir yüzdeyi bütün dosyalara uygulamak doğru değildir.

Görsel içeriği, başlangıç formatı, çözünürlük ve sıkıştırma ayarları sonucu belirler.

Temsili dosya boyutu karşılaştırması

Aşağıdaki örnek, farklı formatların boyutlarını nasıl karşılaştırabileceğinizi göstermek için hazırlanmıştır. Gerçek dosyalarda ölçüm yapılmamıştır.

Yüzde tasarruf nasıl hesaplanır?

Buradaki tasarruf dosya boyutuyla ilgilidir.

Sayfa açılış hızının veya LCP süresinin aynı oranda iyileşeceği sonucu çıkarılamaz.

Hangi Web Sitesi Görseli İçin Hangi Format Kullanılmalı?

Format seçimini yalnızca dosya uzantısına göre değil, içeriğin türüne göre yapın.

Her görseli WebP’ye çevirmek doğru mu?

Her durumda değil. Özellikle zaten çok küçük SVG ikonlarını gereksiz şekilde raster görsele dönüştürmek kalite veya kullanım esnekliğini azaltabilir.

Ayrıca kayıpsız PNG dosyasını kayıplı WebP’ye dönüştürmek bazı grafiklerde yazı ve çizgi kalitesini bozabilir.

WebP ve AVIF Şeffaf Arka Planı Destekler mi?

Evet. WebP ve AVIF şeffaflık desteğine sahiptir.

Bu nedenle şeffaf arka planlı ürün görsellerinde yalnızca PNG kullanmak zorunlu değildir.

Ancak şeffaflık geçişleri ve kenar kalitesi dönüştürme sonrasında kontrol edilmelidir.

Animasyon için GIF yerine WebP veya AVIF kullanılabilir mi?

WebP ve AVIF animasyon desteği sunar. Ancak hangi animasyon biçiminin kullanılacağı tarayıcı, editör ve dönüştürme altyapısına göre değerlendirilmelidir.

Daha uzun animasyon ve hareketli içeriklerde video biçimleri daha uygun olabilir.

WordPress’e WebP ve AVIF Görselleri Nasıl Yüklenir?

WordPress görsel formatları konusunda yıllar içinde yerleşik destek geliştirmiştir.

WordPress 5.8 sürümünde WebP, WordPress 6.5 sürümünde AVIF desteği eklenmiştir.

Ancak özellikle AVIF işlemleri için sunucu ortamının uygun görüntü işleme kütüphanelerini desteklemesi gerekir.

WordPress WebP yükleme adımları

1. Görseli uygun boyut ve kalitede WebP olarak hazırlayın.
2. WordPress yönetim panelindeki Ortam bölümüne gidin.
3. Yeni ortam dosyası yükleyin.
4. Dosyayı açarak görselin doğru işlendiğini kontrol edin.
5. Gerekli alternatif metni ve görsel açıklamalarını düzenleyin.
6. Yazı veya sayfada uygun görsel boyutunu seçin.
7. Mobil ve masaüstü görünümü test edin.

WordPress AVIF yükleme adımları

1. WordPress sürümünüzün AVIF desteğine uygun olduğunu kontrol edin.
2. Araçlar → Site Sağlığı → Bilgi bölümünü açın.
3. Medya İşleme alanındaki desteklenen formatları inceleyin.
4. AVIF destekleniyorsa hazırlanmış dosyayı Ortam Kütüphanesi’ne yükleyin.
5. Önizleme ve oluşturulan küçük boyutları kontrol edin.
6. Gerçek sayfada görselin açıldığını test edin.

WordPress JPEG dosyalarını otomatik WebP yapar mı?

WordPress’in WebP dosyasını kabul etmesi, yüklediğiniz bütün JPEG görsellerin varsayılan olarak otomatik WebP’ye çevrileceği anlamına gelmez.

WordPress görüntü alt boyutlarının oluşturulmasında farklı kurallar ve filtreler kullanılabilir. Ayrıca görsel optimizasyon eklentileri veya CDN servisleri farklı formatları ziyaretçiye sunabilir.

JPEG ve PNG Görselleri WebP veya AVIF Formatına Nasıl Dönüştürülür?

Görselleri dönüştürmek için masaüstü düzenleme programları, uygun web araçları veya WordPress optimizasyon çözümleri kullanılabilir.

Güvenli dönüştürme iş akışı

1. Orijinal görselin yedeğini saklayın.
2. Görselin kullanım boyutunu belirleyin.
3. Gereğinden büyük çözünürlüğü küçültün.
4. WebP ve gerekiyorsa AVIF sürümleri hazırlayın.
5. Kaliteyi gerçek görüntüleme boyutunda karşılaştırın.
6. Dosya boyutlarını kaydedin.
7. Renkleri, şeffaflığı ve ince ayrıntıları kontrol edin.
8. WordPress’te yükleme ve görüntülemeyi test edin.

Toplu dönüştürmede nelere dikkat edilmeli?

Yüzlerce görseli aynı anda dönüştürmeden önce küçük bir örnek küme üzerinde test yapılmalıdır.

Özellikle eski görsel URL’lerinin korunması, medya kütüphanesi kayıtları ve kullanılan sayfa oluşturucu eklentileri kontrol edilmelidir.

Orijinal JPEG veya PNG dosyalarını silmeli miyim?

Her zaman değil. Özellikle mevcut içeriklerde kullanılan bağlantılar, yedek dosyalar ve olası uyumluluk ihtiyaçları değerlendirilmelidir.

Eski görsellerin silinmesi 404 hatalarına veya sayfada bozuk görsellere neden olabilir.

WordPress SVG Yüklemeyi Destekler mi?

SVG, tarayıcılar tarafından desteklenen bir görsel formatıdır.

Ancak WordPress standart kurulumlarda SVG yüklemelerine güvenlik nedeniyle kısıtlama uygular.

Bunun nedeni SVG’nin yalnızca basit bir görüntü dosyası olmamasıdır. XML tabanlı yapısı kötü amaçlı içerik taşıyabilir.

SVG kullanmak isteyen işletmeler ne yapmalı?

• SVG dosyalarının güvenilir kaynaklardan geldiğinden emin olun.
• Yükleme sırasında güvenli dosya temizleme ve doğrulama yöntemleri kullanın.
• Gereksiz kullanıcılara SVG yükleme yetkisi vermeyin.
• Tema ve eklenti uyumluluğunu test edin.
• Güvenli yönetim mümkün değilse PNG veya WebP alternatiflerini değerlendirin.

Mobil Görseller İçin srcset, sizes ve picture Nedir?

Görsel formatı kadar görselin hangi çözünürlükte sunulduğu da önemlidir.

Örneğin masaüstünde geniş bir alanda gösterilen görsel, telefonda çok daha dar bir alanda kullanılabilir.

Her cihazda gereksiz yere aynı büyük dosyayı indirmek verimsiz olabilir.

srcset ne işe yarar?

srcset bir görselin farklı çözünürlüklü sürümlerini tarayıcıya bildirir.

sizes ne işe yarar?

sizes görselin farklı ekran koşullarında yaklaşık ne kadar genişlikte görüntüleneceğini tarayıcıya anlatır.

WordPress 4.4 sürümünden itibaren uygun görsel çıktılarında bu özellikleri otomatik oluşturabilir.

picture etiketi ne işe yarar?

picture etiketi farklı görsel formatları arasında tarayıcıya uygun kaynak seçimi yapma olanağı sağlayabilir.

Aşağıdaki örnek teknik yapıyı göstermek içindir. Gerçek dosya URL’leri içermez.

<picture>
  <source
    srcset="/ornek/kapak.avif"
    type="image/avif">

  <source
    srcset="/ornek/kapak.webp"
    type="image/webp">

  <img
    src="/ornek/kapak.jpg"
    alt="Web sitesi kapak görseli"
    width="1200"
    height="675">
</picture>

Bu örnekte destekleyen tarayıcı AVIF kaynağını, uygun değilse WebP kaynağını, gerektiğinde JPEG yedeğini kullanabilir.

Not: Yukarıdaki kod doğrudan çalışan bir görsel değildir. Dosya yollarının gerçek medya adresleriyle değiştirilmesi gerekir.

Farklı cihaz çözünürlükleri nasıl bildirilir?

<img
  src="/ornek/urun-800.webp"
  srcset="
    /ornek/urun-400.webp 400w,
    /ornek/urun-800.webp 800w,
    /ornek/urun-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Ürün fotoğrafı"
  width="1200"
  height="800">

Gerçek WordPress projelerinde tema veya görsel bileşeni tarafından zaten oluşturulan srcset ve sizes alanlarını gereksiz yere çoğaltmayın.

WebP ve AVIF Site Hızını ve Core Web Vitals Değerlerini Nasıl Etkiler?

WebP ve AVIF görseller dosya boyutunu azaltarak ağ üzerinden aktarılması gereken veri miktarını düşürebilir.

Bu durum özellikle yavaş bağlantılarda ve çok görselli sayfalarda yararlı olabilir.

Ancak sayfa hızı tek bir dosya formatına bağlı değildir.

LCP ve büyük görseller

Largest Contentful Paint (LCP), sayfanın görünen alanındaki en büyük içerik öğesinin ne zaman oluşturulduğunu değerlendiren performans metriğidir.

Ana sayfadaki büyük hero fotoğrafı bazı sayfalarda LCP öğesi olabilir.

Bu nedenle görselin sıkıştırılması, uygun boyutta sunulması ve tarayıcı tarafından erken keşfedilmesi önemlidir.

Hero görseline lazy loading uygulanmalı mı?

Genellikle sayfanın ana LCP görseline loading="lazy" uygulanması önerilmez.

Çünkü görselin yüklenmesinin geciktirilmesi LCP süresini olumsuz etkileyebilir.

Daha aşağıdaki ve henüz görüntülenmeyen görsellerde ise uygun lazy loading yararlı olabilir.

fetchpriority kullanımı

Bazı durumlarda kritik görsele fetchpriority="high" uygulanması tarayıcının kaynak önceliğini belirlemesine yardımcı olabilir.

Ancak bütün görsellere yüksek öncelik vermek doğru bir strateji değildir.

Görsel boyutları CLS’yi etkiler mi?

Evet. Görsel için alan ayrılmaması sayfa yüklenirken içeriklerin beklenmedik biçimde yer değiştirmesine yol açabilir.

Bu nedenle görselin width ve height bilgileri veya uygun aspect-ratio kullanımı önemlidir.

LCP, INP ve CLS metriklerinin daha geniş açıklaması için Core Web Vitals ve web sitesi hızlandırma rehberimizi inceleyebilirsiniz.

WebP ve AVIF Kullanımı SEO’yu Doğrudan İyileştirir mi?

Modern görsel formatlarının kullanılması sayfanın veri yükünü azaltabilir ve kullanıcı deneyimini destekleyebilir.

Ancak yalnızca görsellerin AVIF veya WebP olması, Google’da belirli sıralama kazanılacağını garanti etmez.

Görsel SEO için başka neler gerekir?

• Görselin sayfa konusuyla ilişkili olması.
• Anlamlı dosya isimleri kullanılması.
• Bilgilendirici görseller için uygun alternatif metin yazılması.
• Gerçek ürün ve hizmetlerin doğru gösterilmesi.
• Görselin tarayıcı ve arama motorları tarafından erişilebilir olması.
• Uygun çözünürlük ve yükleme yönteminin kullanılması.
• Sayfada görselin çevresindeki metin bağlamının güçlü olması.

Alt metin nasıl yazılmalı?

Alternatif metin, görselin önemli içeriğini ilgili bağlamda açıklamalıdır.

Yalnızca anahtar kelime tekrarı yapmak için oluşturulan metinler yararlı değildir.

Dosya formatları ve sayfa performansı birlikte değerlendirilse de SEO stratejisi bundan daha geniş bir süreçtir.

Web Sitesi Görsellerinde Yapılan 8 Yaygın Optimizasyon Hatası

WordPress Görsel Optimizasyonu Kontrol Listesi

WebP ve AVIF Hakkında Sıkça Sorulan Sorular

Sonuç: Doğru Görsel Formatı, Kalite ve Performans Arasında Denge Kurar

WebP ve AVIF, web sitesi görsellerini optimize etmek isteyen işletmeler için önemli seçeneklerdir.

Bununla birlikte JPEG, PNG ve SVG formatları da farklı kullanım amaçları için değerini korumaktadır.

Web sitesi için en doğru görsel formatı, görselin kullanım amacı, ihtiyaç duyulan kalite, dosya boyutu, tarayıcı desteği ve teknik altyapı birlikte değerlendirildiğinde belirlenir.

WordPress sitelerinde görsellerin doğru hazırlanması kadar tema, hosting ve görsel sunum altyapısının uyumu da önemlidir.

Web sitesi geliştirme ve medya yönetimi hakkında WordPress web tasarım hizmetleri sayfamızı inceleyebilirsiniz.

Görsel optimizasyonunun site hızına etkisini daha ayrıntılı değerlendirmek için web sitesi hızlandırma ve Core Web Vitals rehberimizi okuyabilirsiniz.