WebP mi AVIF mi? Kendi Sitemde Görsel Yüklemeyi Nasıl Ayarladım

JPEG ve PNG yüklemelerinden hazırladığım WebP ile AVIF dosyalarını iki gerçek ekran görüntüsünde karşılaştırıyor, dönüşüm kuralını ve ölçümün sınırlarını açıklıyorum.

Aynı 1440 × 1000 PNG ekran görüntüsünün kaynak, WebP ve AVIF dosya boyutlarını karşılaştıran grafik.
Gerçek bir 1440 × 1000 PNG ekran görüntüsünün aynı genişlikteki dosya boyutları; değerler bu örneğe aittir.

JPEG veya PNG dosyasını WebP ya da AVIF'e dönüştürmek, her görseli otomatik olarak daha iyi yapmaz. Aynı piksel ölçüsündeki dosya boyutunu ve görselin okunurluğunu birlikte değerlendirmek gerekir. Burada ZiyaBilgin.com'un görsel yükleme akışını ve iki gerçek ekran görüntüsünde ölçtüğüm sonuçları paylaşıyorum.

Yazının kısa videosu

Sitem bir görsel yüklenince ne yapıyor?

Yönetim paneli gerçek JPEG ve PNG dosyalarını kabul ediyor. Sınır 12 MB ve 12 megapiksel. Görselin genişliğine göre 480, 960, 1600 ve en çok 1920 piksel genişlikte kopyalar hazırlanıyor; kaynaktan daha büyük bir kopya üretilmiyor. Her uygun boyutta WebP oluşturuluyor.

Sunucuda AVIF desteği varsa AVIF de deneniyor. Tüm boyutlarda üretilebilmişse ve en büyük AVIF kopyası aynı boyuttaki WebP'den en az yüzde 10 küçükse AVIF kopyaları saklanıyor. Bu benim sitemde seçtiğim pratik eşik; her görsel için evrensel bir kural değil.

İki gerçek ekran görüntüsünde ne ölçtüm?

İlk yazımda kullandığım 1251 × 774 piksellik JPEG kaynağı 82.805 bayt. Aynı boyuttaki WebP 34.202 bayt, AVIF 22.321 bayt. Bu tek örnekte AVIF, WebP'den yaklaşık yüzde 35 küçük olduğu için saklandı.

İkinci örnek, 23 Eylül 2026 tarihli yerel Lighthouse raporumun 1440 × 1000 piksellik PNG ekran görüntüsü. Kaynak 91.473 bayt, yani 89,33 KiB. Hostinger dosya yöneticisinin yuvarlanmış değerlerine göre aynı 1440 piksel genişlikte WebP 45,51 KiB, AVIF 31,01 KiB oldu. Bu örnekte WebP kaynak PNG'den yaklaşık yüzde 49, AVIF yaklaşık yüzde 65 küçük. AVIF, WebP'den yaklaşık yüzde 32 küçük olduğu için 480, 960 ve 1440 piksel boyutlarının ikisi de saklandı.

İki örnek de ekran görüntüsü ağırlıklı. Fotoğraflarda sonuçlar farklı olabilir. Dosya küçülmesi, küçük yazıların okunabilir kaldığını tek başına kanıtlamaz. Bu yüzden kapakta rakamları büyük yazdım ve gerçek rapor görüntüsündeki küçük metinleri ayrı değerlendirdim.

Ziyaretçiye hangi dosya gidiyor?

Yazı sayfasının kapak görseli AVIF ve WebP seçeneklerini tarayıcıya sunuyor. Tarayıcı desteklediği biçimi ve ekrana uygun genişlikteki kopyayı seçiyor. Özgün dosya halka açık medya klasöründe değil, özel depoda tutuluyor. Yönetim paneline yüklenen görsel, yazıda ancak kapak olarak seçilip kaydedilirse görünüyor.

Kendi sitende nasıl karar verebilirsin?

  • Aynı görselin aynı piksel ölçüsündeki dosyalarını karşılaştır.
  • Metni, ince çizgileri ve fotoğraf ayrıntılarını gerçek ekranda incele.
  • Telefon ve masaüstünde gerçekten indirilen dosyayı tarayıcının ağ panelinde kontrol et.
  • Görseli ekledikten sonra ilgili sayfayı yeniden ölç; başka sayfanın Lighthouse sonucu garanti değildir.

Kaynaklar ve hazırlık notu

Bu yazı, ZiyaBilgin.com görsel işleme kodu ve kendi yüklediğim dosyalar incelenerek yapay zekâ desteğiyle hazırlandı. Kısa video sessizdir; ölçüm kartları ekranda yazılıdır. Dosya boyutu sonuçları iki ekran görüntüsüne aittir, fotoğraflar için genellenemez.

WhatsApp