Sayfa ağırlığının en büyük kalemi resimlerdir. Kalite değerinin gerçekte ne yaptığını, hedef KB ile çalışmayı ve önce boyutlandırıp sonra sıkıştırmanın neden fark yarattığını ölçülebilir örneklerle anlatıyoruz.
Bir sayfa geç açılıyorsa suçlu genellikle JavaScript değil, gereğinden ağır resimlerdir. Görsel sıkıştırma, aynı görüntüyü ziyaretçiye çok daha az bayt indirterek göstermenin yoludur ve doğru yapıldığında farkı kimse göremez. Bu yazı kalite değerinin gerçekte neyi değiştirdiğini, hedef dosya boyutuyla çalışmanın ne zaman mantıklı olduğunu ve işlem sırasının sonucu nasıl etkilediğini anlatıyor.
İşin uygulama kısmı için görsel sıkıştırıcı ve görsel boyutlandırıcı birlikte kullanılır; biçim değiştirmeniz gerekiyorsa JPG'den WebP'ye dönüştürücü ya da PNG'den AVIF'e dönüştürücü devreye girer. Kadrajı daraltarak da bayt kazanılabilir; bunun için görsel kırpıcı çoğu zaman sıkıştırmadan daha etkilidir.
Tarayıcı bir sayfayı çizerken en büyük görünür öğeyi ekrana getirene kadar ziyaretçi “yükleniyor” hissini yaşar. Bu öğe çoğu sayfada bir resimdir. Dolayısıyla kapak görselinin 1,8 MB yerine 220 KB olması, doğrudan algılanan hıza yansır. Mobil bağlantıda 1,5 MB'lık bir fark, tipik bir 4G hattında bir saniyenin üzerinde gecikme demektir.
İkinci etki daha sinsidir: ağır resimler yalnızca kendilerini geciktirmez, aynı bağlantı üzerinden inen yazı tiplerini ve stil dosyalarını da kuyrukta bekletir. Bir sayfadaki toplam resim ağırlığını yarıya indirdiğinizde, resimle hiç ilgisi olmayan öğelerin de daha erken hazır olduğunu görürsünüz.
Kalite ayarı bir yüzde değil, sıkıştırma sırasında ne kadar ayrıntının atılacağını belirleyen bir eşiktir. 20 ile 95 arasında ayarlanır ve varsayılan 82'dir. Ölçek doğrusal değildir: 95'ten 85'e inmek dosyayı belirgin biçimde küçültür ama gözle fark edilmez; 60'ın altına inmek ise düz zeminlerde lekeler, yazı kenarlarında bulanıklık üretir.
Pratik bir yöntem şudur: aynı görseli 85, 75 ve 65 değerleriyle üç kez kaydedin, üçünü de gerçek boyutunda ekranda açın ve ilk gözünüze batan hangisiyse bir üst değerde durun. Bu eşik görsel türüne göre değişir; portre fotoğrafı 70'te bile temiz görünürken, üzerinde ince yazı olan bir kapak 85'in altında dağılabilir.
Bazen “iyi görünsün” yeterli değildir, dosyanın belirli bir boyutun altında kalması gerekir: bir pazaryeri 500 KB sınırı koyar, bir e-posta şablonu 200 KB ister. Hedef boyut modunda kalite değerini siz seçmezsiniz; araç istenen kilobayta ulaşana kadar kaliteyi aşağı çeker. Üst sınır 5120 KB'dır, yani 5 MB'lık bir hedef bile verilebilir.
Bu modun tuzağı, çok agresif hedefler verildiğinde kalitenin sessizce çökmesidir. 3000 piksel genişliğindeki bir fotoğrafı 80 KB'a sıkıştırmak teknik olarak mümkündür, sonuç ise kullanılamaz. Böyle durumlarda önce ölçüyü küçültmek gerekir.
Aynı görseli 4000 piksel genişliğinde tutup kaliteyi 50'ye indirmek ile 1600 piksele düşürüp kaliteyi 85'te bırakmak arasında hem dosya boyutu hem de görünüm açısından büyük fark vardır. İkincisi neredeyse her zaman kazanır: daha küçük, daha temiz.
Duyarlı tasarımda tek bir dosyayı bütün ekranlara göndermek kolaydır ama pahalıdır: telefon kullanıcısı, masaüstü için hazırlanmış geniş dosyayı indirir. Öte yandan her kırılma noktası için ayrı dosya üretmek de yönetilemez hâle gelir. Pratikte üç ölçü çoğu projeye yeter: yaklaşık 640 piksel genişliğinde mobil, 1280 piksel masaüstü ve 1920 piksel yüksek yoğunluklu ekran kopyası. Bu üçlü, dosya sayısını makul tutarken en büyük israfı ortadan kaldırır.
Küçük ölçüler için kalite değerini bir iki basamak yükseltmek de mantıklıdır. Görsel küçüldükçe her piksel daha çok bilgi taşır ve aynı kalite ayarı büyük dosyada görünmeyen bozulmaları küçük dosyada görünür kılar. 1920 piksellik kopyayı 80'de bırakıp 640 piksellik kopyayı 88'de kaydetmek, ikisinin de temiz görünmesini sağlar ve toplam ağırlığı yine de düşük tutar.
| Adım | Tipik kazanç | Görünür risk | Ne zaman yapılır |
|---|---|---|---|
| Ölçüyü yarıya indirmek | %70 – %75 | Yok (gösterim ölçüsü doğruysa) | Her zaman ilk adım |
| Kaliteyi 95'ten 82'ye çekmek | %35 – %50 | Çok düşük | Fotoğraflarda |
| PNG yerine WebP | %25 – %35 | Yok | Grafik ve ekran görüntülerinde |
| WebP yerine AVIF | %20 – %30 | Yok | Elle hazırlanan kapaklarda |
| Kaliteyi 60'ın altına indirmek | %15 – %25 | Yüksek | Tercihen hiç |
Tablodaki sıralama önemlidir: en büyük kazanç en düşük riskle gelir. Çoğu ekip bunu ters çevirip önce kaliteyi kısar, ölçüye hiç dokunmaz ve hem çirkin hem hâlâ ağır dosyalarla kalır.
Toplu iş yaparken kuyruğa bir seferde en fazla 20 dosya girer ve her dosya 24 MB sınırının altında olmalıdır. Bu iki sayı, işi turlara bölerken planınızın temelidir. Ham fotoğraf makinesi çıktılarıyla çalışıyorsanız ilk turu yalnızca ölçü küçültmeye ayırmak, ikinci turu rahatlatır.
Sıkıştırma çalışmasının işe yaradığını görmek için üç sayıyı not etmek yeterli: sayfadaki toplam resim ağırlığı, en büyük görselin tek başına boyutu ve en büyük görselin ekranda görünür hâle geldiği an. Tarayıcının ağ sekmesi ilk ikisini doğrudan verir. Üçüncüsü için sayfayı yavaş bağlantı benzetimiyle açmak, gerçek kullanıcı deneyimine en yakın izlenimi sağlar.
Hedef koymak da faydalıdır: bir içerik sayfasında toplam resim ağırlığının 500 KB'ın altında kalması, kapak görselinin 150 KB'ı geçmemesi çoğu proje için ulaşılabilir ve fazlasıyla yeterli bir çıtadır. Bu çıtaya ulaşmak neredeyse hiçbir zaman tek bir ayarla olmaz; ölçü, biçim ve kalite birlikte çalıştığında gelir.
Ölçümü bir kez yapıp bırakmak da yetmez. Yeni içerik girildikçe arşiv yeniden ağırlaşır, çünkü görsel sıkıştırma adımı çoğu ekipte yayın akışının kalıcı bir parçası değil, arada bir hatırlanan bir temizlik işidir. Bunu önlemenin en ucuz yolu, yayına alma kontrol listesine tek satır eklemektir: “Kapak görseli 150 KB'ın altında mı?” Cevap hayırsa yazı yayımlanmaz. Bu tek satır, altı ay sonra yapılacak toplu bir düzeltme turundan çok daha az emek ister ve sonuç kalıcı olur.
Çünkü geniş bir görsel yelpazesinde gözle fark edilmeyen en düşük değere yakın duruyor. Daha yükseği dosyayı büyütür, daha düşüğü bazı görsellerde iz bırakır. Kendi arşiviniz için farklı bir değer bulursanız onu kullanın; varsayılan bir başlangıç noktasıdır, kural değil.
Hayır. Sıkıştırma piksel sayısını değil, o pikselleri kaydetmek için kullanılan veri miktarını azaltır. En/boy ölçüsünü değiştirmek isterseniz bu ayrı bir işlemdir ve önce yapılmalıdır.
Dönüşüm ve sıkıştırma akışı dosyayı işlemek için sunucuya alır, işlemi tamamlar ve çıktıyı size döndürür; kalıcı bir arşiv tutulmaz. Yine de kişisel veri içeren belgelerde, hangi araç olursa olsun, önce hassas alanları kırpmak iyi bir alışkanlıktır.
Sayfada modern biçimi sunup eski istemciler için yedek bir kopya bulundurmak yaygın bir yöntemdir. Fakat iki kopyayı elle yönetmek hataya açıktır; küçük projelerde tek biçimde kalıp onu iyi optimize etmek genellikle daha sağlıklı bir karardır.
Bu tür dosyalarda kayıplı ayarlarla oynamak yerine kayıpsız modda kalmak doğrudur; zaten küçük olan bir ikonda kazanılacak birkaç kilobayt, kenarlarda oluşacak bulanıklığa değmez. Asıl kazanç, ikonu gerçekten ihtiyaç duyulan ölçüde üretmekten gelir: 512 piksellik bir dosyayı 32 piksellik bir alanda göstermek, hangi ayarı seçerseniz seçin israftır.
Biçim tercihinin bu tabloyu nasıl değiştirdiğini görsel formatı nasıl seçilir yazısında ele aldık; onlarca dosyayı aynı anda işleyecekseniz toplu görsel dönüştürme iş akışı rehberi sırayı planlamanıza yardımcı olur.
