デザインしたものを、さあコーディングしようとする時に必要なのが画像の切り出しです。ここで直面するのは、どの画像形式で書き出すかという問題です。Webで使われる画像形式は主にJPGとPNG、そしてGIFがあります。今回はよく使われるJPGとPNGの使い分けについて解説します。
結論:黒鉛筆1本で描けるのがPNGそうじゃないのがJPG
先に結論を書きましたが、これが自分なりの使い分け方です。とりあえず、この使い分けで、ある程度適切な画像書き出しができると思います。一般的にイラストやロゴなどの単純な絵はPNG、写真などはJPGが良いと言われます。JPG、PNGそれぞれ得意・不得意があります。
それぞれの特徴
JPG
- 高い圧縮率
- 非可逆圧縮
- 写真の主なフォーマット
PNG
- 可逆圧縮
- 透過ができる
- 色数が多いとファイルサイズが肥大化する
ざっとこんな感じです。それぞれの特徴は圧縮方式の違いによるものです。JPGとPNGをうまく使い分けると、画質の劣化を最小限にして、ファイルサイズの削減ができます。逆に間違えると無駄にファイルサイズの大きな画像になり、ページ読み込みの時間増加につながります。
ここからは、もうちょっと技術的なところを見てみます。圧縮方式の違いを意識すると、より使い分けしやすくなります。だいぶ自分なりに噛み砕いてみたので、正確ではないかもしれませんがご了承ください。
JPGとPNGの圧縮方式の違い（超ざっくり）
JPG
JPG画像は圧縮するさいに8px四方のブロックに分けて、そのブロックを「だいたい」に近似します。人間は明るさの変化には鋭敏ですが、色の差には鈍感なので、上手いことその当たりの情報量を削ったりして圧縮しています。その情報量の削減が、非可逆圧縮たる所以です。そのため元の画像からは情報量の削減、つまり劣化が発生しています。また、圧縮率を上げてファイルサイズを下げるとブロック上のノイズが発生するのも、8px四方に分けて圧縮操作を行うため、情報の欠落が多くなると、その境界が滑らかにつながらなくなるからです。→ブロックノイズ(Wikipedia)
ブロックノイズの外にも、色の差の激しい部分（例えば、写真において、空とビルの境目など）にモヤモヤしたノイズ、モスキートノイズが発生します。これは色差の変化を圧縮していることに由来します。色の変化をJPGでは圧縮されがちなので、くっきりとした線画やイラストなどの画像が不向きと言われるのこのためです。JPGの特性上、線や境界部分はボヤっとしてしまいがちです。→モスキートノイズ(Wikipedia)
JPGのデメリットばかりを挙げてきましたが、メリットはデメリットでもある、その圧縮率です。非可逆圧縮という特性上、劣化は避けられないのですが、その分ファイルサイズはグッと減っています。サイトの表示スピードが左右する世界で画像のファイルサイズは避けては通れない観点です。フルカラーの画像を手頃なファイルサイズに削減できるメリットは強力です。
■JPG：約413KB
■PNG：約636KB
ほとんど画像の差は分かりませんが、PNGの方がJPG約1.5倍ほどファイルサイズがあります。画像サイズは630px×428pxですが、画像が大きくなればなるほど、PNGはファイルサイズがどんどん膨れ上がっていきます。
PNG
PNGはJPGとは違い、可逆圧縮なので画像の劣化がありません。画質を重視する場合はPNGの方が有利ですが、画像と大きさによってはファイルサイズが非常に大きくなるので、サイトの表示スピードは低下します。ただし、画像によってはJPGよりも小さいファイルサイズで、なおかつ劣化のない画像を実現できます。
PNGの圧縮方法は「言葉で伝える」ような感じです。以下の画像は、黒と白の画像です。この画像を誰かに伝えようとすると「黒と白が交互になった画像」と言えば伝わるでしょう。
■PNG：約713B（キロバイトではない）
■JPG:約3.8KB
ファイルサイズ差でおよそ5倍も差が出てきます。しかも劣化がありません。これはPNG一択ですね。
また、PNGにはJPGにはない、強力なメリットがあります。それは「透過」です。透明度の情報を持たせることができるので、画像の下の要素を透けさせることも可能です。また、透過を組み合わせて、画像と画像を重ねることもできます。文字画像などにもPNGは適しています。透過が必要な場合はPNGが必須になります。この場合、写真などでもPNGで書き出す必要があります。
写真とイラストが混じった画像は？
写真とイラストが合わさった画像など判断に迷うこともあります。こればっかしは、ケース・バイ・ケースです。画質を優先するならPNG、ファイルサイズを重視するならJPG、とその場に合わせて使い分けるほかありません。しかし、PNGの性質上画像サイズが大きくなるとファイルサイズも大きくなりがちなので、大きな画像はJPGを使ったほうが無難かもしれません。
JPGとPNG、使いわけて快適なサイト環境を作りましょう。