画像を効率的にエンコードする
Lighthouseレポートの[Opportunities]セクションには、最適化されていないすべての画像が表示され、節約できると考えられるデータ量がキビバイト (KiB) で表示されます。こうした画像を最適化することにより、ページの読み込み速度を改善し、消費するデータ量を減らします。
Lighthouseが画像を最適化可能とフラグする仕組み #
Lighthouseは、ページ上のすべてのJPEGまたはBMP画像を収集し、各画像の圧縮レベルを85に設定してから、元のバージョンと圧縮されたバージョンを比較します。節約可能と思われるデータ量が4KiB以上ある場合、Lighthouseは画像が最適化可能であるとフラグします。
画像を最適化する方法 #
画像を最適化するためのステップは、以下を含め、実践できることがたくさんあります。
GUIツールを使用して画像を最適化する #
もう1つのアプローチは、コンピューターにインストールしてGUIとして実行するオプティマイザ―を使って画像を最適化するという方法です。たとえば、ImageOptimを使用する場合は、そのUIに画像をドラッグアンドドロップすると、その画像はクオリティを失わずに自動的に圧縮されます。小規模なサイトを運営していて、すべての画像を手動で最適化できるという方にとっては、この選択肢で事足りると思います。
別の選択肢にSquooshというものがあります。Squooshは、Google Web DevRelチームが管理しています。
スタック固有のガイダンス #
Drupal #
品質を維持しながら、サイトを通じてアップロードされた画像のサイズを自動的に最適化および縮小するモジュールの使用を検討してください。また、Drupalに組み込まれたレスポンシブ画像スタイル (Drupal 8以降で使用可能) をサイトでレンダリングされるすべての画像に使用していることを確認してください。
Joomla #
品質を維持しながら画像を圧縮する画像最適化プラグインの使用を検討してください。
Magento #
画像を最適化するサードパーティのMagento拡張機能を使用することを検討してください。
WordPress #
品質を維持しながら画像を圧縮するWordPressの画像最適化用プラグインを使用することを検討してください。