İki görsel, aynı sahneden çekilmiş. Biri 890 KB, diğeri 76 KB. Ekranda yan yana bakınca farkı ayırt etmek neredeyse imkânsız. Buna karşın birincisini yükleyen sayfa, kullanıcıyı ikincisine göre çok daha uzun süre bekletiyor.
Bu fark daha pahalı bir araçtan gelmiyor. Birkaç karardan: hangi format kullanılacak, lossy mu lossless mı tercih edilecek, kalite değeri nerede tutulacak ve işlem tek seferlik mi süreklimi olacak. Bu kararların her biri bağımsız bir seçim noktasıdır. Birini doğru yapıp diğerini yanlış yapmak, gerçek boyut kazancını engelleyebilir.
Resim optimizasyonunun SEO açısından neden bu denli belirleyici olduğunu önceki yazıda ele aldık. Bu yazı sıkıştırma sürecinin pratik adımlarına odaklanıyor: format kararından kalite eşiğine, araç seçiminden toplu işlem mantığına kadar.
Sıkıştırmadan önce: hangi format?
Yanlış formatla başlandığında en iyi sıkıştırma algoritması bile yeterince yardımcı olamaz. Format seçimi, sıkıştırma kararının önünde gelir.
JPEG, fotoğraflar ve renk geçişleri yoğun görseller için doğal tercih. Lossy çalışır; renk bilgisinin bir kısmını kalıcı olarak atar, buna karşılık dosya boyutunu önemli ölçüde düşürür. Şeffaflık desteklemez. Net kenarlı logolar veya metin içeren görsellerde artefakt sorunu belirginleşir — özellikle yüksek kontrastlı kenarlarda piksel blokları görünür hale gelir.
PNG lossless çalışır. Şeffaflık gerektiren görsellerde, ikonlarda ve metin içeren grafiklerde öncelikli seçenektir. Fotoğrafları PNG olarak kaydetmek ise tam tersi sonuç üretir: dosya boyutu küçülmez, şişer.
WebP ikisinin ortasında duruyor. Lossy modda JPEG'den yaklaşık %25-35 daha küçük çıktı üretir; lossless modda PNG benzeri sonuç verir ve şeffaflığı destekler. Modern tarayıcıların tamamı WebP'yi destekliyor. Yeni projeler için varsayılan tercih olarak düşünülebilir.
Format seçimi ve dönüştürme kararlarını daha ayrıntılı ele alan format dönüştürme rehberinde, hangi senaryoda hangi formatın öne çıktığını karşılaştırmalı olarak bulabilirsiniz.
Lossy ve lossless: fark nedir, hangisi ne zaman
Lossy sıkıştırma görsel veriden bir bölümü kalıcı olarak atar. Bir kez kaydedilmiş lossy görsel tekrar açılıp sıkıştırılırsa bu sefer sıkıştırılmış sürüm yeniden işlenir ve kalite kaybı birikir. Bu nedenle kaynak dosyayı — orijinal RAW, PSD veya yüksek kaliteli TIFF'i — ayrı korumak önemlidir. Web için çıktı alındığında bir kez sıkıştırıp bırakmak yeterlidir.
Lossless sıkıştırma hiçbir piksel verisini atmaz; yalnızca aynı içeriği daha verimli bir biçimde kodlar. Dosyayı açtığınızda her piksel birebir korunmuş halde gelir. Boyut kazancı lossy'den azdır ama kayıp yoktur.
Hangi senaryoda hangisi:
- Fotoğraf, gerçekçi görsel → lossy (JPEG veya WebP lossy)
- Logo, ikon, şeffaf PNG → lossless (PNG veya WebP lossless)
- Ürün görseli, renk hassasiyeti kritikse → yüksek kaliteli lossy ya da lossless
- Hero görseli, LCP bileşeni → lossy, kalite eşiği yüksek tutularak
- Animasyon, GIF yerine geçecek içerik → WebP animasyon
Kalite eşiği nerede durur
JPEG için kalite parametresi 1-100 arasında değişir. 100 ile 85 arasındaki fark gözle algılanmaz ama dosya boyutunda %30-40 arası bir fark çıkabilir. 60'ın altına inildiğinde blok artefaktlar çoğu görselde belirgin hale gelir.
Başlangıç noktası olarak pratikte kabul gören aralık %80-85. Düzgün renk geçişli, düşük kontrastlı fotoğraflarda %75 de makul sonuç verir. Ürün fotoğrafları, mimari çekimler veya renk doğruluğunun kritik olduğu içeriklerde %85 altına inmemek daha güvenlidir. Aynı görsel iki farklı kalitede test edildiğinde, çoğu zaman fark ancak %70 civarında görünür hale gelir — bu, %80-85 aralığının neden mantıklı bir başlangıç noktası olduğunu somutlaştırır.
WebP için eşdeğer değer yaklaşık %80 civarındadır. Bu kalitede JPEG %85 ile neredeyse aynı görsel sonucu verir ama dosya boyutu genellikle daha küçük kalır. Fotoğraf içerikli web görselleri için %75-80 arası makul bir hedef aralıktır.
PNG'de "kalite" parametresi yoktur. Sıkıştırma seviyesi (0-9) yalnızca encode süresini etkiler, dosya boyutunu değil — çünkü lossless çalışır. PNG'de asıl boyut azaltımı renk kanalını düşürerek sağlanır. Şeffaflık gerekmiyorsa ve renk sayısı sınırlıysa 8-bit palete geçmek boyutu yarıya yakın düşürebilir.
Bir eşiği belirlemek için en pratik yöntem: orijinali sıkıştırılmış versiyonla yan yana koymak. Farkı göremiyorsanız biraz daha düşürün. Görünürse bir adım geri çıkın. Bazı araçlar SSIM (Structural Similarity Index) skoru hesaplar; bu metrik, kalite kaybını piksel düzeyinde sayısal olarak raporlar ve öznel kararı nesnel bir veriyle destekler.
Araç seçimi: online mu, lokal mi?
Online araçlar kurulum gerektirmez ve çoğu ortamda hızlıca çalıştırılabilir. Az sayıda görseli ara sıra optimize etmek için uygundur. Asıl soru gizlilikte: yüklenen görsel işlenmek için servisin sunucularına iletilir. Ticari ürün fotoğrafları veya yayınlanmamış içerikler için bu, politikayı önceden okumayı gerektirir.
Resim sıkıştırma aracı, sıkıştırmayı istemci tarafında, tarayıcıda gerçekleştirir. Görsel dışarıya gönderilmez. Hassas ürün görsellerini veya müşteri fotoğraflarını işlemek isteyenler için bu fark pratikte önemlidir.
Masaüstü uygulamalar ve komut satırı kütüphaneleri (cwebp, pngquant, mozjpeg, libvips gibi) daha fazla kontrol ve toplu işlem imkânı sunar. Derleme sürecine ya da bir betik zincirine eklenebildiklerinden CI/CD entegrasyonu, görsel optimizasyonunu otomatik bir adıma dönüştürür. Tek dezavantajı kurulum ve yapılandırma maliyetidir.
Toplu işlem ve iş akışına entegrasyon
Tek görsel elle sıkıştırmak yönetilebilir. Yüzlerce ürün görseli içeren bir katalog ya da düzenli içerik yayınlayan bir blog için elle yapılan optimizasyon zamanla boşluk bırakmaya başlar. Atlanmış görsel, sayfanın geri kalanı ne kadar iyi optimize edilmiş olursa olsun LCP süresini tek başına yükseltebilir.
Toplu işlemde iki temel yaklaşım var: yükleme öncesi ve yükleme sonrası.
Yükleme öncesi optimizasyon, görseli sunucuya göndermeden önce işler. Bir derleme aracı (Gulp veya Webpack tabanlı bir pipeline) ya da masaüstü toplu işlem uygulaması bu görevi üstlenir. Sunucudaki depoya zaten optimize görsel gider; ham dosya sistemde yer tutmaz.
Yükleme sonrası optimizasyon ise CMS veya CDN katmanında gerçekleşir. WordPress'te bu işi üstlenen eklentiler, yüklenen görseli otomatik sıkıştırır. CDN tabanlı çözümler istemciye göre doğru format ve boyutu sunabilir. Dezavantajı, ham görselin hâlâ sunucuda yer kaplamasıdır.
Neye ihtiyacınız olduğunu belirleyen iki soru: kaç görsel ekleyeceksiniz ve ne sıklıkla? İş akışınızda otomasyona ne kadar yer var? Bunların yanıtı, yükleme öncesi mi sonrası mı sorusunu çoğu zaman kendiliğinden çözer.
Optimizasyon sonrasında sayfanın gerçek hız etkisini ölçmek istiyorsanız, performans analizi yaparak hangi görsellerin LCP süresini hâlâ etkilediğini somut verilerle görebilirsiniz.
Resim sıkıştırma tek seferlik bir adım değil. Format kararı, yöntem seçimi, kalite eşiği ve iş akışı entegrasyonu — bunlar bir araya geldiğinde sonuç, görünür kalite farkı olmadan dosya boyutunda beş ila on kat küçülme olabilir. Her proje bu dengeyi farklı bir noktada kurar; fotoğraf galerisi için makul olan parametre seti, e-ticaret ürün görsellerine doğrudan uygulanamaz. Ama temel yapı değişmiyor: önce format, sonra yöntem, sonra eşik, son olarak ölçek.