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) için aday olabileceğinden bu gereksiz baytlar, resmin kaynak yükleme süresini artırabilir ve LCP sürelerinin uzamasına neden olabilir.

Sağdaki fotoğraf, soldakinden% 40 daha küçük olmasına rağmen ortalama bir kullanıcı için muhtemelen aynı görünür.

Ö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" bölümünde listelenir:

Imagemin

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

Eklentiler

Imagemin, "eklentiler" üzerine kuruludur. Eklenti, belirli bir resim biçimini (ör. "mozjpeg" JPEG'leri sıkıştırır) sıkıştıran bir npm paketidir. Popüler resim biçimlerinde seçilebilecek birden fazla eklenti olabilir.

Eklenti seçerken göz önünde bulundurmanız 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 görüntü kalitesini düşürebilir. Bir eklenti "kayıplı " veya"kayıpsız " olup olmadığını belirtmiyorsa API'sine bakarak anlayabilirsiniz: Çıktının görüntü kalitesini belirleyebiliyorsanız "kayıplı"dır.

Çoğu kişi için kayıplı eklentiler en iyi seçenektir. Bu biçimler, dosya boyutunda önemli ölçüde tasarruf sağlar ve sıkıştırma düzeylerini ihtiyaçlarınıza göre özelleştirebilirsiniz. Aşağıdaki tabloda popüler Imagemin eklentileri listelenmiştir. Bu eklentiler, kullanabileceğiniz eklentilerin yalnızca bir kısmıdır ancak projeniz için iyi seçenekler olabilir.

Imagemin CLI

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ü

Imagemin'i bir paketleyiciyle kullanmak istiyorsanız seçtiğiniz paketleyicinin bu amaçla kullanılabilecek bir eklentisi olup olmadığını kontrol edin. Örneğin, Imagemin için mükemmel destek sunan popüler bir paketleyici olan webpack. Imagemin'i webpack ile kullanma hakkında daha fazla bilgiyi bu codelab'de bulabilirsiniz.

Imagemin'i tek başına bir Node komut dosyası olarak da kullanabilirsiniz. Bu kod, JPEG dosyalarını 50 kalitesinde sıkıştırmak için "imagemin-mozjpeg" eklentisini kullanır ("0" en kötü, "100" en iyi kalitedir):

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