ポイント
• Web上の写真はWebPが現在の標準です。データ通信量を大幅に削減できます（MDN Web Docs, 2026）。
• 拡大してもぼやけないロゴを作るには、SVGフォーマットが必要です。
• 風景写真などをPNGで保存しないでください。ファイルサイズが巨大になります。
フォーマットごとに役割がある
間違ったフォーマットを選ぶと、画像の画質が落ち、Webサイトの表示速度が極端に遅くなります。PNGはすべてのピクセルデータを保持します。そのため、PNGを複雑な写真に使うとファイルが重くなり、ユーザーはページを見る前に離脱します。Webの標準仕様についてはW3Cのドキュメントを確認してください。画像をすぐに直すには、画像フォーマット変換ツールを使用します。変換後、圧縮ツールでさらにサイズを減らしてください。
古いJPG写真をWebPに変換するだけで、ページのデータ量が最大60%減少します。この最適化は、GoogleのSEO順位を直接引き上げる強力な要因です。
正しいフォーマットの選び方
出力する前に、画像の特性を確認してください。
- 色数の多い写真：WebPまたはJPGを選びます。非可逆圧縮（Lossy）により、サイズを劇的に小さくできます。
- グラフィックと透明背景：背景のない画像やスクリーンショットにはPNGを使用します。
- Webサイトのロゴ：必ずSVGを選択します。これは数学的なデータなので、どれだけ拡大しても劣化しません。
- 画像内にSEO上重要なテキストが含まれている場合は、OCRツールで文字を抽出し、画像のAltタグに設定してください。
フォーマットの比較
| フォーマット名 | 圧縮方式 | 透明化のサポート | 最適な用途 |
|---|---|---|---|
| JPG | 非可逆圧縮（データ削減） | なし | カメラの写真 |
| PNG | 可逆圧縮（品質保持） | あり | スクリーンショット、図解 |
| WebP | 両方に対応 | あり | Webサイトの標準画像 |
| SVG | ベクター（数式） | あり | アイコン、企業ロゴ |
よくある質問
古いブラウザのために、念のためJPGも用意すべきですか？
現在、すべてのモダンブラウザ（Safari、Edge、Chrome）がWebPをサポートしています。特別な理由がない限り、JPGを予備として用意する必要はありません。
可逆圧縮（Lossless）とはどういう意味ですか？
システムがデータをZIPファイルのように圧縮することを意味します。ブラウザが画像を表示するとき、失われたデータは一切なく、元のピクセルがそのまま復元されます。