JPGは赤が苦手？画像拡張子の種類や違い、劣化を防ぐ選び方とは？

ネットに画像をアップロードする機会が多い昨今。用途に応じて画像形式を使い分けていますか？？（かく言う私は、そこまで気を配っていませんでした…）

用途に応じて使い分ければ、画像が劣化せずキレイに、より速く表示できるようになります。その分、ブログやWebサイト訪問者の滞在時間も長くなるかも…！！！

そこで今回は、このような疑問について調べてまとめました。

画像形式（拡張子）って何がある？
画像形式によって何が違うの？
どういう使い分けをすれば良い？

これだけは知っておきたい画像形式３つ
さいごに
- この記事で使用した素材

これだけは知っておきたい画像形式３つ

画像形式は技術の発展とともに、種類もどーんどん増えています！

すべてを挙げるとげんなりしてしまうので、まずは一般的によく使う「GIF」「JPEG」「PNG」をご紹介します。

GIF（ジフ）

拡張子

gif

拡張子名の由来

Graphics Interchange Format

特徴

1987年に最初の規格が公開され、30年以上も使われている歴史の長い形式です。

最大の強みは、GIFアニメと呼ばれるように、パラパラマンガ形式のアニメーション機能がある点です。

表現可能な最大色数	256色（8ビット）
背景透過	可能（半透明は不可）
圧縮形式	可逆式圧縮形式
ファイルサイズ	小さい

選び方

適した用途

アニメーション画像（GIFアニメ）
少ない色数での表現（シャープな線、ベタ塗り）
- ロゴ・アイコン・簡単なイラストなど
Webブラウザでの表示
- 3色程度ならPNGよりGIFの方がファイルサイズが小さく済むことが多い
- 昔からある規格のためほとんどのWebブラウザでサポートしている

適さない用途

精細な色表現
- 写真・グラデーション表現など
印刷媒体
- GIFはRGBカラーのため、印刷物の色味が大きく変わってしまう可能性大！

ちょっと余談『GIFの悲しい過去』

昔は特許権の問題でGIF形式の排斥運動が起こったという過去も。

1999年11月5日に「Burn ALL GIFs day（全てのGIFを焼き尽くす日）」なんてのもあったそうな。

特許が失効したことで、現在は平和に使えています😊

JPG／JPEG（ジェイペグ）

拡張子

jpg、jpeg

拡張子名の由来

Joint Photographic Experts Group

画像形式を作った組織名が由来だそうです。

特徴

1992年に登場し、こちらもGIFと同じく歴史の長い形式です。

RGB・CMYKの両方のカラーモードに対応しています。

表現可能な最大色数	約1677万色（24ビット）
背景透過	不可
圧縮形式	非可逆圧縮形式
ファイルサイズ	小さい

選び方

適した用途

精細な色表現
- 写真・グラデーション表現など
Webブラウザでの表示
- ファイルサイズが小さい
- 昔からある規格のためほとんどのWebブラウザでサポートしている

適さない用途

JPGの赤が劣化しやすい例 — 赤の劣化が目立つ例（拡大するとガサガサ具合がよく分かります）

「赤」が重要な表現の写真
- JPG形式は圧縮によって赤の色域が劣化しやすいため、赤やピンクを多用する場合はPNGを選ぶと吉
少ない色数での表現（シャープな線、ベタ塗り）
- ロゴ・アイコン・簡単なイラストなど（多少ぼけてしまう）

ちょっと補足『JPGとJPEGって何が違う？』

拡張子は、jpgとjpegの２種類ありますが、機能面において違いはありません。

ではなぜ2種類あるのかというと、昔、OSで扱う拡張子は「３文字」までという制約があったため、当初は「JPG」としたのですが、その後、３文字以上も可能となったため、”Joint Photographic Experts Group”の頭文字をすべて取った「JPEG」の拡張子も登場しました。

そういうわけで、2種類の拡張子が存在することになったのです。現在は、jpgの方がよく使われています。

PNG（ピング／ピン）

拡張子

png

拡張子名の由来

Portable Network Graphics

特徴

PNG形式は、1996年に登場したGIFの機能向上版で、”PNG is NOT GIF” の略という噂もあり、90年代はGIFに代わる形式を開発する動きが強まったそうです。

拡張子は同じで、「PNG-8」「PNG-24」「PNG-32」の３つの形式があります。

ちなみにPNG-32の32は、24bitの色数 + 8bitの透明を扱う事ができるという意味です。

	PNG-8	PNG-24	PNG-32
表現可能な最大色数	256色（8ビット）	約1677万色（24ビット）	① 約1677万色（24ビット） ② 256階調の透明表現（8ビット）
背景透過	可能（半透明は不可）	不可	可能（半透明も可能）
圧縮形式	可逆圧縮形式
ファイルサイズ	小さい (GIFより圧縮率が高い)	JPEGと比べると大きい