画像はたいていページで最も重い要素なので、選ぶフォーマットは読み込み時間——そして Core Web Vitals と SEO——に実際に影響します。正しい選び方を紹介します。
これは自分たちで計測しました。 その結果わかったのは、「小さいフォーマット」というものは存在しないということです。同じコンバーター、同じ初期設定、2 枚の画像で、写真は 85% 小さくなり、UI スクリーンショットは 142% 大きくなりました。どの形式が有利かは、形式そのものよりも「絵の中身」でほぼ決まります。 計測データ全体を見る
4 枚のテスト画像すべてで勝った形式が 1 つあります。 PNG → WebP を自分たちのコンバーターで実測:写真 1.88 MB → 303.1 KB(-84%)、UI スクリーンショット 18.0 KB → 7.3 KB(-59%)、フラットイラスト 34.7 KB → 10.2 KB(-71%)、透明ロゴ 28.8 KB → 7.5 KB(-74%)で透明も保持。4 枚すべてで達成した変換先は他にありません。正直な補足は実測ラボにあります。GIF が元の場合、WebP は逆に 27% 増えました。「WebP は常に勝つ」は近道の言い方で、法則ではありません。
用途別のクイック回答
- 写真:WebP(JPEG フォールバック付き)。同じ画質で JPEG より約 25〜35% 小さい。最小にしたく、読者が最新ブラウザなら AVIF。
- ロゴ・アイコン・単純な図形:SVG——極小で、どんなサイズでも鮮明。
- スクショ・文字を含む画像・透過が必要:PNG(透過対応の WebP でも可)。
- アニメーション:短い動画(MP4/WebM)が重い GIF に勝ります。単純ならアニメーション WebP。
私たちの実測がその表を裏づけます。PNG → WebP を 4 種類の画像で:写真 1.88 MB → 303.1 KB(-84%)、UI スクリーンショット 18.0 KB → 7.3 KB(-59%)、フラットイラスト 34.7 KB → 10.2 KB(-71%)、透明ロゴ 28.8 KB → 7.5 KB(-74%)で透明も保持。1 つの形式が 4 枚すべてで勝ちました。だからこの推奨は退屈なのです。
なぜ形式が速度に影響するか
すべての KB が Largest Contentful Paint に加算されます。400 KB の WebP で足りるところに 2 MB の JPEG を置くと、ページが遅くなり、モバイル利用者を損ない、ランキング指標も下げます。解決は通常:正しい形式 + 正しい寸法 + 適切な圧縮。
「一律こうする」と書く前に、正直な例外を知っておく価値があります。4.3 KB の透明 GIF は WebP で 5.4 KB(+27%)。小さなパレット画像に対して、現代のコーデックが取り戻せるものはありません。「全部 WebP に」は平均としては正しく、「もともと小さくもともと非可逆」なファイルには誤りです。
シンプルな手順
- 上のリストから形式を選ぶ。
- 実際に表示される最大サイズにリサイズ——カメラのフル解像度ではなく。
- 圧縮して最後のバイトを削る。
形式の詳細は AVIF vs WebP vs JPEG と WebP とは を。
無料・ブラウザ内で
- WebP に変換——Web 写真の日常的な最適解。
- 画像を圧縮・画像をリサイズ——さらにバイトを削減。
- PNG を SVG に変換——ロゴをベクター化して二度と粗くならない。
要約:写真は WebP、ロゴは SVG、透過は PNG。公開前に必ずリサイズ + 圧縮。
フォーマット早見表
| フォーマット | 得意 | 透過 | アニメ | 圧縮 |
|---|---|---|---|---|
| JPEG | 写真 | なし | なし | 非可逆 |
| PNG | スクショ・単色図形 | あり | なし | 可逆 |
| WebP | 写真も図形も | あり | あり | 可逆+非可逆 |
| AVIF | 最小の写真 | あり | あり | 可逆+非可逆 |
| SVG | ロゴ・アイコン・線画 | あり | あり(CSS) | ベクター |
| GIF | 旧式アニメのみ | 1 ビット | あり | パレット |
この表は習慣ではなく画像の中身で読んでください。単色のロゴを PNG で保存すると 40 KB になることがありますが、同じロゴを SVG にすれば多くの場合 5 KB 未満で、どんなサイズでも鮮明なままです。逆に写真を PNG で保存すると、JPEG や WebP 版の数倍になり得ます。可逆圧縮は写真に満ちた微妙な階調を捨てられないからです。2つの定番で迷うなら PNG と JPG の選び方 が参考になります。
互換性とのトレードオフ
新しい形式ほどサイズで勝りますが、届く範囲は狭まります。AVIF は最小ですが、古いブラウザや一部のメールソフトはまだ表示できません。WebP は今やほぼどこでも安全です。プロの一手は、全体で1つの形式に決めることではなく、新形式にフォールバックを添えて提供し、各ブラウザに理解できる最良版を選ばせることです。
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="製品メイン画像" width="1200" height="800" />
</picture>ブラウザはまず AVIF、次に WebP を試し、どちらも無理なら JPEG に戻ります。width と height の属性は場所を確保し、読み込み中にレイアウトがずれないようにします——これも Core Web Vitals の加点です。
互換性のトレードオフには値札があり、それは現代形式と一緒に出すフォールバックの費用です。私たちの WebP イラストを古い形式に戻すと:
| 変換 | WebP 入力 | 結果 | 変化 |
|---|---|---|---|
| WebP → JPG | 10.8 KB | 23.7 KB | +119% |
| WebP → PNG | 10.8 KB | 94.0 KB | +769% |
| WebP → JPG | 7.6 KB | 16.5 KB | +118% |
同じ絵で、JPG フォールバックは 23.7 KB(+119%)、PNG フォールバックは 94.0 KB(+769%)。ブラウザが誤った分岐を選んだとき、source を 2 つ持つ <picture> の実際の重さがこれです。だから正直な問いは「WebP は対応しているか」ではなく、「フォールバックを受け取る訪問者はいくら払うのか」です。
迷ったときの選び方
- 透過が必要な写真? WebP か AVIF——高い圧縮率とアルファチャンネルを両立できる唯一のラスター形式です。
- 拡大縮小するアイコン? まず SVG。図版が細かすぎてきれいにベクター化できないときだけ PNG に。
- アニメーション? MP4/WebM 動画を優先。10 秒のクリップは GIF だと数 MB になり得ますが、動画なら数十 KB で済むことが多いです。
よくある質問
WebP は必ず JPEG より小さい?
写真ならほぼ必ず——同じ見た目の品質で約 25〜35% です。画像がとても小さいと差は縮み、高度に最適化した JPEG が拮抗することもあるので、1バイトを争うなら実測を。
JPEG や PNG は削除すべき?
いいえ。フォールバックとして、またマスターとして残しましょう。元のソースから WebP に変換すると、すでに非可逆な JPEG から変換するよりきれいな結果になります。