Resim Dosya Boyutunu Kalite Kaybetmeden Küçültmenin Doğru Yolu
Boyutlandırma, format dönüştürme ve sıkıştırma — bir resmi küçülten üç ayrı yöntem ve bunları yanlış sırayla kullanmanın en kolay kazancı nasıl heba ettiği.
· 3 dk okuma
Bir dosya çok büyük olduğunda insanların ilk başvurduğu şey genellikle "resmi sıkıştır"dır, ama sıkıştırma bir resmi küçültmenin üç bağımsız yolundan yalnızca biridir — ve çoğu zaman en çok kazandıran da o değildir. Boyutlandırma ve doğru formatı seçmek sıkıştırmadan önce gelir; bunları yanlış sırayla yapmak, çok daha büyük bir kazanç zaten oradayken birkaç yüzde puan için uğraşmak demektir.
1. Yöntem: boyutlandırma — her şeyden önce daha az piksel
Modern bir telefonla çekilen bir fotoğraf rutin olarak 4000×3000 piksel veya daha büyüktür. Bu fotoğraf bir web sayfasında 800 piksel genişliğinde gösterilecekse, o piksellerin kabaca %94'ü indirilir, çözülür ve tarayıcının kendi ölçeklemesi tarafından çöpe atılır. Bu neredeyse her zaman tek başına en büyük kazançtır: gerçekte gösterileceğiniz boyutlara boyutlandırmak, sıkıştırma devreye girmeden çok önce piksel sayısını — dolayısıyla ham veriyi — azaltır.
Resim Boyutlandır bunu varsayılan olarak en-boy oranı kilitli şekilde yapar, böylece resim çarpıtılmaz.
2. Yöntem: doğru formatı seçmek
Aynı görsel kalitede, format tek başına dosya boyutunu önemli ölçüde değiştirir, çünkü her biri farklı bir resim içeriği türü için tasarlanmıştır:
| Format | En uygun olduğu yer | Neden |
|---|---|---|
| JPG | Fotoğraflar | Sürekli tonlar ve geçişler için ayarlanmış kayıplı sıkıştırma |
| PNG | Ekran görüntüsü, logo, saydamlık | Kayıpsız — piksel piksel aynı, ama fotoğraflar için daha büyük |
| WebP | Neredeyse her şey | Modern codec, eşit kalitede JPG'den genellikle %25–35 daha küçük, saydamlık desteği de var |
JPG olarak kaydedilmiş bir ekran görüntüsü genellikle aynı ekran görüntüsünün PNG haline göre hem daha kötü görünür hem de daha büyüktür, çünkü JPG'nin sıkıştırması fotoğrafik gürültü için tasarlanmıştır, düz renk ve keskin metin kenarları için değil. Resim Dönüştür tarayıcıdan çıkmadan JPG, PNG ve WebP arasında geçiş yapar.
3. Yöntem: sıkıştırma — kalite/boyut ödünleşmesi
Piksel sayısı ve format doğru olduktan sonra, sıkıştırma dosya boyutu için ne kadar görsel kaliteden ödün vereceğinize karar verdiğiniz yerdir. JPG ve WebP'nin ikisi de bir kalite kaydırıcısı kullanır (genellikle 0–100): 100'den 80'e düşüş genellikle göze görünmez ama dosya boyutunu yarıya ya da daha fazla indirebilir; 60'ın altına inmek özellikle keskin kenarlar ve metin çevresinde görünür bloklu bozulmalar getirmeye başlar.
Resim Sıkıştır, taahhüt etmeden önce sonucu orijinal boyutla karşılaştırmanıza izin verir, böylece kazancın görünür kayba değmediği noktayı bulabilirsiniz.
Pratik bir işlem sırası
- Gerçekte gösterileceğiniz boyutlara boyutlandırın — bu bedava kazançtır.
- PNG'nin kayıpsız saydamlığına veya en geniş eski tarayıcı desteğine özellikle ihtiyacınız yoksa WebP'ye dönüştürün.
- %75–85 civarı bir kalite seviyesinde sıkıştırın ve öncesi/sonrasını karşılaştırın.
Bunları bu sırayla yapmak, her adımın mümkün olan en küçük girdi üzerinde çalışması demektir — gereksiz yere büyük bir resmi sıkıştırıp boyutlandırmanın bedava vereceği kazancın yalnızca bir kısmına ulaşmak yerine.
Bir durum daha: barındırmak yerine gömmek
Bazen amaç daha küçük bir dosya bile değil, ayrı bir dosyanın hiç olmamasıdır — küçük bir ikon veya logonun doğrudan CSS ya da HTML içine bir data URL olarak gömülmesi, ekstra bir ağ isteğinden tamamen kaçınmak için. Resimden Base64'e bu dönüşümü yapar ve kopyala-yapıştıra hazır CSS ile HTML parçalarını verir — bu yalnızca gerçekten küçük resimler için mantıklıdır, çünkü bir data URL temsil ettiği ikili dosyadan kabaca üçte bir daha büyüktür; Base64 veriyi her zaman genişletir.