Resim Sıkıştırma Nasıl Yapılır? JPG, PNG ve WebP Rehberi
Resim sıkıştırma denince akla çoğu zaman tek bir hareket gelir: dosyayı bir araca yüklemek ve çıkan sonucu indirmek. Pratik görünür ama sürdürülebilir değil. Sıkıştırma mekanik bir işlem değil; görselin görevi, formatı, piksel alanı ve yayın bağlamı birlikte okunmazsa gereksiz kalite kaybı üretir.
Ekip içinde farklı kaynaklardan gelen görseller kullanılıyorsa aynı kural her dosyada aynı sonucu vermez. Kamera fotoğrafı %75 kalitede sorunsuz çıkarken ekran görüntüsü aynı ayarda okunmaz hale gelebilir. Şeffaf arka planlı grafik PNG'de 45 KB iken WebP'ye çevrilince 12 KB olabilir ama bazı tarayıcılarda kenar yumuşaması üretebilir.
Amaç dosyayı olabilecek en küçük değere zorlamak değil. Kullanıcının gördüğü kaliteyi bozmadan fazlalığı almak. Tek dosyada dramatik fark aramak yerine tüm yayın akışında dengeli sonuç almak daha değerli.
Sıkıştırma süreci doğru kurulduğunda editör hangi görselin hangi ayara gireceğini bilir, geliştirici tema içinde hangi alanın hangi boyutu çağırdığını bilir. Konu teknik olduğu kadar operasyonel.
Sıkıştırmaya araçtan değil dosyanın türünden başlayın
Aynı sıkıştırma ayarı her dosyada aynı etkiyi vermez. Fotoğraf ağırlıklı dosyalarda kayıplı sıkıştırma çoğu zaman makul sonuç verir, küçük metin içeren ekran görüntülerinde veya sert kenarlı grafiklerde aynı yaklaşım çok hızlı bozulma üretir. İlk soru hangi aracı kullanacağınız değil, dosyanın hangi görsel davranışı taşıdığı.
Ürün fotoğrafı %70 kalitede sorunsuz çıkabilir. Oysa 14px yazı içeren arayüz ekran görüntüsü aynı ayarda okunmaz hale gelir. Kapak görseli 1200px genişlikte yayınlanacaksa %65 yeterli olabilir ama küçük kart görünümünde kullanılacak 400px dosya %80'in altına indiğinde sertleşir.
Ekip içinde ortak isimlendirme yoksa herkes farklı ayar dener. Bir editör tüm görselleri %60'a çeker, diğeri hiç dokunmaz. Sonuç: aynı sayfada bazı görseller bulanık, bazıları gereksiz ağır.
Doğru sıra: boyut, kırpma, format, kalite
Resim sıkıştırmanın en sık bozulduğu yer karar sırasıdır. Birçok kişi dosyayı araca verip kaliteyi düşürdükten sonra hâlâ ağır olduğunu görünce piksel küçültmeye gider. Oysa gereksiz piksel alanı zaten korunmuş olur. Doğru yaklaşım: önce görselin sayfada kullanıldığı boyutu belirle, gerekiyorsa kırp, sonra uygun formatı seç, en sonunda kalite ayarını yap.
- Gerçek kullanım alanını bul. Hero görseli 1920px, blog kartı 600px, sidebar widget 320px.
- Gereksiz boş alan varsa kırp. Ağırlığın nedeni bazen içerik değil kadraj.
- Piksel ölçüsünü gerçek ihtiyaca yaklaştır. 4000px fotoğrafı 1200px'e indir.
- Format kararını ver: fotoğraf JPG/WebP, şeffaf grafik PNG/WebP, ikon SVG.
- Kalite seviyesini indir, görünür bozulma olup olmadığını kontrol et.
Aynı görseli farklı sırada işlediğinizde çıkan dosya boyutu kadar görünür kalite de değişir. Büyük arşivlerde bu fark toplandığında çok daha belirgin hale gelir.
Boyut küçültme ile sıkıştırma birbirini doğru sırada tamamlayan iki adım.
JPG, PNG ve WebP dosyaları aynı mantıkla değerlendirilmez
JPG fotoğraf tarafında varsayılan çözüm oldu çünkü doğal görüntülerde dosya boyutu ile kalite arasında iyi denge kurabiliyordu. PNG şeffaflık ve keskin kenarlar gereken durumlarda öne çıktı. WebP bu iki alan arasında daha modern esneklik sundu. Ama format tarihçesi yetmez; sıkıştırma mantığı açısından farkları anlamak gerek.
| Format | En güçlü olduğu alan | Sıkıştırmada dikkat edilmesi gereken |
|---|---|---|
| JPG | Fotoğraf ve doğal ton geçişleri | Koyu alanlarda bloklaşma, tekrar kaydetmede kalite birikimli düşüşü |
| PNG | Şeffaflık ve sert kenarlı grafikler | Gereksiz büyük şeffaf alan ve ağır dosya üretme eğilimi |
| WebP | Web için dengeli genel kullanım | Her dosyada otomatik doğru kabul edilmemesi; küçük detayların bağlam içinde kontrol edilmesi |
Ekran görüntüsü dosyasını sadece küçük oldu diye agresif sıkıştırmak okunabilirliği tek seferde bozabilir. Fotoğraf dosyalarında aynı agresiflik daha yumuşak hissedilebilir. Kalite seviyesi sayısal değil, görsel davranışsal bir karar.
PNG ile JPG arasındaki seçim veya WebP kararları sıkıştırma sürecinin yan bilgisi değil, doğrudan temeli.
Kalite kontrolü yüzdeyle değil görünür riskle yapın
Birçok araç kalite ayarını kaydırıcıyla gösterir ve kullanıcıyı aynı tip karar vermeye iter. Ama aynı yüzde farklı dosyalarda aynı kalite etkisini yaratmaz. Bazı fotoğraflar %60'ta bile temiz kalır, ince çizgili ya da koyu geçişli dosyalarda bozulma %75'te bile görünür. Sıkıştırma kararını yalnızca sayısal ayara değil, görünür risk alanlarına göre ver.
Kontrol edilmesi gereken yerler: gökyüzü gibi yumuşak geçişler, koyu arka planlı bloklar, cilt tonları, küçük yazılar, ince diyagonal çizgiler, tek renk büyük yüzeyler. Bu bölgeler sıkıştırma izlerini hızlı ele verir. Dosya genel olarak iyi görünse bile kullanıcının dikkatinin yoğunlaştığı bölgede bozulma varsa dosya teknik olarak hafif ama editoryal olarak zayıf.
Kalite kontrolünü yalnızca tek ekranda yapma. Kart görünümünde temiz duran dosya tam genişlikte yetersiz kalabilir. Tam tersi de mümkün: büyük görünümde kabul edilebilir olan dosya küçük kartta fazla sertleşebilir. Sıkıştırma sonrası karar gerçek kullanım boyutunda verilmeli.
Bir kez hangi görsel türünde hangi risklerin çıktığını öğrendiğinde sonraki kararlar çok daha hızlı alınır.
Toplu sıkıştırmada en çok nerede hata yapılır?
Toplu sıkıştırma arşiv temizliği için cazip görünür çünkü kısa sürede büyük alan açabilir. Ama aynı anda yüzlerce dosyayı dönüştürmek ve sıkıştırmak, yanlış standart belirlendiyse hatayı da aynı hızla çoğaltır. Farklı kaynak kalitesine sahip dosyalar aynı kurala sokulduğunda bazı görseller gereksiz yere bozulur, bazıları hâlâ gereğinden büyük kalır.
Kritik olan tek bir global ayar kullanmamak, en azından dosyaları birkaç ana türe ayırmak. Ürün fotoğrafları, içerik kapakları, ekran görüntüleri ve şeffaf grafikler aynı toplu işlem hattına sokulmamalı. Dönüştürmeden önce orijinal kaynakları koru. Toplu işlemden sonra kalite sorununu fark edersen geri dönüş için temiz kaynağa ihtiyaç duyarsın.
- Karışık dosya tiplerini tek ayara mahkûm etmek.
- Orijinal kaynakları saklamadan toplu dönüştürmeye başlamak.
- Yeni dosyaları gerçek yerleşimde kontrol etmeden kabul etmek.
- Boyutlandırma ve sıkıştırmayı aynı anda yaparken hangi adımın sorun çıkardığını ayırt etmemek.
Toplu akış kurulacaksa önce küçük bir test havuzunda karar doğrula. Önce on dosyada güven kazan, sonra yüzlerce dosyaya yay.
Sıkıştırma sonrası kontrol: dosya boyutu mu, görsel ritim mi?
Doğru sıkıştırma kararı yalnızca dosya ağırlığının düşmesiyle anlaşılmaz. Sayfanın genel görsel ritmi bozulmamalı, önemli alanlarda dikkat dağıtan bozulma oluşmamalı. Bir dosya tek başına harika görünse bile aynı sayfadaki diğer dosyalarla kalite farkı açılıyorsa kullanıcı bunu sezebilir.
Yayın öncesi kontrolü yalnızca tek dosyaya bakarak yapma. Sayfayı bütün olarak aç, kart görünümünü kontrol et, önemli görselleri mobil ve masaüstü yerleşimde incele. Dosya daha hafif hale gelmiş ama dikkat çeken bölgelerde bozulma üretmiyorsa karar büyük ihtimalle doğru. Tereddüt yalnızca teknik dosya boyutu hedefinden geliyorsa biraz daha büyük ama daha güvenli dosya çoğu zaman daha iyi tercih.
Sıkıştırmanın başarılı olması için mükemmel görünmesi gerekmez; görevini bozmadan hafiflemesi yeterli.
Sıkıştırma yayın sürecinin parçası olmalı
Resim sıkıştırma tek seferlik kampanya değil, yayın zincirinin doğal adımlarından biri. Editör görseli yüklemeden önce hangi boyuta ineceğini bilir, geliştirici tema içinde hangi alanın hangi dosyayı çağırdığını bilir, tasarımcı hangi yüzeylerde küçük bozulmanın tolere edilip hangilerinde edilmeyeceğini bilir.
Özellikle WordPress gibi içerik odaklı sistemlerde görsel akışı düzenli değilse medya kütüphanesi hızla ağırlaşır ve dosya yükleri sayfa tipine göre tutarsız hale gelir. Sıkıştırmayı süreç içine yerleştirmek yalnızca sunucuda yer açmaz; ekip davranışını da netleştirir.
İyi sıkıştırma agresif değil tutarlı. Her dosyayı zorlayarak küçültmeye çalışmaz; doğru dosyada doğru adımı uygular.