画像を効率的にエンコードする

Lighthouse レポートの [改善の機会] セクションには、最適化されていないすべての画像と、キビバイト(KiB)で削減できる容量が表示されます。ページの読み込みを速め、データ通信量を抑えるために、以下の画像を最適化します。

Lighthouse の「画像を効率的にエンコードする」監査のスクリーンショット

Lighthouse で最適化可能として画像を報告する仕組み

Lighthouse は、ページ上のすべての JPEG または BMP 画像を収集し、各画像の圧縮レベルを 85 に設定してから、元のバージョンと圧縮されたバージョンを比較します。削減可能なサイズが 4 KiB 以上の場合、Lighthouse は画像を最適化可能としてフラグを付けます。

画像を最適化する方法

画像を最適化するための方法は多数あります。以下にいくつか紹介します。

GUI ツールを使用して画像を最適化する

もう 1 つの方法は、パソコンにインストールして GUI として実行するオプティマイザーでイメージを実行することです。たとえば、ImageOptim では、画像を UI にドラッグ&ドロップすると、画質を著しく損なうことなく画像が自動的に圧縮されます。小規模なサイトを運営していて、すべての画像を手動で最適化できる場合は、このオプションで十分でしょう。

Squoosh も使用できます。Squoosh は Google ウェブ DevRel チームによってメンテナンスされています。

スタック固有のガイダンス

Drupal

画質を落とさずにサイトでアップロードされる画像のサイズを自動的に最適化して縮小できるモジュールの使用をご検討ください。また、サイトにレンダリングされるすべての画像に対して、Drupal から提供されるネイティブの Responsive Image Styles を使用していることをご確認ください。

Joomla

画質を落とさずに画像を圧縮できる画像最適化プラグインの使用をご検討ください。

Magento

画像を最適化するサードパーティ製 Magento 拡張機能の使用を検討してください。

WordPress

品質を維持しながらイメージを圧縮する画像最適化 WordPress プラグインの使用を検討してください。

リソース