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

Lighthouseレポートの[Opportunities]セクションには、最適化されていないすべての画像が表示され、節約できると考えられるデータ量がキビバイト (KiB) で表示されます。こうした画像を最適化することにより、ページの読み込み速度を改善し、消費するデータ量を減らします。

# Lighthouseが画像を最適化可能とフラグする仕組み

Lighthouseは、ページ上のすべてのJPEGまたはBMP画像を収集し、各画像の圧縮レベルを85に設定してから、元のバージョンと圧縮されたバージョンを比較します。節約可能と思われるデータ量が4KiB以上ある場合、Lighthouseは画像が最適化可能であるとフラグします。

# 画像を最適化する方法

画像を最適化するためのステップは、以下を含め、実践できることがたくさんあります。

• 画像CDNを使用する
• 画像を圧縮する
• アニメーションGIFを動画に置き換える
• 画像を遅延読みする
• レスポンシブ画像を提供する
• 正しいサイズの画像を提供する
• WebP画像を使用する

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

もう1つのアプローチは、コンピューターにインストールしてGUIとして実行するオプティマイザ―を使って画像を最適化するという方法です。たとえば、ImageOptimを使用する場合は、そのUIに画像をドラッグアンドドロップすると、その画像はクオリティを失わずに自動的に圧縮されます。小規模なサイトを運営していて、すべての画像を手動で最適化できるという方にとっては、この選択肢で事足りると思います。

別の選択肢にSquooshというものがあります。Squooshは、Google Web DevRelチームが管理しています。

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

# Drupal

品質を維持しながら、サイトを通じてアップロードされた画像のサイズを自動的に最適化および縮小するモジュールの使用を検討してください。また、Drupalに組み込まれたレスポンシブ画像スタイル (Drupal 8以降で使用可能) をサイトでレンダリングされるすべての画像に使用していることを確認してください。

# Joomla

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

# Magento

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

# WordPress

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

# リソース

• Efficiently encode images (画像を効率的にエンコードする) 監査のソースコード