JPG?PNG?GIF?WebP?もう困らない画像書き出しの最適化

デザイナーの教科書

今回は知っていると差がつく「画像フォーマット」について解説していきます。

結論

優先度は上から順番になります。

  • ファイル軽量化への情熱と時間があるなら:WebP
  • アニメーションにしたいなら:GIF
  • 画像の背景が透明でないといけないなら:PNG
  • ロゴやアイコンなどの創作物の書き出しなら:PNG
  • 上のどれにも当てはまらない場合は:JPG

これらの画像フォーマットの違いは次のようなものです。そしてこれらの違いが画質やファイルサイズに影響して、それぞれの得意・不得意が決まってきます。

  • 扱える色の数
  • 背景の透過(アルファチャンネル)
  • 圧縮形式
  • アニメーション

では早速、PNG・JPG・GIF・WebPの特徴と使い分けの理由を見ていきましょう。

それぞれの特徴

JPG

  • 色数:フルカラー1670万色を使用
  • 背景の透過:不可×
  • 圧縮形式:非可逆性圧縮(保存を繰り返すたび劣化する)
  • アニメーション:不可×

JPGは比較する4種類の中で唯一の非可逆性の圧縮形式をとるフォーマットです。そのためファイルサイズが軽く、フルカラーで綺麗なグラデーションも再現することができます。使用用途としては、写真画像や、デジタル加工を多用したイラスト画像などが最適です。

しかしフルカラーであるがゆえに、色相の境目がはっきりしている部分がぼやけやすいというデメリットもあります。また背景の透過もできないため、透過しなければいけない部分が一箇所でもあれば、書き出しの選択肢からは必然的に外れることになります。

ちなみに「JPEG」の中でも「JPEG-LS」「JPEG XR」「JPEG2000」の3種類は可逆性圧縮に対応しています。しかしこれらはいずれもサポートしているブラウザが2種類〜と少なく、積極的に使っていくメリットはあまりなさそうです。

PNG

  • 色数:①256色 ②フルカラー1670万色 の2種類から選べる
  • 背景の透過:①完全な透過 ②半透明 の2パターンが可能◎
  • 圧縮形式:可逆性圧縮(一度変更しても元の圧縮率に戻すことができる)
  • アニメーション:不可×

PNGの注目ポイントは、色数・透過度共に選択肢が多く、書き出し画像の自由度が高いところです。

特に色数を256色に絞った「PNG8」は、ロゴやアイコンなど単調なカラーを使った創作物に最適です。JPGよりも軽く、綺麗に出力できます。

また背景の透過を「半透明」にすることも可能で、表現の幅も広くなります。

デメリットとしては、可逆性圧縮形式を採用しているためファイルが重くなりやすいことです。特にWeb上では、JPGほど気軽にPNGを使うべきではありません。画像を書き出す時は、「その画像がPNGでなければ最適化されない理由」をしっかりと持てるようにしましょう。

GIF

  • 色数:256色を使用
  • 背景の透過:完全な透過 のみ可能◎
  • 圧縮形式:可逆性圧縮(一度変更しても元の圧縮率に戻すことができる)
  • アニメーション:可能◎

GIFの最大の特徴はアニメーションに対応していることです。メディアでアニメーションの挿入を考える時は、必然的にGIF一択になります。

しかし現在は画像フォーマットとして使われることはあまり見かけません。その一番の理由が、GIFの後継である「PNG」の普及です。

画像フォーマットとしてのパフォーマンスを比較すると、PNGは「フルカラーの使用」と「背景半透明の使用」というGIFにはない大きな魅力があります。またPNG自体がもともと、GIFが特許問題で利用が難しくなった際にGIFの代替の画像フォーマットとして開発された背景を持つため、わざわざ旧式のGIFを使う理由があまりないのです。

GIFを使うのはほぼ「アニメーションにしたい時のみ」という認識でOKです。

WebP

  • 色数:①256色 ②フルカラー1670万色 の2種類から選べる
  • 背景の透過:①完全な透過 ②半透明 の2パターンが可能◎
  • 圧縮形式:可逆性圧縮(一度変更しても元の圧縮率に戻すことができる)
  • アニメーション:可能◎

WebPは2010年9月にGoogleによって発表された「次世代画像フォーマット」です。読みは「ウェッピー」、拡張子は「sample.webp」になります。

WebPの特徴は、JPGのメリットである「ファイルの軽さ」、PNGのメリットである「自由度の高さ」、そしてGIFのメリットである「アニメーション」を全て持ち合わせていることです。特にファイルサイズにおいては、同等のJPEGよりも平均でファイルサイズを 30% 縮小できると言われています。

ではなぜそれほど普及していないかというと、現時点で「iOS」「iOS Safari」がまだWebPに対応していないからです。

実際にiPhoneなどでWebP画像を表示しようとすると、全て空白状態になってしまいます。そのためWebPを使用する時は、「非対応ブラウザではWebPの替わりにJPG画像を表示させる」といったような何かしらの技術が必要です。また同じ画像を「sample.jpg」「sample.jpg.webp」と2種類ずつ書き出す手間もかかります。

さらにPhotoshopがまだWebP書き出しに対応していないことも足かせの原因の1つです。

現状WebP画像の作成は、

  1. 非公式のPhotoshopプラグインを使う
  2. Webサービスを利用する
  3. 「他の画像フォーマットをWebPに変換できるJS」を利用する

と、いずれも手間やリスクを伴う方法に限られています。

そもそも画像のファイルサイズはそんなに重要なの?

httparchiveによると、2020年現在ページあたりの平均使用ファイルサイズはデスクトップで2031.9KB(約2MB)、スマートフォンで1864.2KB(約1.8MB)です。

これに対して、Googleが指標にしているページあたりの推奨ファイルは1,600 KB なので、少なくとも200KB〜400KBはオーバーしていることになります。

次に、同じ写真、同じサイズで書き出したそれぞれの画像フォーマットのサイズを比較してみましょう。

花の画像

カラフルな花の画像:w800px・DPI72の場合

JPG6082 KB
JPG100582 KB
PNG 24705KB

一番大きなファイルサイズのPNG24と一番小さなJPG60を比べると、その差は623KB。画質の良さがさほど変らないのであれば、この1枚の最適化だけでもかなりページあたりのファイルサイズに影響があるのがわかりますね。

ちなみにJPGとPNGの後ろについている数字は色数や圧縮率の違いになります。もっと知りたい方は、ぜひこちらの記事をご覧ください。

png8 png24 jpg100 jpg80 などの数字の違いを知ろう

2019年5月19日

画像を最適化するツールいろいろ

TinyJPG

有名なJPG圧縮ツールです。ソフトをインストールする必要もなく、ブラウザ上で全て完結できるのでよく重宝しています。

TinyJPG

TinyJPG

TinyPNG

こちらも言わずと知れた有名なPNG圧縮ツールです。TinyJPGと使い方が全く一緒でとにかく便利!

TinyPNG

TinyPNG

Video to animated GIF converter

GIFアニメーションのコンバーターです。簡単な画像加工機能も揃っています。

Video to animated GIF converter

Video to animated GIF converter

使い分け方まとめ

今回は4種類の画像フォーマットを取り上げましたが、基本的にWeb上でよく使うのはJPGとPNGの2種類です。

それぞれの特徴を踏まえて、様々な場面にあった画像の最適化を考えたいですね。