Squoosh ile Tarayıcıda Görsel Optimizasyon

Arayüzün iki yarısı ve ortadaki kaydırıcı

Squoosh'u açtığınızda ekran yatay ikiye bölünüyor. Sol taraf orijinal dosyayı gösteriyor; sağ taraf ise seçtiğiniz encoder ve ayarlarla oluşturulan çıktıyı. İki panel arasındaki dikey çizgiyi sürükleyerek görselleri doğrudan karşılaştırabilirsiniz. Yakınlaştırma yapıldığında da karşılaştırma aynı şekilde çalışıyor; sıkıştırma bozuklukları (artifact) zaten büyütünce görünür hale geliyor.

Alt kısımda iki ayrı boyut göstergesi var. Soldaki orijinal dosya boyutunu, sağdaki tahmini çıktı boyutunu gösteriyor. Ayar değiştirdikçe sağdaki sayı anında güncelleniyor; kaydırıcıyı indirdikçe ne kadar kazanıldığını görüyorsunuz. Yüzde olarak fark da gösteriliyor, ancak bu rakamı bağımsız bir hedef olarak değil, ayar kararınızın sonucu olarak okuyun.

Sağ panelin altında küçük bir açılır liste var; bu liste encoder seçimini yapıyor. Varsayılan olarak MozJPEG geliyor. WebP, AVIF, PNG, OxiPNG gibi seçenekleri buradan değiştirebilirsiniz. Format seçimi kalite kaydırıcısından bağımsız bir etki yaratıyor; aynı kalite değerinde AVIF çıktısı, MozJPEG çıktısından belirgin şekilde daha küçük olabiliyor.

Format seçimi: encoder'ı değiştirmenin etkisi

Her encoder'ın farklı bir sıkıştırma algoritması var ve çıktıları birbirinden ayrışıyor. Squoosh'ta en çok karşılaşılacak seçenekler şunlar:

MozJPEG, standart JPEG'i geliştiren bir encoder. Aynı kalite değerinde daha küçük dosya üretiyor ve çıktı her tarayıcıda açılıyor. Eski sistemlerle uyumluluk öncelikliyse veya JPEG kabul eden bir platform için içerik hazırlanıyorsa bu seçenek hâlâ geçerli. JPEG'in alfa kanalı desteği yoktur; şeffaf arka plan gereken görsellerde MozJPEG çıkış yapar.

WebP, JPEG'e kıyasla daha iyi sıkıştırma sunan ve şeffaflığı destekleyen bir format. Kayıplı (lossy) ve kayıpsız (lossless) modları arasında seçim yapabilirsiniz. Modern tarayıcıların tamamı WebP'yi açıyor; ancak bazı eski e-posta istemcileri ve sosyal medya platformları WebP görselleri doğru işlemiyor. Geniş dağıtım ortamlarında bunu göz önünde bulundurun.

AVIF, şu an için en yüksek sıkıştırma verimliliğine sahip format. Benzer görsel kalitesi için WebP'ye göre daha küçük dosyaya ulaşılabiliyor. Ödünleşme açıktır: işlem süresi uzuyor. Büyük görsellerde Squoosh tarayıcıda birkaç saniye hesaplıyor; bu mobil cihazda daha da uzayabiliyor. Tarayıcı desteği son yıllarda genişledi, ama çok eski Android sürümleri AVIF'i açamıyor.

PNG ve OxiPNG, kayıpsız sıkıştırma seçenekleri. Ekran görüntüleri, ikonlar, şeffaf arka planlı arayüz grafikleri için doğru seçim. Fotoğraflara uygulandığında gereksiz büyük dosyalar çıkıyor; PNG'nin bu senaryoda avantajı yok. OxiPNG, Rust tabanlı daha hızlı bir alternatif; ikisi de kayıpsız çalışıyor, OxiPNG genellikle işlemi daha kısa sürede tamamlıyor.

Format seçiminin temel kriteri şu: görselde şeffaflık var mı? Varsa JPEG dışı bir format gerekiyor. Şeffaflık yoksa ve uyumluluk öncelikliyse MozJPEG; modern tarayıcılar hedefleniyorsa WebP veya AVIF daha verimli.

Kalite kaydırıcısı: sayı değil denge

Kalite kaydırıcısı 0'dan 100'e uzanıyor. Yüksek değer kaliteyi koruyor, düşük değer dosyayı küçültüyor. Ama "75 her zaman yeterli" gibi bir kural yok; formata ve görselin içeriğine göre değer farklılaşıyor.

MozJPEG için yaygın başlangıç noktası 75-80 aralığı. Bu değerin altına inildiğinde, özellikle düz renk geçişleri ve metin içeren görsellerde blok yapısı (blocking artifact) başlıyor; 60'ın altında çoğu görselde bozulma gözle görülür hale geliyor. Yüksek ayrıntı gerektiren ürün veya mücevher fotoğraflarında 80-85 arasında durmak daha doğru. Gökyüzü ve duman gibi düzgün gradyan içeren sahnelerde ise 70'in altında bantlanma (banding) beliriyor.

WebP'de benzer kalite değerleri MozJPEG'e göre genellikle daha küçük dosya üretiyor; yani 75 WebP, 75 MozJPEG'den hem küçük hem de görsel olarak yakın çıkabiliyor. AVIF'te kaydırıcı 60-70 arasında bile yeterince iyi sonuç verdiği oluyor, çünkü algoritma ayrıntıları farklı şekilde kodluyor. Kendi görselinizde deneyerek nerede bozulma başladığını izleyin; sayıyı körü körüne sabitlemek yerine gözün aldığı noktayı bulun.

Kaydırıcının tam altında, bazı formatlarda ek seçenekler çıkıyor. MozJPEG'de "progressive rendering" (aşamalı yükleme) seçeneği var; etkinleştirildiğinde görsel önce bulanık yükleniyor, sonra netleşiyor. Web için faydalı olabilir, ancak bazı platformların bu modu desteklemediği durumlar var. WebP'de "lossless" ve "near-lossless" modları arasında seçim yapabilirsiniz; near-lossless kayıpsıza yakın kaliteyi daha küçük dosyayla sunuyor.

Resize: piksel boyutunu düşürmek

Squoosh'ta sol paneldeki "Resize" bölümü ayrı çalışıyor. Encoder ayarlarından bağımsız olarak görselin piksel boyutlarını değiştirebilirsiniz. Genişlik ve yükseklik alanlarına değer girildiğinde varsayılan olarak oranlar korunuyor.

Yeniden örnekleme (resampling) yöntemi açılır listesinden seçiliyor. Lanczos3, ayrıntıları koruma açısından en iyi sonucu veren seçenek; küçültme işlemlerinde çoğu durumda tercih edilir. Mitchell ve Catmull-Rom da benzer kalitede çalışıyor. "Triangle" ve "Box" daha hızlı hesaplıyor ama ayrıntı kaybı daha belirgin oluyor; tahmini önizleme için işe yarıyor, yayın için değil.

Büyük boyutlu görseli kalite kaydırıcısıyla küçültmeye çalışmak yerine önce boyutu düşürmek, ardından encoder ayarını yapmak daha mantıklı. 3000 piksel genişliğindeki bir görseli web için 1200 piksele indirip sonra WebP'ye çevirmek, hem dosya boyutunu belirgin şekilde düşürüyor hem de görsel kalitesi üzerindeki kontrolü artırıyor.

Metadata ve renk profili

Sağ panelin alt kısmında "Options" içinde metadata seçenekleri yer alıyor. Çoğu durumda üç seçenek var: tüm metadata'yı sil, yalnızca renk profilini koru veya tümünü koru.

Kamera görselleri EXIF verisi taşıyor: çekim tarihi, GPS koordinatları, cihaz modeli, lens bilgisi. Web'e yüklenen görseller için bu verilerin büyük çoğunluğu gereksiz ve dosyayı büyütüyor. Kişisel fotoğraflarda GPS verisinin kaldırılması gizlilik açısından da önemli; Squoosh bunu "metadata sil" seçeneğiyle otomatik yapıyor.

Renk profili (ICC profili) farklı bir konu. Bir görsel geniş renk uzayında hazırlanmışsa (Adobe RGB veya Display P3 gibi) ve siz renk profilini kaldırırsanız, görselin renkleri tarayıcıda yanlış görünebiliyor; canlı renklerin soluk çıkması bu yüzden oluyor. Renk doğruluğu önemliyse, yalnızca renk profilini koruyup diğer metadata'yı atmak en dengeli seçenek.

Squoosh ne zaman işe yarar, ne zaman yetersiz kalır

Squoosh tek görsel için hızlı ve görsel geri bildirimli çalışıyor. Karşılaştırma paneli, sonucu kaydırmadan önce doğrulama imkânı veriyor; bu özellik onu birçok tek görev aracından ayırıyor. Araç zinciri kurmak istemiyorsanız, zaman zaman birkaç görsel optimize etmek istiyorsanız, ya da farklı format ve kalite kombinasyonlarını görerek karşılaştırmak istiyorsanız Squoosh pratik bir seçenek.

Toplu işlem için Squoosh doğru araç değil. Her görseli tek tek yüklemeniz, ayarlamanız ve indirmeniz gerekiyor. On görsel bile fazla zaman alıyor; yüz görselde bu yöntem sürdürülemez hale geliyor. Tekrar eden, otomatikleştirilebilir işler için komut satırı araçları veya Sharp gibi kütüphaneler daha uygun.

AVIF işleme süresi de dikkat gerektiren bir nokta. Tarayıcı sekizden fazla megapikselli bir görseli AVIF'e çevirirken birkaç saniye çalışabiliyor, düşük donanımlı cihazlarda bu süre uzuyor. Bu, tek seferlik kullanımda katlanılabilir; ama sık tekrarlayan bir iş akışında zaman kaybına dönüşebiliyor. Ayrıca Squoosh çevrimdışı da çalışıyor - Progressive Web App olarak yüklendiğinde internet bağlantısı olmadan da kullanılabiliyor, bu özellikle hassas görseller için avantaj.

İndirme ve farklı kombinasyonları karşılaştırma

Sağ panelin sağ alt köşesindeki indirme düğmesi çıktıyı kaydediyor. Dosya adı otomatik olarak seçilen formata göre uzantıyı değiştiriyor: MozJPEG seçildiyse .jpg, WebP seçildiyse .webp ekleniyor.

Farklı kombinasyonları karşılaştırmak istiyorsanız - örneğin WebP kalite 75 ile AVIF kalite 65'i - her seferinde ayarı değiştirip indirip adlandırmanız gerekiyor. Squoosh aynı anda birden fazla encoder ayarını saklamıyor. Bu sınırı aşmak için tarayıcıda iki sekme açıp aynı görseli iki ayrı ayarla işlemek pratik bir yol.

İndirilen dosyayı açıp gerçek boyutunu kontrol edin; Squoosh'un alt kısımdaki boyut tahmini yakın ama bazen birkaç KB sapıyor. Özellikle WebP lossless modunda tahmin ile gerçek boyut arasında fark olabiliyor.

Squoosh, araç kurma zahmetine değmeyeceği durumlarda sağlam iş görüyor. Arayüzünü doğru okumak - encoderi, kaliteyi, yeniden örneklemeyi ve metadata seçeneklerini birbirinden bağımsız anlamak - her kullanımda tutarlı ve öngörülebilir sonuç almanızı sağlıyor. Format desteği güncel kalıyor ve yeni encoder'lar ekleniyor; basit ama yüzeysel bir araç değil, tek görsel işleme için ihtiyacı karşılayan bir seçenek.

Squoosh'u bir karar noktası olarak görmek de mümkün: önce Squoosh'ta birkaç kombinasyonu deneyin, hangi formatın ve kalite aralığının sizin içerik türünüze uygun olduğunu görün, sonra bu kararı otomatik bir sürece taşıyın. Ayarları test etmek için tarayıcı, seri üretim için komut satırı - ikisi birlikte mantıklı bir iş akışı oluşturuyor.