画像最適化ガイド

用途に合わせて形式を選ぶ

写真では通常 JPEG が最初の候補になります。ブラウザ対応に問題がなく圧縮率を重視するなら WebP が有力な既定値です。透明背景やくっきりした UI 書き出しでは PNG がまだ重要で、Base64 画像データは非常に小さな素材や埋め込み制約がある場合に限って意味があります。

大きすぎる素材の隠れたコスト

ファイルサイズが妥当に見えても、ピクセル寸法が大きすぎると体験を損ないます。ブラウザはそのピクセルをデコードし、ラスタライズする必要があるからです。圧縮だけしてリサイズを忘れる、またはレイアウトに対して大きすぎる WebP を作ってしまうケースはよくあります。よい最適化では、バイト数と表示寸法の両方を確認します。

• 表示領域が元画像よりかなり小さい場合は、圧縮前にリサイズします。
• 画質比較は 100% 表示だけでなく、実際のレイアウトサイズでも確認します。
• 大きな画像ではインライン Base64 を避けます。payload の増加が転送とキャッシュに悪影響を与えるためです。

実用的な最適化ループ

まず元ファイルから始め、レイアウトが本当に必要とする最大サイズまで縮小し、想定する出力形式で圧縮してから、見た目と数値の両方で比較します。ヒーローセクション用の素材ならモバイル表示も確認してください。ドキュメントや UI ガイド用なら、圧縮率より可読性を優先します。