画像圧縮

画像圧縮は、視覚的な品質を損なうことなくファイルサイズを削減します。画像は多くの場合、ページ容量の大部分を占めるため、効果的な圧縮はサイトの速度を向上させる最も迅速な方法の一つです。

画像圧縮の重要性

サイズの大きい画像は、以下の要因でパフォーマンスを低下させます：

• ページの読み込み時間
• モバイルでのパフォーマンス
• Largest Contentful Paint (LCP)

業界の観測: 多くのコンテンツサイトやEコマースサイトでは、画像がページ全体のデータサイズの50〜70％を占めています。

例:

あるオンラインカタログサイトでは、商品画像を圧縮し、WebP形式に切り替えました。その結果、平均ページサイズが60％以上減少し、モバイルの読み込み時間が4.1秒から2.3秒に改善されました。

画像圧縮のベストプラクティス

• 最新のフォーマット（WebPまたはAVIF）を使用する
• 実際の表示サイズに合わせて画像サイズを変更する
• 可逆圧縮または適切な非可逆圧縮を適用する
• CSSで縮小表示するためにフルサイズの画像を配信することを避ける

圧縮は配信時だけでなく、アップロード前に行う必要があります。

よくある画像の間違い

• カメラで撮影したRAW画像をそのままアップロードする
• 写真素材にPNGを使用する
• CMSの自動リサイズ機能のみに頼る