[no_toc]
主要ブラウザの対応画像フォーマットの一覧
| JPEG | GIF | PNG | APNG | BMP | WebP | HEIF | |
|---|---|---|---|---|---|---|---|
| Chrome | ○ | ○ | ○ | ○ | ○ | ○ | × |
| Firefox | ○ | ○ | ○ | ○ | ○ | ○ | × |
| Safari | ○ | ○ | ○ | ○ | ○ | ○ | × |
| 新Edge | ○ | ○ | ○ | ○ | ○ | ○ | × |
| 旧Edge | ○ | ○ | ○ | × | ○ | ○ | × |
| IE11 | ○ | ○ | ○ | × | ○ | ○ | × |
- 2021年8月現在
- Safariは、iOS 14／macOS Big Surに搭載されたSafari14からようやくwebpフォーマットに対応した。
（ライバルのGoogle製フォーマットということで、今までは対応してこなかった）
各画像フォーマットの特性
| 画像形式 | 主な用途 | 透過 | 可逆 圧縮 | アニメー ション | 備考 |
|---|---|---|---|---|---|
| JPEG | 色数の多い写真 | × | × | × | 圧縮倍率が変更可能。 上書き保存で画質が劣化する。 |
| PNG | 比較的色数の少ない写真、 イラスト、ロゴ | ○ | ○ | × | |
| GIF | 色数の少ないイラスト、 ロゴ | ○ | ○ | ○ | 256色しか使えない。 アニメーション可能 |
| WebP | 色数の多い写真 | ○ | ○ | ○ | 同画質でJPEGより25〜35% 程度ファイルサイズを節約可能。 ブラウザでのデコード処理が高速。 |
| APNG | アニメーション | ○ | ○ | ○ | アニメーションGIFに代わる 次世代の画像フォーマット。 画像フチのジャギーが発生しない。 |
| HEIF | 色数の多い写真 | ○ | ○ | ○ | JPEGに比べ高画質・高圧縮。 iPhoneの標準フォーマット。 |
参考
画像ファイルフォーマットの比較 - Wikipedia
ja.wikipedia.org
コメント