Resimleri sıkıştırmak için Imagemin'i kullanma

Katie Hempenius

Bu konu neden önemli?

Sıkıştırılmamış resimler sayfalarınızı gereksiz baytlarla şişir. Resimler Largest Contentful Paint (LCP) adayları olabileceğinden, bu gereksiz baytlar gereksiz kaynak yükleme süresine neden olabilir. Bu da LCP sürelerinin uzamasına neden olabilir.

Sağdaki fotoğraf soldaki fotoğraftan% 40 daha küçük, ancak muhtemelen ortalama bir kullanıcıyla aynı görünüyor.

Ölçüm

Resimleri sıkıştırarak sayfa yüklemeyi iyileştirme fırsatlarını kontrol etmek için Lighthouse'u çalıştırın. Bu fırsatlar, "Resimleri verimli bir şekilde kodlayın" altında listelenir:

Imagemin (Resim dakikası)

Imagemin, çok çeşitli resim biçimlerini desteklediğinden ve derleme komut dosyaları ve derleme araçlarıyla kolayca entegre edildiğinden resim sıkıştırma için mükemmel bir seçimdir. Imagemin hem CLI hem de npm modülü olarak kullanılabilir. npm modülü genellikle daha fazla yapılandırma seçeneği sunduğu için en iyi seçenektir ancak Imagemin'i herhangi bir koda dokunmadan denemek istiyorsanız CLI iyi bir alternatif olabilir.

Eklentiler

Imagemin, "eklentiler" temel alınarak geliştirilmiştir. Eklenti, belirli bir resim biçimini sıkıştıran (ör. "mozjpeg" JPEG'leri sıkıştıran) bir npm paketidir. Popüler resim biçimlerinde, aralarından seçim yapabileceğiniz birden fazla eklenti olabilir.

Bir eklenti seçerken dikkat edilmesi gereken en önemli nokta, eklentinin "kayıplı" mı yoksa "kayıpsız" mı olduğudur. Kayıpsız sıkıştırmada veri kaybı olmaz. Kayıplı sıkıştırma, dosya boyutunu küçültür ancak resim kalitesinin düşme pahasına. Bir eklentinin "kayıplı " mı yoksa"kayıpsız " mı olduğunu belirtmiyorsa API'sinden anlayabilirsiniz: Çıktının resim kalitesini belirtebilirseniz o zaman "kayıplı" olur.

Çoğu kişi için kayıplı eklentiler en iyi seçenektir. Bunlar çok daha fazla dosya boyutu tasarrufu sağlar ve ihtiyaçlarınıza göre sıkıştırma düzeylerini özelleştirebilirsiniz. Aşağıdaki tabloda popüler Imagemin eklentileri listelenmektedir. Bunlar sadece eklentiler olmasa da projeniz için hepsi iyi birer seçenek olabilir.

Imagemin KSA

Imagemin CLI, 5 farklı eklentiyle çalışır: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant ve imagemin-svgo. Imagemin, girişin resim biçimine göre uygun eklentiyi kullanır.

"images/" dizinindeki resimleri sıkıştırmak ve aynı dizine kaydetmek için aşağıdaki komutu çalıştırın (orijinal dosyaların üzerine yazar):

$ imagemin images/* --out-dir=images

Imagemin npm modülü

Bu derleme araçlarından birini kullanıyorsanız webpack, gulp veya grunt ile Imagemin codelab'lerine göz atın.

Imagemin'i tek başına Düğüm komut dosyası olarak da kullanabilirsiniz. Bu kod, JPEG dosyalarını 50 kalitede ("0" en kötü kalite; "100" en iyi olacak şekilde) sıkıştırmak için "imagemin-mozjpeg" eklentisini kullanır:

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();