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şirir. Resimler Largest Contentful Paint (LCP) adayları olabileceğinden bu gereksiz baytlar, resmin kaynak yükleme süresini uzatarak daha uzun LCP sürelerine neden olabilir.

Sağ taraftaki fotoğraf soldaki fotoğraftan% 40 daha küçük olsa da muhtemelen ortalama bir kullanıcıyla aynı görünümde olacaktır.

Ölçüm

Resimleri sıkıştırarak sayfa yüklemesini iyileştirme fırsatlarını kontrol etmek için Lighthouse'u çalıştırın. Bu fırsatlar, "Resimleri etkili bir şekilde kodlama" bölümünün altında listelenir:

Resim Min

Imagemin, geniş bir resim dosyası desteklediğinden resim sıkıştırma için Çeşitli resim biçimleri kullanır ve derleme komut dosyaları ve derleme komut dosyalarıyla kolayca entegre edilir. araçlar. Imagemin, hem CLI ve npm modülünü inceleyin. npm modülü genellikle en iyi seçenektir çünkü CLI daha fazla yapılandırma seçeneği sunar, ancak CLI hiçbir koda dokunmadan Imagemin'i denemek istiyorsanız iyi bir alternatiftir.

Eklentiler

Imagemin, "eklentiler" üzerine kuruludur. Eklenti, bir görevi sıkıştıran bir npm paketidir: belirli bir resim biçimi (ör. "mozjpeg", JPEG'leri sıkıştırır). Popüler resim biçimleri birden fazla eklentisi olabilir.

Bir eklenti seçerken göz önünde bulundurulması gereken en önemli şey eklentinin "kayıplı" "kayıpsız" diyoruz. Kayıpsız sıkıştırmada veri kaybı olmaz. Kayıplı sıkıştırma işlemi dosya boyutunu küçültür ancak resmin boyutunu küçültme pahasına kalitedir. Bir eklenti "kayıplı" olup olmadığını belirtmiyorsa veya "kayıpsız", siz API'sinden anlayabilir: Çıktının resim kalitesini belirtebilirseniz "kayıplı"dır.

Çoğu kullanıcı için kayıplı eklentiler en iyi seçenektir. Son derece önemli daha fazla tasarruf sağlayabilir ve sıkıştırma düzeylerini, bu boşlukları doldurmak için seçin. Aşağıdaki tabloda popüler Imagemin eklentileri listelenmektedir. Bunlar başka eklentilerden ibaret değildir ama hepsi projeniz için iyi birer seçimdir.

Imagemin KSA

Imagemin CLI, 5 farklı eklentiyle çalışır: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant ve imagemin-svgo. Imagemin, dokümanın resim biçimine dayalı olarak uygun giriş.

"Resimler/" içindeki resimleri sıkıştırmak aynı dosyaya kaydedecek ve dizininde 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ırsanız Imagemin codelab'lerini incelemek için webpack, gulp, ya da homurdanma

Imagemin'i tek başına Node komut dosyası olarak da kullanabilirsiniz. Bu kodda "imagemin-mozjpeg" kullanılır JPEG dosyalarını kalitede sıkıştırmak için kullanılan eklenti ('0' en kötüdür; '100' en iyi anlamına gelir):

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);
})();