GIF・JPEG・PNG・WEBPの特徴

• GIFの特徴
• JPEGの特徴
• PNGの特徴
• WEBPの特徴

GIF(Graphics Interchange Format）の特徴

拡張子.GIF

特徴
最大8ビット（256色）までの色を扱うことのできる圧縮画像形式。
256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いている。
透明色の指定ができる
アニメーションにできる

GIF 256色（ディザあり）36Kb	GIF 128色（ディザあり）30Kb	GIF 64色（ディザあり）25Kb
GIF 32色（ディザあり）20Kb	GIF 16色（ディザあり）16Kb	GIF 8色（ディザあり）11Kb

トップに戻る

JPEG (Joint Photograph Experts Group）の特徴

拡張子.jpg

JPEGは圧縮画像形式で、24ビット（1670万色）まで扱うことができる。
このため、多くの色数を必要とする写真などの表現に向いている。
色調変化の部分のデータを捨てることでファイル容量を小さくしている。
圧縮率を上げすぎると、ブロック単位で色が均一化されて画像がモザイク状に見えるブロックノイズが発生。
圧縮形式が不可逆圧縮であるため、何度も編集保存を繰り返すと、どんどん画質は劣化する。

最高画質(100)62Kb	高品質(75)13Kb	中品質（50）8Kb
低品質（25）5Kb	最低品質（5）2Kb	最低品質（0）1.7Kb

トップに戻る

PNG（Portable Network Graphic）の特徴

拡張子.PNG

PNGは、特許使用の解釈に不安のあったGIFに替わるライセンス・フリーの画像形式として開発された。
PNGには、「フルカラーにも8bitカラーにもすることができる」
「圧縮率が高く同じ内容のGIF画像より10％～30％程度ファイルサイズが小さくなる」
「圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している」
「複数の透過色を指定できる」 などの特徴がある。

短所は、「アニメーションにできない」
「フルカラーにするとJPEGよりファイルサイズが大きくなる」 といった点が挙げられるが、 最大の短所は「ブラウザ側の対応が完全ではない」ということ。
PNGに対応しているのは、 Windows版Internet Explorer4.0以上、Mac版Internet Explorer5.0以上、Netscape Navigator4.04以上で、 これより古いバージョンではPNGを表示できない。

24bit 94Kb	8bit 36Kb

トップに戻る

webp(ウェッピー)の特徴

WebP(ウェッピー)とは、Googleが開発した新しい画像フォーマット。2010年に登場。
webpは、JPEG(JPG)と同じく1670万色以上の色を表現することができる。
JPEG(JPG)との違いは、背景透過が可能でアニメーションにも対応している。
JPEG以上の圧縮率なのに、JPEG・PNG・GIFでできる事は全て対応している画期的なフォーマット。
そのため、これからの時代の代表的な画像フォーマットとしてGoogleが推奨しています。
デメリットは古いブラウザには対応していないものもあること。（現在はブラウザのほぼすべてが対応している。IEは未対応）
利用できる画像編集ソフトが限られている。（Photoshopでも23.2（2022年2月15日公開）からサポート）

最高画質(100)70Kb	高品質(75)10Kb	中品質（50）7Kb
低品質（25）4Kb	最低品質（5）2Kb	最低品質（0）0.8Kb

トップに戻る

透過の比較

GIF	JPEG	PNG	WEBP

【画像形式の違いについて】

トップに戻る