Web制作の現場では、毎日さまざまな画像作成が行われています。今回はその画像作成の時にでてくる疑問について、ちょっと調べてみました。調べたのは、こんな疑問です。

• この画像、どの画像形式で保存しようかな？JPG？PNG？それともGIF？

経験が多いWebデザイナーさんでも、意識して画像形式を選んでいる方はどのくらいいらっしゃるでしょうか。多忙を極めるWebデザイナーさんのために、ファイルサイズの違いを調べてみました。

結果

気になる結果ですが、JPGが軽いです。画質についても、JPGの画質を下げれば悪くなりますが、Photoshopでいうところの70や80では、画質が大きく損なわれることはないでしょう。透過がない条件が必要ですが、JPGにするのがファイルサイズが軽くなります！

調査してみて

当初の予想としては、やはりPNGよりJPGのほうが軽いという予想でした。これは、不可逆圧縮と可逆圧縮の違いもありますし、JPGのような枯れた画像形式の方がデータ量は少ないと考えていたからです。今回は予想通りという感じです。

実際の計測データ

640×480という小さめな写真で比較しました。PNG8が最も軽いのですが、画質の劣化（減色処理）がかなりあるため、処理後の画像は写真としては利用できる品質にないと判断しました。

PNG24の画像。さすがにキレイで問題のない画質。

PNG8の画像。雲や水面の波紋の劣化が特にひどい。

写真といえばJPG。不可逆圧縮なので、容量はとても軽い。

PNGには、PNG8とPNG24がある(PNG32もある)

PNGは、PNG8とPNG24を試してみました。PNG8よりもPNG24の方が扱える色数が多いので、写真などにも利用しやすい画像形式です。PNG8は、GIFと同じ256色を扱うことができます。写真などには厳しい色数ですので、ロゴやベクターデータで作成したもの（色数少ないもの）にはよさそうです。ケースバイケースで使い分けましょう。

PNG8とGIFの違いは、Adobeさんのページがよくまとまっています。

• GIF や PNG-8 形式として最適化

PNG32もあるんですが、Photoshopで扱えないので割愛します。

最後に

透過がある場合は、JPGは透過ができないのでPNGでの保存になります。この透過のありなしが画像形式を選ぶ際の大きなポイントになります。

Photoshopは書き出し時の設定を記憶するので、前回保存した画像形式で保存しやすいようになっています。しかし、PNGとJPGでは約50％ちかいファイルサイズの差があります。ファイルサイズは、ウェブページでの表示に大きく影響を与えますので、できるだけ軽くなる画像形式を都度選びましょう。

Webデザイナーさんは本当に忙しい職業なので、年度末のデスマーチに向けて体調管理を気をつけてくださいね！

--

今回利用した素材はこちら　Photo by Will O on Unsplash
https://unsplash.com/photos/9R1QOrTRR9s