Imagemin を使用して画像を圧縮する

Katie Hempenius

検討すべき理由

非圧縮の画像は、不要なバイトでページを肥大化させます。画像は Largest Contentful Paint（LCP）の候補となる可能性があるため、不要なバイト数によって画像のリソース読み込み時間が増加し、LCP の時間が長くなることがあります。

右側の写真は左側の写真より 40% 小さいですが、平均的なユーザーには同じに見えるでしょう。

測定

Lighthouse を実行して、画像を圧縮することでページの読み込みを改善できるかどうかを確認します。これらの改善案は [画像を効率的にエンコードする] に表示されます。

最小画像数

Imagemin は、さまざまな画像形式をサポートし、ビルド スクリプトとビルドツールと簡単に統合できるため、画像圧縮に最適です。Imagemin は、CLI と npm モジュールの両方として使用できます。通常、npm モジュールはより多くの構成オプションを提供するため、最適な選択肢ですが、コードに変更を加えることなく Imagemin を試したい場合は、CLI が適切な代替手段となります。

プラグイン

Imagemin は「プラグイン」を中心に構築されています。プラグインは、特定の画像形式を圧縮する npm パッケージです（例: 「mozjpeg」は JPEG を圧縮します）。一般的な画像形式には、選択できるプラグインが複数ある場合があります。

プラグインを選択する際に最も重要なのは、「非可逆」か「可逆」かです。ロスレス圧縮では、データが失われることはありません。非可逆圧縮ではファイルサイズが小さくなりますが、画質が低下する可能性があります。プラグインが「ロスレス」か「非ロスレス」かを明記していない場合は、API で確認できます。出力の画質を指定できる場合は「非ロスレス」です。

ほとんどのユーザーには、非可逆圧縮プラグインが最適です。ファイルサイズを大幅に削減でき、ニーズに合わせて圧縮レベルをカスタマイズできます。次の表に、一般的な Imagemin プラグインを示します。これらは利用可能なプラグインではありませんが、いずれもプロジェクトに適しています。

Imagemin CLI

Imagemin CLI は、imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant、imagemin-svgo の 5 つの異なるプラグインと連携します。Imagemin は、入力の画像形式に基づいて適切なプラグインを使用します。

「images/」ディレクトリ内のイメージを圧縮して同じディレクトリに保存するには、次のコマンドを実行します（元のファイルが上書きされます）。

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

Imagemin npm モジュール

Imagemin をバンドルと一緒に使用する場合は、選択したバンドルに利用可能なプラグインがあるかどうかを確認してください。たとえば、webpack は Imagemin をサポートしている一般的なバンドルツールです。詳しくは、webpack で Imagemin を使用する方法に関する Codelab をご覧ください。

Imagemin を Node スクリプトとして単独で使用することもできます。このコードは、「imagemin-mozjpeg」プラグインを使用して JPEG ファイルを 50 の品質に圧縮します（最悪は 0、最高は「100」）。

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