テーマ 画像ファイル形式
状 況 自分で作る（内製）
画像の拡張子、なんとなくで選んでいませんか？
近年、WebP / AVIFという画像形式も登場し、従来のJPGやGIF等とどう違うのか、私も混乱してきましたので、主要な画像形式を調べて記事にまとめることにしました。
拡張子（画像形式）の選び方を変えるという、ちょっとしたことで、
①画質劣化の防止、②Web表示速度の改善、③データサイズの軽量化に繋がるというメリットがあるので、使い分けできるよう特長をおさえましょう👍
忙しい人はここだけ！
- 写真は基本JPG（JPEG）🖼️（ただし赤・ピンクが主役ならPNGが高画質）
- ロゴ・文字・アイコンなどクッキリさせたい / 背景透過ならPNG🫧（半透明ならPNG-32）
- Web向け画像ならWebP / AVIF💻
- アニメーションならGIFよりWebP / AVIF🎞️
目次
画像の拡張子で変わるのは「見た目」だけじゃない
同じ画像に見えても、拡張子によって内部の仕組みが異なり、ざっくり次のような違いがあります。
- 色の表現力
表現できる色数が多いほど、グラデーション表現が滑らかに - 透過できるか
透過とは、背景が透明の状態のこと - 圧縮方式
非可逆圧縮方式の場合、保存を重ねるほど劣化しやすい
これだけは押さえたい３形式（JPEG / PNG / GIF）
まずは一般的によく使う、JPEG / PNG / GIFについて、特長や向き / 不向きな用途をまとめます。
JPG／JPEG（ジェイペグ）
多くの方に馴染みのある画像形式ですね。1992年に登場した歴史の長い形式です。
スクロールできます
| 拡張子 | jpg / jpeg |
| 拡張子名の由来 | Joint Photographic Experts Group 画像形式を作った組織名が由来。 |
| 表現可能な最大色数 | 約1677万色（24ビット） |
|---|---|
| 背景透過 | 不可 |
| 圧縮形式 | 非可逆圧縮形式 |
| ファイルサイズ | 小さめ |
向いている用途
- 写真・グラデーション表現
精細な色表現が得意です - 印刷媒体
RGBの他、CMYKカラーも表現できるので、印刷物しても色の違和感が少なく済みます
向いていない用途
- 「赤・ピンク」が重要な表現の写真
圧縮によって赤の色域が劣化しやすいため、劣化を抑えたい場合PNGを選びましょう - ロゴ・アイコン・簡単なイラスト
シャープな線、ベタ塗りなど少ない色数での表現が苦手で、ぼやけがちです
JPGとJPEGって何が違う？
拡張子は、jpgとjpegの２種類ありますが、機能面において違いはありません。
昔、OSで扱う拡張子は３文字までという制約があったため「JPG」と当初はしたものの、その後になって３文字以上も可能となったことから、”Joint Photographic Experts Group”の頭文字をすべて取った拡張子「JPEG」も作成されたようです。現在は、jpgの方がよく使われています。
PNG（ピング／ピン）
PNG形式は、1996年に登場したGIFの機能向上版で、”PNG is NOT GIF” の略という噂もあり、90年代はGIFに代わる形式を開発する動きが強まったそう。
拡張子は同じものの、「PNG-8」「PNG-24」「PNG-32」の３形式があり、RGBカラーを扱える共通点がありますが、それぞれ異なる特長も持っています。ちなみに、PNG-32の32は24bitの色数 + 8bitの透明を扱う事ができるという意味。
スクロールできます
| PNG-8 | PNG-24 | PNG-32 | |
|---|---|---|---|
| 拡張子 | png | ||
| 拡張子名の由来 | Portable Network Graphics | ||
| 表現可能な最大色数 | 256色（8ビット） | 約1677万色（24ビット） | ① 約1677万色（24ビット） ② 256階調の透明表現（8ビット） |
| 背景透過 | 可能（半透明は不可） | 不可 | 可能（半透明も可能） |
| 圧縮形式 | 可逆圧縮形式 | ||
| ファイルサイズ | 小さめ | JPEGと比べると大きい | |
PNG-8が向いている用途
- 少ない色数のロゴ・アイコン・簡単なイラスト
背景透過で、シャープな線やベタ塗りが得意です
PNG-24が向いている用途
- 写真・グラデーション表現
精細な色表現が得意です - 「赤・ピンク」が重要な表現の写真
JPG形式は劣化しやすいですが、PNG形式は赤系の再現性が高いです
PNG-32が向いている用途
- グラデーション表現のある精細なイラストやロゴ
精細な色表現が得意で、透明・半透明の表現も得意です
PNGが向いていない用途
- 印刷媒体
RGBカラーのため、印刷物の色味が大きく変わって見えます
GIF（ジフ）
1987年に最初の規格が公開され、30年以上も使われている歴史の長い画像形式！
最大の強みは、GIFアニメと呼ばれるように、パラパラマンガ形式のアニメーション機能があること。HTMLの概念が生まれる前からある古い規格のため、ほとんどのWebブラウザで表示可能な点も特長です。３色程度ならPNGよりGIFの方がファイルサイズが小さく済むので、画像を軽量化したいときの選択肢にもなります。
スクロールできます
| 拡張子 | gif |
| 拡張子名の由来 | Graphics Interchange Format |
| 表現可能な最大色数 | 256色（8ビット） |
|---|---|
| 背景透過 | 可能（半透明は不可） |
| 圧縮形式 | 可逆式圧縮形式 |
| ファイルサイズ | 小さめ |
向いている用途
- アニメーション画像（GIFアニメ）
背景透明のアニメーションも可能です - 少ない色数のロゴ・文字・アイコン・簡単なイラスト
シャープな線やベタ塗りが得意です - 古いWebブラウザでの表示
向いていない用途
- 写真・グラデーション表現
精細な色表現は苦手で、荒さが気になります - 印刷媒体
RGBカラーのため、印刷物の色味が大きく変わって見えます
GIFの悲しい過去
昔は特許権の問題でGIF形式の排斥運動が起こったという過去も。1999年11月5日に「Burn ALL GIFs day（全てのGIFを焼き尽くす日）」なんてのもあったそうな。特許が失効したことで、現在は何事もなかったかのように平和に使われています🕊️
画像形式の選び方に迷った場合の判断フロー
迷ったら次の質問に「はい/いいえ」で進んで判断してみてください。
❶ 背景を透明にしたいか？
YES🙆♀️
→ 半透明も必要ならPNG-32、半透明は不要ならPNG-8、Webサイト用ならWebP
NO🙅♀️
→質問❷へ
❷ 写真またはグラデーション表現のあるイラストか？🌈
YES🙆♀️
→ 印刷用途ならJPG、印刷用途でなく赤が重要な画像ならPNG-24、Webサイト用ならWebP / AVIF
NO🙅♀️
→質問❸へ
❸ 文字や線をくっきり見せたい？
YES🙆♀️
→ アニメーション用途ならGIF、そうでないならPNG-8、ロゴやアイコンならSVGも検討
NO🙅♀️
→印刷用途ならJPG、そうでないならPNG-24、Webサイト用ならWebP/AVIF
免責・参考リンク・ご意見箱
免責事項
- 本記事は、画像拡張子の一般的な特徴をもとに、業務で迷いを減らす目的でまとめたものです
- 各形式の挙動は、使用ソフト・書き出し設定・閲覧環境により変わる場合があります
参考リンク
ご意見箱
マシュマロというサービスで、質問・ご感想等を匿名で送ることができます。
記事にしてほしいテーマや、この記事へのご指摘事項等もありましたら、お気軽にメッセージください😊
