WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。
特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
JPGとPNGとGIFの違いと使い分け
今回はJPGとPNGとGIFの厳密な違いなど、専門的な話はしません。(←詳しくは「gif jpg png 違い」などのワードでぐぐってもらえばわかると思います。)
また、ブログにおける使い分けという点に焦点を絞って話を進めます。
▼まず最初にこちらの画像をご覧ください。上がJPGで下がPNGです。
僕の目には画質はさして変わりないように見えます。
実は、JPGの画像の方がPNGの倍の容量なのです。
つまり、JPGとPNGの特性を理解して使い分けた方がきれいで軽い画像が用意できるのです。
この特性を間違えて書き出したとき、下手すると汚くて重い画像になったりします。
後述しますが、iPhoneではスクショを撮るとPNG、写真を撮るとJPGで保存されます。要はそういうことなんですよ。そのまま使うのが向いてるんです。
というわけで、画像フォーマットの特徴と使い分け方をご紹介していきます。
JPGを使うシーン
JPGは写真のように色数がものすごい数になる画像向きです。
デジカメなどではもちろんJPGを選べますし、iPhoneでもカメラアプリで撮影するとJPGで保存されます。
ただし、iPhoneでスクショを撮るとPNGになりますので、iPhoneのスクショで写真的な部分が多めの物(カメラアプリのレビューなど)は容量のことは諦めてPNGにするのがいいです。(後述しますが、ここで言うPNGはPNG-24の方です。)
またJPGは容量を下げようとするとちりめん状のノイズが入ります。イラスト系の画像をJPGで保存して容量を削っていくとノイズまみれで汚くなりますので避けた方がいいです。
▼このキャラの目の周りや髪の毛を見ると分かると思いますがこんな具合に荒れてしまいます。しかも場合によっては汚い上にPNGより重くなるという最悪の事態も…。
PNGを使うシーン
iPhoneアプリの画面など、イラスト系の画像にはPNGが向いています。
また透過で書き出せるのはPNGの特徴です。
ブログ記事内の画像で必要かどうかは使う人次第ですが、デザインするときに使う画像では透過を使うことも多いでしょう。
PNGにはPNG-8とPNG-24の二種類があります。
PNG-24は画質が良くてきれいですけど、その分容量はでかくなります。
PNG自体はイラスト向きではありますが、PNG-24であれば写真のような画像も結構きれいにいけちゃいます。
PNG-8は色数が256色と少ないため容量が抑えられますし、イラスト系のものであれば結構きれいに書き出せます。
容量削減したいときにはPNG-8が向いてます。
PNG-8は容量が軽くなる代りに、256色で表現するためにグラデーションはきれいに出せないこともあります。ブログでは軽さを優先させて多少は諦めますが、仕上がり具合を見てPNG-24との使い分けをすると良いと思います。
PNGを軽くする方法
iPhoneやMacのスクショはPNG-24で書き出されてしまうので、もし軽くしたいならなんらかの処置が必要です。
一番簡単なのはTinePNGというサービスを使う方法。
このサービスはPNG-24をPNG-8に変換して容量を削ってるそうです。
MacアプリのImageOptimなどを使って容量を削ってもいいと思います。ImageOptimの仕組みは良く知りませんが、おそらくTinyPNGと同じようにPNG-8で書き出し直すのと同じようなことをやってるんだと思います。
TinyPNGやJPEGminiを安易にかけると…
ここまで話すと分かっていただけると思いますが、写真をPNG-24で保存していた場合、TinyPNGなどで容量を減らす(PNG-8に変換する)と画質がものすごく落ちます。写真を256色で表現しようとするわけなので当然なんですが。
「ブログですべての画像をPNGに統一する」なんて考えてる方は、ここで大きく損をするので要注意です。
当然逆もしかりです。JPGでスクショなどのイラスト系の画像を保存してた人がJPEGminiで容量を落とすとものすごく画質が荒れます。
つまり、画像の適性を生かした拡張子で保存していなかった場合、ブログ全部の画像を一括で容量を減らそうとするのは危険なんですね。
毎回ブログにアップする際に一枚一枚状態を見ながら容量を削ってアップロードしていくようにするのが一番安全です。
GIFを使うシーンは？
最後にGIFについて。
僕がブログでGIFを使うことはほとんどありません。
GIFはPNGと似た性質を持ってますのでイラスト系の画像が向いてるのですが、その場合はPNGの方を使ってます。
敢えて使うとするならGIFアニメを使いたいときか、設定を間違って書き出したときくらいですね。
参考記事
今回この記事を書くのに参考にした記事を貼っておきます。
- 最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか (その画像形式でいいですか？)｜Web Design KOJIKA17
- どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。 : ギズモード・ジャパン
- WEB画像について－GIF・JPEG・PNGの特徴
- gif、jpeg、PNG8、PNG24のそれぞれの画像ファイルの違いの情報はwebディレクターズで！
- 最適な画像書き出しの基本 （1/4）：CodeZine
最後に
JPGとPNGとGIFの違いを理解して使い分けるときれいで軽い画像を提供できますので、読んでくれる人のことを考えてきちんとした使い分けをしていきましょう。
ちなみに僕も書き出し間違って適切な画像になってない場合があります。毎回気を使いたいんですけどね。