Menggunakan Imagemin untuk mengompresi gambar

Katie Hempenius

Mengapa Anda harus peduli?

Gambar yang tidak dikompresi membuat halaman Anda penuh 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 menyebabkan waktu LCP lebih lama.

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

Ukur

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

Imagemin

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

Plugin

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

Hal terpenting yang perlu dipertimbangkan saat memilih plugin adalah apakah plugin tersebut "lossy" atau "lossless". Dalam kompresi lossless, tidak ada data yang hilang. Kompresi lossy mengurangi ukuran file, tetapi berpotensi mengurangi kualitas gambar. Jika plugin tidak menyebutkan apakah plugin tersebut "lossy" atau "lossless", Anda dapat mengetahuinya dari API-nya: jika Anda dapat menentukan kualitas gambar output, maka plugin tersebut adalah "lossy".

Untuk sebagian besar orang, plugin lossy adalah pilihan terbaik. Format ini menawarkan penghematan ukuran file yang jauh lebih besar, dan Anda dapat menyesuaikan tingkat kompresi untuk memenuhi kebutuhan Anda. Tabel di bawah mencantumkan plugin Imagemin populer. Ini bukan satu-satunya plugin yang tersedia, tetapi semuanya akan menjadi pilihan yang baik untuk project Anda.

Imagemin CLI

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

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

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

Modul npm Imagemin

Jika Anda ingin menggunakan Imagemin dengan bundler, periksa apakah bundler pilihan Anda memiliki plugin yang tersedia untuknya. Misalnya, webpack adalah bundler populer yang memiliki dukungan yang sangat baik untuk Imagemin. Anda dapat mempelajari lebih lanjut cara menggunakan Imagemin dengan webpack dalam codelab ini.

Anda juga dapat menggunakan Imagemin sendiri sebagai skrip Node. Kode ini menggunakan plugin "imagemin-mozjpeg" untuk mengompresi file JPEG dengan kualitas 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);
})();