ブログに使える画像形式まとめ
ブログに使える画像形式まとめ
ブログに使える画像形式をまとめてみました。
| 形式 | 特徴 | メリット | デメリット | 用途のおすすめ |
|---|---|---|---|---|
| JPG (JPEG) | 写真向きの非可逆圧縮 | ・ファイルサイズが小さい ・写真の表現に強い ・互換性が高い | ・圧縮で画質劣化 ・文字や線画はにじみやすい | 写真、背景画像 |
| PNG | 可逆圧縮、透過対応 | ・画質劣化なし ・文字や線画がくっきり ・透過背景対応 | ・ファイルサイズが大きくなりやすい | ロゴ、イラスト、スクショ |
| SVG | ベクター形式 | ・拡大縮小しても劣化なし ・軽量 ・テキスト編集可能 | ・複雑な画像は重い ・写真には不向き | ロゴ、アイコン、図形 |
| GIF | 256色、アニメ対応 | ・アニメーション可能 ・透過対応 | ・色数制限あり ・サイズ大きめ | 短い動きのある画像 |
| WebP | Google開発の次世代形式 | ・JPG/PNGより高圧縮・高画質 ・透過/アニメ対応 | ・古いブラウザは非対応 | 写真・イラスト全般 |
| AVIF | 最新の高圧縮形式 | ・WebPより高効率 ・HDR対応 | ・ブラウザ対応がまだ限定的 | 最新環境向け、軽量化重視 |
| HEIC/HEIF | iPhone標準形式 | ・高画質かつ小サイズ | ・ブラウザ互換性が低い | iPhone撮影 → 変換して利用 |
まとめ
シンプルなロゴやアイコンなどは SVG で、写真やイラストなどは WebP を使うと軽く配信できるようです。
