Web İçin Görsel Formatları: JPG, PNG, WebP ve AVIF Hangisi Ne Zaman Kullanılır?
Bir web sitesinin yavaşlamasının en yaygın nedeni, gereğinden büyük görsellerdir. Doğru formatı seçmek ve görseli doğru boyutta yüklemek, sayfa hızını ve arama motoru performansını doğrudan iyileştirir. Bu rehber her formatın güçlü yönünü ve nerede kullanılacağını anlatır.
Formatların Kısa Karşılaştırması
- JPG (JPEG): Fotoğraflar için standarttır. Kayıplı sıkıştırma kullanır; küçük dosya boyutu sağlar ama keskin kenarlı grafiklerde ve metinlerde bozulma yapar. Şeffaflığı desteklemez.
- PNG: Kayıpsızdır ve şeffaflığı destekler. Logo, ikon, ekran görüntüsü ve keskin çizgili grafikler için idealdir; fotoğraflarda ise çok büyük dosyalar üretir.
- WebP: Hem kayıplı hem kayıpsız sıkıştırmayı ve şeffaflığı destekler. Aynı kalitede genellikle JPG ve PNG'den daha küçük dosya üretir; modern tarayıcıların hepsi destekler.
- AVIF: Daha yeni ve çoğu durumda WebP'den bile daha verimli bir formattır. Kodlaması yavaştır ve bazı eski araçlar desteklemeyebilir.
- SVG: Vektör biçimidir; logo ve ikonlarda çözünürlükten bağımsız, çok küçük dosyalar sunar.
Hangi Görselde Hangi Format?
Pratik bir karar sırası:
- Logo, ikon ve basit çizim: Mümkünse SVG; değilse şeffaflık için PNG veya WebP.
- Fotoğraf: WebP veya AVIF; uyumluluk gerekiyorsa JPG yedeği.
- Şeffaf arka planlı ürün fotoğrafı: WebP (şeffaflık destekli) veya PNG.
- Ekran görüntüsü ve yazılı grafik: PNG veya kayıpsız WebP; JPG metin kenarlarını bulanıklaştırır.
Önce Boyutu, Sonra Sıkıştırmayı Düşün
Sıkıştırmadan önce görselin gerçek piksel boyutuna bak. Sayfada 800 piksel genişliğinde görünecek bir görseli 4000 piksel olarak yüklemek, dosya boyutunu gereksiz yere 10-25 kat artırır. Önce görseli gösterileceği en büyük boyutun (yüksek çözünürlüklü ekranlar için en fazla 2 katının) ölçüsüne küçült, sonra sıkıştır.
Fotoğraflarda JPG veya WebP için kalite ayarını yaklaşık 75-85 aralığında tutmak çoğu zaman görünür kayıp olmadan dosya boyutunu belirgin biçimde azaltır. Bir görseli birçok kez kayıplı olarak kaydetmek kalite kaybını biriktirir; her zaman orijinalden çıkış yap.
Site Hızı ve SEO Açısından Dikkat Edilecekler
- Görsellerin width ve height özelliklerini tanımla; sayfa yüklenirken içeriğin kaymasını (CLS) önler.
- Ekranın altında kalan görsellerde yavaş yükleme (lazy loading) kullan; sayfa ilk açılışta daha hızlı olur.
- Dosya adlarını anlamlı yaz: urun-kirmizi-ayakkabi.webp, IMG_4821.jpg'den çok daha iyidir.
- Alt metin (alt) ekle; hem erişilebilirlik hem arama motorları için görselin ne olduğunu açıklar.
- Sayfa başındaki ana görseli (hero) diğerlerinden önce yüklemeye öncelik ver ve boyutunu özellikle küçük tut.
Toplu İşlemde İş Akışı
Çok sayıda görselin varsa aynı sırayı her görsele uygula: önce boyutlandır, sonra uygun formata çevir ve sıkıştır, en son kontrol et. Tarık Tools'taki görsel boyutlandırma ve sıkıştırma araçlarıyla bunu tarayıcıdan yapabilir, ardından sonucu yan yana karşılaştırarak yüzde kaç küçüldüğünü görebilirsin.
Sıkça Sorulan Sorular
WebP her yerde çalışıyor mu?
Güncel tarayıcıların tamamı WebP'yi destekler. Çok eski sistemler için JPG yedeği ekleyebilirsin; çoğu site için bu artık gerekli değildir.
Sıkıştırma görseli bozar mı?
Kayıplı sıkıştırmada aşırı ayar bozulma yaratır. Orta düzeyde ayarlarda fark genellikle gözle görülmez; sonucu %100 yakınlaştırarak kontrol et.
PNG neden bu kadar büyük?
PNG kayıpsızdır; fotoğraflardaki karmaşık ayrıntıyı olduğu gibi saklar. Fotoğraf için JPG veya WebP kullanmak boyutu ciddi biçimde düşürür.