画像形式の違い(jpg,gif,png,apng,webp,svg)

画像形式にはjpeg, gif, pngなどの種類があります。それぞれ特徴を理解して正しく選択できるように、押さえておきたい形式について整理します。

画像形式の比較

比較

押さえておきたい画像フォーマットについて整理します。

形式 画像種別
[※1]
圧縮
[※2]
透明度の設定
(アルファチャンネル)
アニメーション インターレース
jpg
jpeg
ラスター画像
1677万色
非可逆圧縮 × ×
gif ラスター画像
256色
可逆圧縮
png ラスター画像
png-8: 256色
png-24: 1677万色
可逆圧縮 png-8: ○
png-24: ×
×
( APNG であれば可能)
[※4]
webp [※5] ラスター画像
1677万色
両方可能
(可逆, 非可逆)
svg ベクター画像 非可逆圧縮
( fill-opacity )

補足(※1)
(ベクター画像とラスター画像)

  • ベクター画像
    • 拡大縮小しても画像が劣化しない。
    • 写真のような複雑なカラーは表現できない。
  • ラスター画像
    • ビットマップ画像。
    • 各ピクセルに色や濃淡を設定。
  • ラスタライズ
    • ベクター画像をラスター画像に変換すること。

補足(※2)
(可逆圧縮と非可逆圧縮)

  • 可逆圧縮
    • 元の画質を損なわない。
  • 非可逆圧縮
    • 元の状態に戻せない。

補足(※3)
(APNGについて)

GIF だと 256色 なので綺麗にアニメーションを表現できないときがあります。 APNG であれば、フルカラー( 1677万色 )で表現できるので綺麗なアニメーションになります。ただし、 IE11 Edge ではサポートされていません。

https://caniuse.com/#feat=apng

補足(※4)
(WebPについて)

Googleが開発しているフォーマットです。優れた圧縮を持っており、JPEG GIF PNGの代わりになる規格として注目されています。ただし、 IE11 Edge ではサポートされていません。

https://caniuse.com/#feat=webp

参考