ブログ

技術

Web画像のファイル形式について教えて!

最近の傾向として大きな画像をメインとして扱うサイトが増えてきましたね。
画像があることによる視覚的効果や色彩による効果は絶大です。

Web制作のなかでも重要な役割を占める画像制作ですが、制作する画像にもいろいろな種類があり用途により使い分けをしています。
その種類のことを画像ファイル形式といい、Webでは主にJPG、GIF、PNGの3つが使い分けられています。
この3つにはどんな特性があるのでしょうか。

JPG、GIF、PNGそれぞれの特徴を一言で言うと・・・

JPG:きめ細かくきれいだけどファイルサイズが重めです。
GIF:色数は少ないけどファイルサイズが軽いです。画像を動かせます。透過OKです。
PNG:GIFと同じく透過の他に半透明での透過が出来ます。

JPG、GIF、PNGのうちこれかな?と思ったボタンをクリック!

どの画像ファイル形式を使用するかを「シチュエーション別クイズ形式」にしてみました。JPG、GIF、PNGそれぞれの特徴を簡単にふまえていただいたうえで、以下のクイズに挑戦してみてください。

シチュエーション1:画面いっぱいに写真を載せたい

Q1.猫田さんが趣味の一眼レフで撮った写真をWeb画面いっぱいにどーんと載せたい!
という場合に、どんな画像ファイル形式が最適でしょうか?

3385e56c0667b436a566944858101c9953d941ed.pngA.答えは1:JPGです!

JPGは24ビット(1670万色)が表現できるので精細な写真を扱うのに最適です。
GIFは最大8ビット(256色)で色数の少ないイラストなどに適しています。
1.jpg 2.gif
この画像を見るとGIFで保存した方は画像が粗くなっているのがわかりますね。
これは色数が少ない分一番近い色に代替えするためこのように見えています。

PNGはJPGとGIFの良いとこどりでGIFと同じ8ビット(256色)やJPGと同じ24ビット(1670万色)にも対応していて用途によって使い分けをすることが出来ます。
次の画像は同じサイズ46KBにしてGIFとPNG(8ビット256色)それぞれ保存してみました。
微妙ですが・・。PNGの方がややきれいに見えますでしょうか。 3.png 4.gif

シチュエーション2:イラストたっぷりの一覧ページを作りたい!

Q2.犬井くんは、道路標識の説明をWebにUPしようとしています。
道路標識の意味の一覧を作るので1ページに画像がたくさん表示されるようです。
この場合どんな画像ファイル形式が最適でしょうか?

385a6afa702a99399b281c4b4d960d1a622c1a52.pngA.答えは3:PNGです!

前の問題で色数について触れましたが、色数で画像ファイル形式を決めるというのもひとつの手です。
次の道路標識の画像は左からJPG、GIF、PNGで保存されたファイル形式の順に並んでいます。
それぞれ画像サイズは、JPG:14KB、GIF:7.8KB、PNG:7.2KBとなりました。
黄色と黒で描かれた2色のイラストだとどれも見た目に差がありませんね。
jpgsika.jpg gifsika.gif pngsika.png
GIF、PNGは道路標識のような単純なカラーの画像に適しています。
特にPNGは圧縮率が高いため見た目が同じ内容のGIF画像より10~30%ほどファイルサイズが小さくなります。
ここで見るとGIF:7.8KB、PNG:7.2KBとなり若干の差なのですがPNGの方がファイルサイズが軽くなっています。 今回の問題では「イラストたっぷり」ということなので、読み込みを軽くさせるために、よりファイルサイズの軽いPNGが良いでしょう。

シチュエーション3:画像をアニメーションをさせたい!

Q3.犬井くんは、Webのロード時間中にくるくる回る画像を作りたいと思いました。
くるくると画像を動かすには、どんな画像ファイル形式が最適でしょうか?

ae1adb93a79ab2f3884a769ddd4fccee85c56636.pngA.答えは2:GIFです!

この3つの画像ファイル形式の中で、画像だけでアニメーションをさせることが出来るのはGIFとPNG(APNG)になります。
PNG(APNG)はGIFよりもたくさんの色が使えますが保存時にファイルサイズが大きくなってしまうのと、未対応のブラウザがあるのが難点です。

ロード時に読み込むには軽いファイルサイズの画像の方が良いので、以下のように単純なアニメーションでしたらGIFの方がよいでしょう。
GIF画像を以下の画像のように、一コマずつ異なる画像を用意し時間差で表示することによってアニメーションとなります。
昔、教科書の端っこに描いていたパラパラ漫画に近いかもしれませんね。

a05df0e2576466775683a1b68a6507b43ace10a8.gif kurukurumoto.gif

a332aee457b549f56939c1af1d4dab5c6a07df41.gif kurukuru2moto.gif
LINEの動くスタンプはPNG(APNG)で作成されています。LINEでは標準で使われているようですが、WebでのPNG(APNG)の普及はまだ先になりそうです。

シチュエーション4:「半透明のビーム」で街を照らすUFOの画像を作りたい!

Q4.猫田さんは自分のWebサイトにUFOが「半透明のビーム」で街を照らしながら飛んでいる画像を作ろうと思いますが、「半透明のビーム」が表現できる画像ファイル形式はどれでしょうか?


385a6afa702a99399b281c4b4d960d1a622c1a52.pngA.答えは3:PNGです!

背景画像の上にそれぞれ重ねるような構造で画像を作ってみました。
(以下は構造のイメージです。)
fe046e0762c3ec4d3c1ab1ebac20769d448b5edf.gif

JPGはもともと透過ができません。
そのため以下の画像のように四角く出てしまいます。
GIFとPNGは大きさがわかるように枠を点線にしていますが、この枠は完全に消すことができます。

またGIFの特性としてアニメーションが出来ますが半透明は出来ません。PNGではGIFのようには動きませんが「半透明のビーム」が出ています。
GIFとPNGの特性を合わせて半透明のビームをアニメーションさせたいところですが、両方のが実現できる画像ファイル形式が今のところはないのが残念ですね。 ugokuyo.gif

Web画像の種類、おわかりいただけましたか?

Webサイトを見ている方で「この画像のファイル形式は何?」などと気にする方はあまりいないと思いますので正解なしだった方も多いかもしれませんね。
みなさんもWeb画像を制作する際は、精細で出来るだけファイルサイズの軽い画像を制作すると良いと思います。

余談ですが、タイトル画像の3人には各ファイル形式の特徴を持たせています。
中央の赤「J」はJPGです。白い背景は、"JPGでは背景透過出来ない"ということを表現しています。
左側の緑「G」はGIFです。背景が透過され、人型の部分だけを見せることができます。
右側の青「P」はPNGです。背景が透過され、さらに頭以外が半透明になっています。

Pagetop