ページを速くするために画像を圧縮する

画像を圧縮すべきタイミング

約 150KB を超え、ファーストビューやギャラリー、常に読み込まれるコンテンツに使う画像は優先して圧縮すると効果的です。装飾用画像はさらに小さくするのが理想です。

• ヒーロー画像は可能なら 200KB 未満
• 本文画像は可能なら 120KB 未満
• サムネイルやアイコンは可能なら 30KB 未満

まずは適切な形式を選ぶ

WebP のような新しい形式は大きく容量を減らせます。透過が必要なら WebP か PNG が適しています。WebP を使わない場合でも、写真には JPEG が有効です。

• WebP は全体的に最も扱いやすい
• JPEG は写真向き
• PNG は透過が必要な場合のみ

再現しやすいワークフローにする

先にリサイズし、そのあと圧縮しましょう。実際の表示サイズに合わせてから圧縮すると、見えないピクセルのために容量を浪費せずに済みます。