このルールは、ページ上の画像を最適化して、視覚的な品質に大幅な影響を与えずにファイルサイズを削減できることを PageSpeed Insights が検出した場合にトリガーされます。
概要
画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。
推奨される解決方法
画像アセットの最適な形式と最適化方法を見つけるには、エンコードするデータの種類、画像形式の機能、画質の設定、解像度といった、さまざまな項目にわたる慎重な分析が必要です。また、画像をベクター形式で配信するのが最適かどうかや、必要とする効果を CSS を使って実現できるかどうか、端末の種類に合わせて適切に拡大縮小されたアセットを配信する方法についても検討する必要があります。
すべての種類の画像の最適化
- レスポンシブな画像を配信するためのおすすめの方法に従います。
- 個別の画像向けの最適化チェックリストに従います。
GIF、PNG、JPEG 画像の最適化
GIF、PNG、JPEG の各形式は、インターネットの画像トラフィック全体の 96% を占めています。こうした普及状況を受けて、PageSpeed Insights では形式ごとに具体的な最適化のおすすめの方法を提供しています。参考用として、最適化された画像を PageSpeed Insights から直接ダウンロードできます（modpagespeed.com の画像最適化ライブラリを使用しています）。
また、ImageMagick の convert バイナリなどのツールを使用して、同じような最適化を適用することもできます（下記の例を参照）。
サードパーティ製のツールを使用する場合、すでに画像が十分に最適化されていると、変換によって画像ファイルのサイズが大きくなることがあります。その場合は、元の画像を使用してください。
GIF と PNG は可逆圧縮の形式であり、圧縮処理によって画像が視覚的に変化することはありません。静止画像の場合、PNG は視覚的な品質を十分に保ったままで容量を大幅に圧縮できます。アニメーション画像の場合は、容量を十分に圧縮できるよう、GIF の代わりに video 要素の使用を検討してください。
- 元の画像がアニメーションの場合や容量が極めて小さい（数百バイト未満）場合を除き、GIF は常に PNG に変換します。
- GIF と PNG の両方において、すべてのピクセルが不透明な場合はアルファ チャンネルを削除します。
たとえば、convert バイナリを使用して、次のコマンドで GIF 画像や PNG 画像を最適化できます（角かっこ内のパラメータは任意です）。
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG は非可逆圧縮の形式です。圧縮処理によって画像の視覚的な細かさが失われますが、圧縮比は GIF や PNG よりも 10 倍高くなることもあります。
- 画質が 85 を超えている場合は、85 に下げます。画質が 85 を超えると画像の容量が急増しますが、視覚的な品質はほとんど向上しません。
- 人間の視覚系は輝度に比べて色への感度が低いため、クロマ サンプリングを 4:2:0 に下げます。
- 10 キロバイトを超える画像にはプログレッシブ JPEG 形式を使用します。大きい画像の場合、通常はベースライン JPEG よりもプログレッシブ JPEG のほうが圧縮比が高くなるうえ、段階的にレンダリングされるという利点もあります。
- 画像が白黒の場合は、グレースケールの色空間を使用します。
たとえば、convert バイナリを使用して、次のコマンドで JPEG 画像を最適化できます（角かっこ内のパラメータは任意です）。
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
