Görsel Format Seçme Rehberi — Hangi Format Ne Zaman?
Doğru görsel formatı seçmek, dosya boyutunu, kaliteyi ve tarayıcı uyumluluğunu doğrudan etkiler. Bu rehberde JPEG, PNG, WebP ve AVIF arasında karar vermenize yardımcı olacak bir karar ağacı ve karşılaştırma tablosu sunuyoruz.
Karar Ağacı
Şeffaflık gerekiyor mu? Evet ise PNG veya WebP kullanın; WebP daha küçük dosyalar üretir. Hayır ise fotoğraf mı? Fotoğraflar için JPEG, WebP veya AVIF uygundur; AVIF en iyi sıkıştırma, WebP geniş destek sunar. Logo veya keskin kenarlı grafik mi? PNG veya WebP (kayıpsız) tercih edin. Animasyon gerekiyorsa WebP animasyon veya GIF düşünün.
Format Karşılaştırma Tablosu
JPEG: Kayıplı, şeffaflık yok, fotoğraflar için ideal, evrensel destek. PNG: Kayıpsız, şeffaflık var, logo/grafik için, evrensel destek. WebP: Kayıplı/kayıpsız, şeffaflık var, fotoğraf ve grafik, modern tarayıcılar. AVIF: Kayıplı/kayıpsız, şeffaflık var, en iyi sıkıştırma, Safari 16+ ve diğer güncel tarayıcılar. Tarayıcı desteği kritikse WebP güvenli seçenektir; maksimum sıkıştırma için AVIF ile fallback kullanın.
Kullanım Senaryoları
E-ticaret ürün fotoğrafı: WebP veya JPEG, kalite 80–85. Blog kapak görseli: WebP, kalite 80. Logo (şeffaf arka plan): PNG veya WebP kayıpsız. Hero / tam genişlik görsel: WebP veya AVIF (picture ile fallback). İkon seti: PNG-8 veya WebP. Ekran görüntüsü: PNG veya WebP. Detaylı senaryolar için görsel boyutu azaltma ve web için görsel hazırlama rehberlerimize bakın.
Fallback Stratejisi
<picture> ile AVIF → WebP → JPEG/PNG zinciri kurarak tüm tarayıcılara uygun format sunulabilir. En iyi formatı destekleyen tarayıcı ilk uyumlu kaynağı indirir. Bu yapı ile eski tarayıcılar da çalışır. Sıkıştırma aracımızla birden fazla format üretip manuel veya otomatik picture etiketleri oluşturabilirsiniz.
Özet
Genel kural: Fotoğraf için WebP veya JPEG, şeffaflık için WebP veya PNG, en iyi sıkıştırma için AVIF (fallback ile). Kayıplı vs kayıpsız seçiminde kalite ihtiyacına göre karar verin. Projenize göre tek format veya picture ile çoklu format sunabilirsiniz.
Görsellerinizi hemen optimize edin.
Sıkıştırma Aracına Git →