Web用に適切な画像形式を選ぼう「JPEG・PNG・GIF」画像フォーマットの特徴

画像形式にはJPEG・PNG・GIFなどいろいろありますが、その特徴を意識してWeb用に画像を書き出していますか？

1. なぜ画像形式を選ぶ必要があるのか
2. JPEGの特徴
3. GIFの特徴
4. PNGの特徴
5. まとめ
6. さらに画像を軽量化したいとき

なぜ画像形式を選ぶ必要があるのか

人によってはPNG一択でいいのは？と疑問に持つ方もいるかもしれません。

各画像形式には表現の得意・不得意があります。その特徴を知っていれば、デザインしたものができるだけきれいに見える形式を選ぶことができます。

また選ぶ画像形式によって書き出されるファイルサイズは異なってきます。Webサイトでは特にTOPページなどで大きな画像を多く読み込むケースもあると思いますが、表示に時間がかかるとページから離脱されてしまうことも増えてきます。

通信速度が上がっているとはいえ、スマートフォンでの表示が多い現在、大きな画像を多用するページはファイルサイズがあまりにも大きくなっていないかということにも気を配りたいものです。
Web用の画像は「できるだけ美しく」、「できるだけ軽い」を両立させた画像が最適です。

Webでよく使う画像形式についてみていきましょう。

JPEGの特徴

約1677万色が扱えます。透過表現は一切できません。

画像を圧縮して保存することで、ファイルサイズを小さくしていくことができます。
しかし保存するたび画質が劣化していき、元には戻せない特性があります。これを「非可逆圧縮」といいます。
JPEGの画像を編集するときは、コピペしたファイルを操作するようにして、元データは編集しないように注意しましょう。

また、シンプルなベタ塗りで構成された画像の場合、JPEGで書き出すとノイズが目立つ場合があります。
またファイルサイズも大きくなりがちなので、アイコンや色数が少なくベタ塗りで構成されているようなイラストの場合はJPEGを選ばない方がよいと思います。

GIFの特徴

256色が扱えます。透明表現はできますが半透明には対応できません。
アニメーション画像に対応しています。

256色と使用できる色数が少ないため、グラデーションや写真など豊かな色表現のデータは再現できません。
しかしファイルサイズは小さくて済むため、ダイヤルアップ接続、ガラケーの時代はGIFは多用されてきました。

GIFは昔、特許絡みの問題が発生しています。

Graphics Interchange Format　特許問題とその顛末（Wikipedia）

この問題の過程でPNG形式が誕生しました。
今ではこの特許の問題はクリアになっていてGIFの使用に問題はありませんが、このあとご紹介するPNG-8がほぼ同じ特徴を持っていることもあり、書き出しにGIFが選択されることは少なくなっている印象です。

PNGの特徴

PNGと一言でいっても、普段Photoshopで書き出す時にはPNG-8、PNG-24とPNGの種類を選べるようになっています。数字部分はbitでPNG-8なら8bit分の色が扱えるということを示しています。

保存しても画質は劣化せずきれいなまま残せるのがJPEGとは大きな違いです。こちらは「可逆圧縮」といいます。

PNG-8とは

256色が扱えます。
透明表現はできますが半透明には対応できません。

少ない色使いでシンプルな構造の画像は、この形式で書き出した方が綺麗にファイルサイズも軽く仕上がることが多いです。

PNG-24とは

約1677万色が扱えます。
JPEGと同じくフルカラー表現できますが、編集・保存しても画質が劣化しないのがJPEGとの大きな違いです。

ただ、ファイルサイズがjpegよりかなり大きくなります。
また画像の内容やサイズによっては、JPEGで多少画質を低下させて保存しても見た目には大差なく感じられるときもあるので、複雑な色構造の写真やイラストなどでは、本当にPNG-24で書き出すねきなのかファイルサイズを見ながら検討した方がよいと思います。

PNG-32とは

1677万色と256段階の透明度を扱えるようになっており、透明、半透明の表現が可能です。

PhotoshopやIllustratorではPNG-32形式を選んで書き出せないように見えますが、透明部分を含んだ画像を書き出す（保存時に「透明部分」にチェックを入れる）ときに「PNG-32」として書き出されるようです。

アニメーションならAPNG（エーピング）

PNG画像をアニメーションにできる画像フォーマットです。GIFアニメーションとの大きな違いは、透過を含むフルカラーで制作できる点です。ただ、GIFアニメーションと異なりPhotoshopで制作を完結できないないのが不便なところ。

APNGのブラウザ対応状況はcaniuse.comを確認すると、現在 IE11を除いて主要なブラウザはほぼ対応しているようです。（IE11は2022年でサポート終了なのでどう捉えるか…）

まとめ

一般的には画像の種類と適している画像フォーマットは以下のようになるかと思います。
ただ、画像のサイズや内容によっても結果は変わってくるので、場合によってはフォーマットを変えて書き出して比較してみるなどしてみてもいいかもしれません。

写真	JPEGかPNG-24	PNGだと綺麗だが、JPRGよりファイルサイズがかなり大きくなる。
グラデーションやテクスチャを含む、または色数が多い繊細または複雑な図やイラスト	JPEGかPNG-24	PNGだと綺麗だが、JPRGよりファイルサイズがかなり大きくなる。
色数が少なく、ベタ塗りで構成された図やイラスト（例：地図、表、アイコン、シンプルなイラストなど）	（GIF）PNG-8	表現できる色数に限りがある。透明に対応している。（半透明は不可）
半透明の部分を含んだ画像	PNG-32	Photoshopで書き出す時は「PNG-24」を選択し「透明部分」にチェックを入れる。
アニメーションさせたい画像	GIF、PNG	GIF、PNG-8の場合は表現できる色数がかなり限定される。 PNG-24,32であればフルカラー、半透明まで表現できるがファイルサイズは重くなる。