Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • 評価
  • Imagemin
    • プラグイン
    • Imagemin CLI
    • Imagemin npm モジュール

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

Nov 5, 2018 — 更新済み Apr 6, 2020
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: 読み込み時間の高速化
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
このページ内
  • 評価
  • Imagemin
    • プラグイン
    • Imagemin CLI
    • Imagemin npm モジュール

これが大切な理由とは? #

圧縮されていない画像は、不要なバイトを増やし、ページを肥大化させます。右側の写真は左側の写真よりも 40% 小さいのですが、一般的なユーザーには同じように見えるのではないでしょうか。

20 KB

12 KB

評価 #

Lighthouse を実行して、画像を圧縮することでページの読み込みを改善するチャンスを探ります。圧縮が可能な場合は、「Efficiently encode images」の欄にその手段が表示されます。

image
現在 Lighthouse では、画像を JPEG 形式で圧縮する方法だけが報告されます。

Imagemin #

Imagemin は、さまざまな画像形式をサポートし、簡単にビルドスクリプトやビルドツールと連携できるため、画像圧縮にもってこいの選択肢です。Imagemin は、CLI と npm モジュールの両方として利用できます。一般的に、npm モジュールは、設定オプションが多く用意されているので最適な選択肢とされていますが、コードをいじらずに Imagemin を試してみたいという方は、CLI も使用できます。

プラグイン #

Imagemin は「プラグイン」を中心に構築されています。プラグインは、特定の画像形式を圧縮する npm パッケージです (たとえば、「mozjpeg」は JPEG を圧縮します)。人気の高い画像形式では、プラグインの選択肢が複数個ある場合があります。

プラグインを選択する際に考慮すべき点として、特に重要なのは、プラグインが「ロッシー」なのか「ロスレス」なのかという点です。後者の圧縮で、データが失われることはありません。前者の圧縮は、ファイルサイズを縮小できますが、画質が損なわれる可能性があります。プラグインが「ロッシー」なのか「ロスレス」なのかを示さない場合は、その API を見れば判断できます。出力の画質を指定できる場合は、「ロッシー」です。

多くの人にとっては、ロッシーなプラグインがベストでしょう。ファイルサイズを大幅に縮小し、ニーズに合わせて圧縮レベルをカスタマイズできます。下の表は、人気の高い Imagemin プラグインを示したものです。利用できるプラグインは他にもありますが、プロジェクトに使う選択肢としては、どれも申し分ありません。

画像形式ロッシープラグインロスレスプラグイン
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-webp

Imagemin CLI #

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

「images/」ディレクトリにある画像を圧縮して、同じディレクトリに保存するには、次のコマンドを実行します (元のファイルは上書きされます)。

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

Imagemin npm モジュール #

こうしたビルトツールの 1 つ使用する場合は、コードラボで webpack、gulp、または grunt のいずれかが搭載された Imaginemin をご覧ください。

Imagemin は、ノードスクリプトとして単独で使用することもできます。下のコードでは、"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);
})();
パフォーマンス
最終更新: Apr 6, 2020 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Using Imagemin with webpack
  • Using Imagemin with Gulp
  • Using Imagemin with Grunt
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.