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

Katie Hempenius

検討すべき理由

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

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

測定

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

最小画像数

Imagemin は幅広い変換をサポートするため、画像圧縮に最適な選択肢です。 イメージ形式が多岐にわたり、ビルド スクリプトや できます。Imagemin は、 CLI と npm このモジュールをご覧ください。一般的に、npm モジュールは 構成オプションが多いため最適な選択肢ですが、CLI も コードに触れずに Imagemin を試してみたい場合は、この代替手段を利用できます。

プラグイン

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

プラグインを選択する際に考慮すべき最も重要なことは、プラグインが 「ロッシー」「ロスレス」です。可逆圧縮では、データは失われません。ロッシー 圧縮するとファイルサイズが小さくなりますが、その代わりに画像が小さくなります 向上しますプラグインに「lossy」かどうかが言及されていない場合「ロスレス」 API で判断できます。出力の画質を指定できる場合は、 「損失あり」です。

ほとんどの場合、ロッシー プラグインが最適です。同社が提供するのは ファイルサイズも大幅に削減できます。また、圧縮レベルを 選択できます。次の表に、一般的な Imagemin プラグインを示します。他にも どれもプロジェクトに適した選択肢です

Imagemin CLI

Imagemin CLI は、imagemin-gifsicle、imagemin-gifsicle、imagemin-gifsicle、 imagemin-jpegtran、imagemin-optipng、imagemin-pngquant、imagemin-svgo Imagemin は、アプリケーションの画像形式に基づいて適切なプラグインを使用します。 表示されます。

"images/" フォルダ内の画像を圧縮するには、同じディレクトリに保存し、 次のコマンドを実行して、元のファイルを上書きします。

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

Imagemin npm モジュール

これらのビルドツールのいずれかを使用する場合は ラボで Imagemin の Codelab を webpack、gulp、 （うるうるなど）。

Imagemin を単独で Node スクリプトとして使用することもできます。 このコードは、「imagemin-mozjpeg」を使用してプラグインを使用して、JPEG ファイルを （「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);
})();