画像の最適化

Silktide はページ上の画像をダウンロードし、見た目を変えずに大幅に小さくできるかをテストします。小さくできる画像については、削減可能な容量とともに報告されるため、効果の大きい改善から優先して対応できます。

重要な理由

通常、ウェブページの容量の大部分を画像が占めているため、画像はパフォーマンスを改善する最大の機会になることが多いです。サイズの大きすぎる画像はページの表示を遅くし、離脱を測定可能なほど増加させます。特にモバイル接続ではその傾向が強く、訪問者の通信量とバッテリーも余分に消費します。ページ速度はを通じて検索順位にも影響します。

パフォーマンス改善の多くとは異なり、画像の最適化でトレードオフが生じることはほとんどありません。適切に圧縮された画像は、見た目も動作も変わりません。ほぼ無料で実現できるパフォーマンス改善です。

修正方法

報告された画像を圧縮します。ほぼすべての画像ツールで書き出し時に圧縮できます。写真は通常、品質を約 85% にした JPEG にすると、見た目の劣化を最小限に抑えながらファイルサイズを大幅に削減できます。
適切な形式を使用します。写真には JPEG（または WebP/AVIF）、ロゴ、アイコン、その他の単色の図形には PNG または SVG を使用します。プラットフォームが対応している場合は、WebP や AVIF などの最新形式の方が優れています。
自動化します。ほとんどの、ビルドパイプライン、は、アップロード時または配信時に画像を圧縮・変換できます。パイプラインを修正すれば、問題の再発を防げます。
レスポンシブ画像（srcset）を使用して、すべてのデバイスに1枚の巨大な画像を配信するのではなく、表示されるサイズで画像を配信します。

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="夕暮れのブドウ畑">

Silktide によるテスト方法

各ページが実際に読み込む画像を収集します。
画像の形式に適した手法で、それぞれの画像を再圧縮します。プログレッシブ JPEG は品質 85%、PNG は非可逆および可逆で再圧縮、SVG は、GIF は再最適化を行います。
最良の結果を元の画像と比較します。削減量が意味のある範囲、つまり 20% を超えて小さくなり、かつ 40 KB を超えて削減できる場合にのみ画像を報告します。
各画像について削減可能な容量を報告し、最も大きな削減量が目立つようにします。

トラブルシューティング

画像はすでに圧縮されているように見える

報告される削減量は推定ではなく測定値です。Silktide が実際により小さいファイルを生成しています。最適化済みのように見える画像でも 20% 削減できる一般的な理由として、埋め込みメタデータ、プログレッシブではない JPEG エンコード、写真に PNG を使用していることなどがあります。

画像を最適化する CDN を使用している

Silktide はページが実際に配信した画像をテストします。そのため、報告された画像が CDN を経由している場合、その最適化が適用されていないか、十分ではなかったことになります。該当するパスまたは形式について、CDN の設定を確認してください。

削減量が小さいように見える

最適な状態から 20% 未満、または 40 KB 未満しか差がない画像は報告されません。報告された削減量が小さく見えても、すべての訪問者によるページビューごとに適用されることを忘れないでください。