Görselleri WebP ya da AVIF'e çevirmek sayfa ağırlığını düşürmenin en bilinen yolu, ama işin bir de öncesi var: elinizdeki JPEG, PNG ve SVG dosyaları çoğu zaman format değiştirmeden de belirgin biçimde küçültülebilir. Bir fotoğraf makinesinden ya da tasarım programından çıkmış dosyalar gereksiz meta veri, optimal olmayan Huffman tabloları ve fazladan renk paleti taşır. Görsel sıkıştırma araçları tam olarak bu fazlalıkları temizler ve bazıları bunu hiç piksel kaybetmeden yapar.
Bu rehberde kayıplı ve kayıpsız sıkıştırmanın gerçek farkını, JPEG için jpegoptim ve mozjpeg, PNG için oxipng ve pngquant, SVG için svgo, modern formatlar için cwebp ve avifenc araçlarının hangi işte kullanıldığını, bunları tek bir toplu iş akışında nasıl birleştireceğinizi ve hangi hataların dosyayı büyütüp kaliteyi düşürdüğünü anlatacağım. Amacım hangi aracın "en iyi" olduğunu söylemek değil; her birinin hangi problemi çözdüğünü net biçimde ayırmak.
Kayıplı mı Kayıpsız mı: Doğru Soruyu Sormak#
Sıkıştırma araçlarını ikiye ayıran temel çizgi burasıdır. Kayıpsız araçlar dosyanın piksel verisini hiç değiştirmez; yalnızca depolama biçimini daha verimli hâle getirir ve gereksiz meta veriyi atar. Sonuç dosya açıldığında bit bit orijinaliyle aynıdır. Kayıplı araçlar ise gözün fark etmesi zor detayları atarak çok daha büyük kazanç sağlar, ama işlem geri alınamaz.
Beklenen kazanç aralıkları kabaca şöyledir:
| Format | Kayıpsız kazanç | Kayıplı kazanç | Tipik araç |
|---|---|---|---|
| JPEG | %5-15 | %40-70 | jpegoptim, mozjpeg |
| PNG (24 bit) | %10-30 | %60-80 | oxipng, pngquant |
| SVG | %20-60 | Kavram geçersiz | svgo |
| GIF | %10-30 | Değişken | gifsicle |
Buradan çıkan pratik kural şu: kayıpsız sıkıştırma bedavadır ve her dosyaya uygulanmalıdır, çünkü riski yoktur. Kayıplı sıkıştırma ise bir karardır ve kalite eşiğini kendi görsellerinizle test ederek belirlemeniz gerekir. Çoğu sitede doğru yaklaşım ikisini sırayla uygulamaktır: önce kayıplı adımla makul bir kalite seviyesine indirin, sonra kayıpsız araçla kalan fazlalığı temizleyin.
Bir uyarı: kayıplı sıkıştırmayı aynı dosyaya iki kez uygulamayın. İlk işlemin bıraktığı artefaktlar ikinci işlemde kodlanacak veri hâline gelir ve dosya hem bozulur hem beklediğiniz kadar küçülmez. Her zaman elinizdeki en yüksek kaliteli kaynaktan başlayın.
JPEG Araçları: jpegoptim ve mozjpeg#
JPEG tarafında iki farklı iş vardır ve iki farklı araç bunları yapar.
jpegoptim, mevcut bir JPEG'i yeniden kodlamadan optimize eder. Huffman tablolarını en iyileştirir, EXIF ve renk profili gibi meta veriyi isteğe bağlı olarak atar. Kayıpsız kipte piksel verisine hiç dokunmaz:
# Kurulum
sudo apt install -y jpegoptim # Debian / Ubuntu
sudo dnf install -y jpegoptim # RHEL / AlmaLinux
# Kayıpsız: piksel değişmez, sadece meta veri ve tablolar temizlenir
jpegoptim --strip-all --all-progressive urun.jpg
# Kayıplı: kalite üst sınırı 82'yi geçmesin
jpegoptim --max=82 --strip-all urun.jpg
# Hedef dosya boyutuna göre sıkıştır (kalite otomatik ayarlanır)
jpegoptim --size=120k urun.jpg
# Üzerine yazmadan başka bir dizine kaydet
jpegoptim --dest=./optimize --max=82 --strip-all *.jpg
--strip-all parametresi EXIF, IPTC ve XMP verisini siler. Bu genellikle istediğiniz şeydir — konum bilgisi ve fotoğraf makinesi seri numarası gibi veriler web görselinde işe yaramaz, hatta gizlilik açısından sakıncalıdır. Ancak dikkat: --strip-all ICC renk profilini de siler ve geniş renk gamlı bir fotoğrafta bu, renklerin soluk görünmesine yol açabilir. Renk hassasiyeti önemliyse --strip-exif --strip-iptc kullanıp profili koruyun.
--all-progressive ise dosyayı ilerlemeli (progressive) JPEG'e çevirir; büyük fotoğraflarda hem biraz daha küçüktür hem de yüklenirken kademeli olarak netleşir, bu da algılanan hızı iyileştirir.
mozjpeg ise farklı bir iştir: JPEG'i sıfırdan, daha iyi bir kodlayıcıyla yeniden üretir. Aynı algılanan kalitede standart libjpeg'den belirgin biçimde küçük dosya verir:
# mozjpeg'in cjpeg komutu (dağıtıma göre yolu değişebilir)
cjpeg -quality 80 -progressive -optimize -outfile cikti.jpg girdi.jpg
mozjpeg yeni görseller üretirken, jpegoptim ise elinizdeki mevcut arşivi temizlerken daha uygundur.
PNG Araçları: oxipng ve pngquant#
PNG tarafında da aynı ikili ayrım geçerlidir.
oxipng kayıpsız çalışır: PNG'nin sıkıştırma filtrelerini ve zlib parametrelerini brute-force deneyerek en küçük kombinasyonu bulur. Piksel verisi hiç değişmez.
# Kurulum (Rust ile ya da dağıtım paketinden)
cargo install oxipng
# ya da
sudo apt install -y oxipng
# Kayıpsız optimizasyon, 4 seviyesi iyi bir denge
oxipng -o 4 --strip safe ekran-goruntusu.png
# Dizindeki tüm PNG'leri özyinelemeli işle, tüm çekirdekleri kullan
oxipng -o 4 --strip safe -r ./img
--strip safe parametresi, görüntülemeyi etkilemeyen yardımcı bloklara dokunmadan gereksizleri atar; renk profilini korur. -o seviyesini 4'ten yukarı çıkarmak süreyi belirgin biçimde artırır ama kazanç küçüktür.
pngquant ise kayıplıdır ve mantığı tamamen farklıdır: 24 bit gerçek renkli bir PNG'yi, gözün fark etmesi zor bir şekilde 256 renklik bir paletli PNG'ye indirger. Şeffaflık korunur ve kazanç genellikle çok büyüktür:
sudo apt install -y pngquant
# 256 renge indir, kalite 65-85 aralığında kalsın
pngquant --quality=65-85 --speed 1 --strip --output cikti.png ikon.png
# Kalite alt sınırı tutturulamazsa dosyayı hiç yazma (güvenli kip)
pngquant --quality=70-90 --skip-if-larger --strip ikon.png
--quality=65-85 yazımı önemlidir: alt sınır tutturulamazsa pngquant çıktı üretmez ve orijinali korur. Bu, toplu işlerde kalitesi bozulan dosyaları otomatik olarak elemenin en temiz yoludur.
En iyi sonucu ikisini sırayla kullanarak alırsınız: önce pngquant ile paletlendirin, sonra oxipng ile kalan fazlalığı temizleyin.
SVG, GIF ve Modern Formatlar#
SVG bir metin formatıdır ve tasarım programlarından çıktığında inanılmaz miktarda gereksiz veri taşır: düzenleyici meta verisi, kullanılmayan tanımlar, aşırı ondalık hassasiyet. svgo bunları temizler:
npm install -g svgo
# Tek dosya
svgo logo.svg -o logo.min.svg
# Dizindeki tüm SVG'leri işle
svgo -f ./icons -o ./icons-min
# Ondalık hassasiyeti düşür (görsel farkı yok, dosya belirgin küçülür)
svgo --precision=2 logo.svg -o logo.min.svg
Bir uyarı: svgo varsayılan olarak id özniteliklerini temizleyebilir ve CSS ya da JavaScript ile o id'lere referans veriyorsanız görsel bozulur. Animasyonlu ya da betikle kontrol edilen SVG'lerde --disable=cleanupIds gibi eklentileri kapatmayı düşünün.
GIF için gifsicle kullanılır ve animasyonlu GIF'lerde asıl kazanç formatı terk etmekten gelir; aynı animasyonun WebP ya da MP4 hâli çok daha küçüktür:
sudo apt install -y gifsicle
gifsicle -O3 --lossy=60 girdi.gif -o cikti.gif
Modern formatlar için cwebp ve avifenc araçlarını kullanırsınız. Bunlar sıkıştırma değil dönüştürme araçlarıdır ve iş akışının son adımında yer alır; ayrıntılarını WebP'ye dönüştürme rehberi ve AVIF nedir, WebP'den farkı ne yazılarında bulabilirsiniz.
Araçları tek tabloda toplarsak:
| Araç | Format | Kip | Ne zaman kullanılır |
|---|---|---|---|
| jpegoptim | JPEG | Her ikisi | Mevcut JPEG arşivini temizlemek |
| mozjpeg (cjpeg) | JPEG | Kayıplı | Yeni JPEG üretmek |
| oxipng | PNG | Kayıpsız | Her PNG'ye güvenle uygulanır |
| pngquant | PNG | Kayıplı | Şeffaf grafik ve ikonları küçültmek |
| svgo | SVG | Kayıpsız | Tasarım çıktısı SVG'leri temizlemek |
| gifsicle | GIF | Her ikisi | Eski GIF varlıkları |
| cwebp | WebP | Her ikisi | Format dönüşümü |
| avifenc | AVIF | Her ikisi | En küçük dosya, yavaş kodlama |
Toplu İş Akışını Kurmak#
Tek tek komut çalıştırmak öğretici ama sürdürülebilir değil. Aşağıdaki betik bir dizin ağacındaki JPEG, PNG ve SVG dosyalarını uygun araçla işler, öncesi ve sonrası boyutları raporlar:
#!/usr/bin/env bash
# gorsel-optimize.sh — dizindeki görselleri yerinde optimize eder
set -euo pipefail
HEDEF="${1:-.}"
onceki=0; sonraki=0
islem() {
local dosya="$1"
local eski; eski=$(stat -c%s "$dosya")
case "${dosya,,}" in
*.jpg|*.jpeg)
jpegoptim --quiet --max=82 --strip-exif --strip-iptc --all-progressive "$dosya"
;;
*.png)
pngquant --quality=65-88 --skip-if-larger --strip --force \
--output "$dosya" "$dosya" 2>/dev/null || true
oxipng -q -o 4 --strip safe "$dosya"
;;
*.svg)
svgo --quiet --precision=2 "$dosya" -o "$dosya"
;;
esac
local yeni; yeni=$(stat -c%s "$dosya")
onceki=$(( onceki + eski ))
sonraki=$(( sonraki + yeni ))
printf '%-60s %8d -> %8d\n' "$(basename "$dosya")" "$eski" "$yeni"
}
find "$HEDEF" -type f \( -iname '*.jpg' -o -iname '*.jpeg' \
-o -iname '*.png' -o -iname '*.svg' \) -print0 |
while IFS= read -r -d '' f; do islem "$f"; done
echo "----"
echo "Toplam: ${onceki} -> ${sonraki} bayt"
Betiği çalıştırmadan önce mutlaka bir yedek alın; bu betik dosyaları yerinde değiştirir ve kayıplı adımlar geri alınamaz. Düzenli yedek alışkanlığınız yoksa yedekleme hizmetimiz bu tür toplu işlemler öncesinde geri dönüş noktası oluşturmanızı sağlar.
chmod +x gorsel-optimize.sh
nice -n 10 ./gorsel-optimize.sh /var/www/firmaniz.com/uploads
nice -n 10 ile önceliği düşürmek, işlemin canlı trafiği etkilemesini önler. Çok sayıda dosya varsa find ... | parallel -j "$(nproc)" ile paralelleştirebilirsiniz; ancak paylaşımlı bir sunucudaysanız CPU kotanızı zorlamamak için tek iş parçacığında ve gece saatlerinde çalıştırmak daha güvenlidir.
Otomasyon: Yükleme Anı, Build Zinciri ve Sunucu Tarafı#
Tek seferlik toplu optimizasyon bir yerde biter; asıl mesele yeni gelen görsellerin de otomatik işlenmesidir. Üç yaygın yaklaşım var.
Build zincirine bağlamak. Statik bir site ya da modern bir ön yüz projesi kullanıyorsanız görsel optimizasyonu derleme adımının parçası yapmak en temizidir. Node tarafında sharp kütüphanesi tek başına yeniden boyutlandırma, format dönüşümü ve sıkıştırmayı yapar; kaynak dosyalar depoda kalır, çıktı üretilir. Bu yöntemin en büyük avantajı sonucun tekrarlanabilir olmasıdır.
Yükleme akışına bağlamak. Kullanıcıların görsel yüklediği bir uygulamada optimizasyon yükleme sonrası bir kuyruk işine devredilmelidir. İsteğin içinde yapmak, yoğun anlarda zaman aşımı ve CPU tükenmesi üretir. Görsel hazır olana kadar orijinali servis etmek kabul edilebilir bir ara durumdur.
Zamanlanmış görev. WordPress gibi hazır bir sistemde en pratik yol, uploads dizinini gece tarayan bir cron görevidir:
# crontab -e ile ekleyin: her gece 03:30'da yalnızca son 2 günün dosyalarını işle
30 3 * * * find /var/www/firmaniz.com/uploads -type f -mtime -2 \
\( -iname '*.jpg' -o -iname '*.png' \) -print0 \
| xargs -0 -r nice -n 15 /usr/local/bin/gorsel-optimize-tek.sh >> /var/log/gorsel-opt.log 2>&1
-mtime -2 filtresi tüm arşivi her gece yeniden işlemeyi önler; zaten optimize edilmiş dosyaları tekrar sıkıştırmak hem boşuna CPU harcar hem de kayıplı adımlarda kaliteyi kademeli olarak düşürür.
Bu üç yolun hiçbirini kurmak istemiyorsanız dördüncü seçenek işi tamamen dışarı vermektir; resim CDN'i ile otomatik görsel optimizasyonu yazısı bu modeli anlatıyor. Sonucu ölçmek için ise GTmetrix ile WordPress hız testi yazısındaki önce-sonra karşılaştırma yöntemini kullanabilirsiniz.
Sık Yapılan Hatalar#
Yeniden boyutlandırmadan önce sıkıştırmak. En büyük kazanç sıkıştırmadan değil, doğru piksel boyutundan gelir. 4000 piksellik bir fotoğrafı mükemmel sıkıştırmak, onu önce 1600 piksele indirmenin yanında küçük kalır. Önce boyut, sonra sıkıştırma; ardından responsive görseller: srcset ve sizes ile farklı boyutları sunun.
Aynı dosyayı defalarca kayıplı sıkıştırmak. Her gece tüm arşivi işleyen bir cron görevi, aynı JPEG'i her seferinde yeniden kodlar ve kalite kademeli olarak düşer. Zaman filtresi ya da işlenmişleri işaretleyen bir mekanizma kullanın.
--strip-all ile renk profilini silmek. Geniş renk gamlı fotoğraflarda ICC profilini atmak renkleri soluklaştırır. Gizlilik için EXIF'i atın, profili koruyun.
SVG'de id temizliğini fark etmemek. svgo varsayılan ayarlarıyla CSS ya da JavaScript'ten referans verdiğiniz id'leri değiştirebilir. Animasyonlu SVG'lerde çıktıyı gözle kontrol edin.
Yedek almadan yerinde çalıştırmak. Kayıplı adımlar geri alınamaz. Orijinalleri ayrı bir dizinde ya da yedek alanında saklayın; ileride farklı bir kalite seviyesine ya da AVIF gibi başka bir formata geçmek istediğinizde kaynağa ihtiyacınız olur.
Kazancı ölçmemek. Bir aracın işe yarayıp yaramadığını varsaymayın. Her toplu işten sonra toplam dizin boyutunu karşılaştırın:
du -sh /var/www/firmaniz.com/uploads
Sıkça Sorulan Sorular#
Görsel sıkıştırma kaliteyi bozar mı#
Kayıpsız araçlarda hayır: oxipng, svgo ve jpegoptimin kayıpsız kipi piksel verisine hiç dokunmaz, yalnızca depolama biçimini iyileştirir ve gereksiz meta veriyi atar. Kayıplı araçlarda ise teknik olarak kayıp vardır, ancak makul kalite değerlerinde (JPEG için 80 civarı, pngquant için 65-88 aralığı) bu kayıp normal ekran boyutlarında gözle ayırt edilemez. Kritik olan aynı dosyayı defalarca kayıplı sıkıştırmamaktır.
Hangi araçla başlamalıyım#
Riski sıfır olduğu için kayıpsız araçlarla başlayın: JPEG'ler için jpegoptim --strip-exif --all-progressive, PNG'ler için oxipng -o 4, SVG'ler için svgo. Bu üçü tek bir toplu geçişte %10-30 arası bir kazanç verir ve hiçbir kalite kararı gerektirmez. Sonuç yeterli değilse kayıplı adımı ekleyin ve kalite eşiğini kendi görsellerinizle göz testi yaparak belirleyin.
Görsel sıkıştırma araçları ücretsiz mi#
Bu rehberde geçen araçların tamamı açık kaynaklı ve ücretsizdir: jpegoptim, mozjpeg, oxipng, pngquant, svgo, gifsicle, cwebp ve avifenc. Dağıtımınızın paket yöneticisiyle ya da npm ile kurulurlar, lisans ücreti yoktur ve kendi sunucunuzda sınırsız sayıda dosya işleyebilirsiniz. Ücretli olanlar genellikle bulut tabanlı API hizmetleridir; bunların avantajı sunucu kaynağı harcamamanızdır.
Toplu sıkıştırma sunucuyu yorar mı#
Evet, özellikle oxipng -o 6 ya da AVIF kodlaması gibi ağır işlerde CPU belirgin biçimde yüklenir. Bu yüzden toplu işleri trafiğin düşük olduğu saatlerde çalıştırın ve nice -n 10 ile önceliği düşürün. Paylaşımlı hosting kullanıyorsanız kaynak kotanızı zorlamamak için paralel iş sayısını sınırlı tutun; kendi sunucunuzdaysanız parallel -j ile çekirdek sayısına kadar paralelleştirebilirsiniz.
Sıkıştırılmış dosyanın gerçekten küçüldüğünü nasıl kontrol ederim#
En basit yöntem işlem öncesi ve sonrası dizin boyutunu du -sh ile karşılaştırmaktır. Tek dosya için ls -lh yeterlidir. Kalite tarafını doğrulamak içinse orijinal ile çıktıyı yan yana, tam boyutta açıp bakın; özellikle düz renk geçişlerinde bantlanma, yüzlerde ise detay kaybı olup olmadığına dikkat edin. identify -format "%wx%h %b\n" komutu boyut ve piksel bilgisini tek satırda verir.
WordPress eklentisi mi kullanmalıyım yoksa komut satırı mı#
Sunucunuza SSH erişiminiz varsa komut satırı araçları hem daha hızlı hem de daha çok denetim sağlar; ayrıca eklenti bağımlılığı yaratmaz ve tema güncellemelerinden etkilenmez. Buna karşılık paylaşımlı hostingte SSH ya da bu araçlar kurulu olmayabilir; o durumda bir optimizasyon eklentisi ya da bulut hizmeti pratik çözümdür. Karma bir yaklaşım da mümkündür: mevcut arşivi bir kez komut satırından temizleyip yeni yüklemeleri eklentiye bırakabilirsiniz.
Kapanış#
Görsel sıkıştırma, format değiştirmeden önce yapılması gereken ve çoğu zaman atlanan bir adım. Aklınızda kalması gereken dört alışkanlık şunlar: önce doğru piksel boyutuna indirin, sonra sıkıştırın; kayıpsız araçları istisnasız her dosyaya uygulayın çünkü riski yok; kayıplı adımı aynı dosyaya iki kez çalıştırmayın ve orijinalleri asla silmeyin; toplu işleri zaman filtresiyle sınırlayıp düşük öncelikle, gece saatlerinde çalıştırın. Kazancı her seferinde du -sh ile ölçün — varsaymak yerine görmek, hangi adımın gerçekten işe yaradığını gösterir.
Bu araçları kurup kendi zamanlanmış görevlerinizle çalıştırmak için SSH ve gerçek CPU kaynağı gerekir; tam root erişimi sunan VDS ve sanal sunucu paketlerimiz bu iş yükü için uygundur. Kurulumu ve otomasyonu bize bırakmayı tercih ederseniz sunucu yönetimi hizmetimiz optimizasyon zincirini sizin yerinize kurar; görsel yoğun bir katalog işletiyorsanız e-ticaret hosting paketlerimize de göz atabilirsiniz.