画像はたいていページで最も重い要素なので、選ぶフォーマットは読み込み時間——そして Core Web Vitals と SEO——に実際に影響します。正しい選び方を紹介します。
用途別のクイック回答
- 写真:WebP(JPEG フォールバック付き)。同じ画質で JPEG より約 25〜35% 小さい。最小にしたく、読者が最新ブラウザなら AVIF。
- ロゴ・アイコン・単純な図形:SVG——極小で、どんなサイズでも鮮明。
- スクショ・文字を含む画像・透過が必要:PNG(透過対応の WebP でも可)。
- アニメーション:短い動画(MP4/WebM)が重い GIF に勝ります。単純ならアニメーション WebP。
なぜ形式が速度に影響するか
すべての KB が Largest Contentful Paint に加算されます。400 KB の WebP で足りるところに 2 MB の JPEG を置くと、ページが遅くなり、モバイル利用者を損ない、ランキング指標も下げます。解決は通常:正しい形式 + 正しい寸法 + 適切な圧縮。
シンプルな手順
- 上のリストから形式を選ぶ。
- 実際に表示される最大サイズにリサイズ——カメラのフル解像度ではなく。
- 圧縮して最後のバイトを削る。
形式の詳細は AVIF vs WebP vs JPEG と WebP とは を。
無料・ブラウザ内で
- WebP に変換——Web 写真の日常的な最適解。
- 画像を圧縮・画像をリサイズ——さらにバイトを削減。
- PNG を SVG に変換——ロゴをベクター化して二度と粗くならない。
要約:写真は WebP、ロゴは SVG、透過は PNG。公開前に必ずリサイズ + 圧縮。