MENU

アイデアを形にする( プログラミング / クラウド / フレームワーク / ライブラリ / デザイン / IT豆知識 )

わくわくBank

わくわくBank

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

2022/11/25

画像形式には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万色 )で表現できるので綺麗なアニメーションになります。
ただし、 IE11Edgeではサポートされていません。

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

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

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

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

参考

よかったらシェアしてね！