このページは Cloud Translation API によって翻訳されました。

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

Katie Hempenius

検討すべき理由

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

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

20 KB	12 KB

測定

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

最小画像数

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

プラグイン

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

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

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

画像形式	ロッシープラグイン	ロスレスプラグイン
JPEG	imagemin-mozjpeg	imagemin-jpegtran
PNG	imagemin-pngquant	imagemin-optipng
GIF	imagemin-giflossy	imagemin-gifsicle
SVG	imagemin-svgo
WebP	imagemin-webp	imagemin-webp

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