Menggunakan Imagemin untuk mengompresi gambar

Katie Hempenius
Katie Hempenius

Mengapa Anda perlu tahu?

Gambar yang tidak dikompresi akan memenuhi halaman Anda dengan byte yang tidak diperlukan. Karena gambar dapat berupa kandidat untuk Largest Contentful Paint (LCP), byte yang tidak perlu tersebut dapat menambahkan waktu pemuatan resource yang tidak perlu, yang dapat mengakibatkan waktu LCP yang lebih lama.

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

20 KB

12 KB

Ukur

Jalankan Lighthouse untuk memeriksa peluang meningkatkan pemuatan halaman dengan mengompresi gambar. Peluang ini tercantum pada "Mengenkode gambar secara efisien":

gambar

Minimal gambar

Imagemin adalah pilihan tepat 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 untuk dipilih.

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

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

CLI imagemin

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 dalam direktori "images/" dan menyimpannya ke direktori yang sama, jalankan perintah berikut (menimpa file asli):

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

Modul npm Imagemin

Jika Anda menggunakan salah satu alat build ini, periksa codelab untuk Imagemin dengan webpack, gulp, atau grunt.

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