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

Katie Hempenius

検討すべき理由

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

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

測定

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

Imagemin

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