WebP, PNG, JPG: hangi görsel formatını kullanmalısınız?
Aynı fotoğraf PNG olarak 900 KB, JPG olarak 180 KB, WebP olarak 120 KB olabilir ve üçü de ekranda birebir aynı görünebilir. Format seçimi sayfa hızı için yapabileceğiniz en yüksek etkili iş, ancak çoğu site tek bir formatı seçip her yüklemeye uygular.
Üç format aslında nasıl farklılaşıyor
JPG, fotoğraflar için tasarlanmış kayıplı bir formattır. 8x8 piksellik blokları teker teker analiz eder, gözün en duyarlı olduğu bilgiyi korur ve kalanını atar. Bu yüzden bir fotoğraf 150 KB'lık JPG olarak gayet iyi görünürken bir hesap tablosu ekran görüntüsü lahana gibi olur.
PNG kayıpsızdır; her pikseli birebir yeniden üretir ve tam alfa saydamlığı destekler. Ekran görüntüleri, logolar, ikonlar ve keskin metin ya da düz renk içeren her şey buraya aittir. Bedeli dosya boyutudur: fotoğraf içerikli bir görsel PNG olarak çoğu zaman JPG'nin üç ila beş katı büyüktür.
WebP, Google'ın formatıdır; hem kayıplı hem kayıpsız çalışabilir, ayrıca saydamlık ve animasyon destekler. Karşılaştırılabilir kalite ayarında JPG'ye göre tipik olarak yüzde 25 ile 35 arasında tasarruf sağlar ve güncel tüm tarayıcılar destekler. Tek zayıf yanı, eski tasarım araçlarının ve bazı görsel işleme hatlarının okuyamamasıdır.
- JPG: fotoğrafta en küçük, saydamlık yok, kayıplı.
- PNG: piksel birebir ve saydam, dosya boyutu en büyük.
- WebP: kayıplı veya kayıpsız, saydam, animasyonlu, JPG'den yüzde 25–35 daha küçük.
Hangi görsel için hangi format
Karar zevk meselesi değil. Görselin içinde ne olduğuna bakın. Gerçek dünyadan bir fotoğrafsa JPG ya da WebP kullanın. Metin, grafik, logo veya arayüz içeriyorsa PNG ya da kayıpsız modda WebP kullanın.
Her yerde çalışması gereken bir site için en güvenli yüksek performanslı kurulum, WebP'i JPG yedeğiyle servis etmek ve yalnızca gerçekten saydamlık gerektiren görsellerde PNG tutmaktır. WebP'i anlamayan tarayıcılar yeterince eski olduğundan yedek size neredeyse hiç maliyet getirmez.
Yanlış yönde ilerlemeye dikkat edin. CSS arka planı <picture> öğesi kullanamaz; dolayısıyla orada saydamlık önemliyse tarayıcıya bir yedek bildiremeyeceğiniz bir formata güvenmek yerine PNG servis edin.
- Gerçek sahne fotoğrafı → WebP, JPG yedeğiyle.
- Ekran görüntüsü, grafik, logo, metin → PNG veya kayıpsız WebP.
- Saydamlık gerekiyor → PNG ya da tarayıcı desteğini doğruladıysanız WebP.
Görünür kalite kaybı olmadan boyutu düşürmek
Boyuttaki kazancın büyük kısmı agresif sıkıştırmadan değil, doğru formatı seçmekten gelir. Büyük bir PNG ekran görüntüsünü JPG'ye çevirmek dosyayı küçültebilir ama daha kötü gösterir. Aynı ekran görüntüsünü kayıpsız modda WebP'ye çevirmek genellikle hem daha küçük hem piksel birebir aynıdır.
Fotoğraflarda WebP ve JPG için 75 ile 85 arasındaki kalite ayarları ideal noktadır: dosyalar bir kamera orijinaline göre tipellikle yarıya veya daha fazla düşer ve normal görüntüleme boyutunda fark görünmez. 70'in altına indiğinizde yüzlerde ve gökyüzü gibi düz alanlarda bloklaşma görmeye başlarsınız.
Format kadar ölçüler de önemlidir. 4000 piksellik bir görseli 800 piksel gösteren bir telefona servis etmek, hiçbir kodek’in geri kazandıramayacağı megabaytlık israftır. En büyük gösterim boyutunun kabaca iki katına, CSS pikseli cinsinden küçültün ve sonra dönüştürün — Görsel Yeniden Boyutlandırıcı ve Görsel Sıkıştırıcı her iki adımı da halleder.
- Doğru format, agresif sıkıştırmadan her zaman üstündür.
- Fotoğrafta kalite 75–85; metin ve düz renkte daha yüksek.
- Dönüştürmeden önce gösterim boyutunun yaklaşık 2 katına küçültün.