Menggunakan Imagemin untuk mengompresi gambar

Katie Hempenius

Mengapa Anda harus peduli?

Gambar tanpa kompresi akan membengkak halaman Anda dengan byte yang tidak perlu. Karena gambar dapat menjadi kandidat untuk Largest Contentful Paint (LCP), byte yang tidak diperlukan tersebut dapat meningkatkan durasi pemuatan resource gambar, yang mungkin mengakibatkan waktu LCP yang lebih lama.

Foto di sebelah kanan 40% lebih kecil daripada foto di sebelah kiri, tetapi mungkin akan terlihat sama dengan foto rata-rata pengguna.

Ukur

Jalankan Lighthouse untuk memeriksa peluang guna meningkatkan pemuatan halaman dengan mengompresi gambar. Peluang ini tercantum di bagian "Enkode gambar secara efisien":

Gambar mini

Imagemin adalah pilihan yang sangat baik untuk kompresi gambar karena mendukung berbagai format gambar dan mudah diintegrasikan dengan skrip build dan build alat. Imagemin tersedia sebagai CLI dan npm ini. Umumnya, modul npm pilihan terbaik karena menawarkan lebih banyak pilihan konfigurasi, tetapi CLI dapat alternatif yang baik jika Anda ingin mencoba {i> Imagemin<i} tanpa menyentuh kode apa pun.

Plugin

Imagemin dibuat berdasarkan "plugin". Plugin adalah paket npm yang mengompresi format gambar tertentu (mis. "mozjpeg" mengkompres JPEG). Format gambar populer mungkin memiliki beberapa plugin untuk dipilih.

Hal terpenting yang perlu dipertimbangkan saat memilih plugin adalah apakah plugin "lossy" atau "{i>lossless<i}." Pada kompresi lossless, tidak ada data yang hilang. Rusak kompresi mengurangi ukuran file, tetapi dengan mengorbankan kemungkinan mengurangi {i>sandwich<i} itu. Jika plugin tidak menyebutkan apakah plugin tersebut "lossy" atau tidak atau "lossless", Anda bisa tahu dari API-nya: jika Anda bisa menentukan kualitas gambar dari output, maka adalah "{i>lossy<i}."

Bagi kebanyakan orang, plugin lossy adalah pilihan terbaik. Mereka menawarkan secara signifikan penghematan ukuran file yang lebih besar, dan Anda dapat menyesuaikan tingkat kompresi untuk memenuhi dan kebutuhan Anda. Tabel di bawah mencantumkan plugin Imagemin populer. Ini bukan satu-satunya plugin yang tersedia, tetapi semuanya akan menjadi pilihan yang baik untuk proyek Anda.

CLI Imagemin

CLI Imagemin bekerja dengan 5 plugin berbeda: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, dan imagemin-svgo. Imagemin menggunakan plugin yang sesuai berdasarkan format gambar input teks.

Untuk mengompresi gambar di "images/" dan menyimpannya ke direktori, jalankan perintah berikut (akan menimpa file asli):

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

Modul npm imagemin

Jika Anda menggunakan salah satu {i>build tools<i} ini, lihat codelab untuk Imagemin dengan webpack, gulp, atau mendengus.

Anda juga dapat menggunakan Imagemin sebagai skrip Node. Kode ini menggunakan "imagemin-mozjpeg" plugin untuk mengompresi file JPEG ke kualitas dari 50 ('0' adalah yang terburuk; '100' adalah yang terbaik):

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