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 モジュール

これらのビルドツールを使用する場合は、webpack、gulp、または grunt を使用して 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);
})();