GIF、JPG、PNGの違い

例えば、ロゴをJPG形式で受け取ったときなど、私はいつも私の中の何かが死に絶えるような気持ちになる。実際、それは私にとって非常に大きな出来事なのだ。なぜなら、画像に適したファイル形式を選択することは、Webデザインにおいて非常に重要なことなのだから。

JPG形式の場合、画像を再保存するたびにクオリティが下がってしまうことをご存じだろうか？PNGとGIFは”可逆圧縮(ロスレス圧縮：lossless compression)”を採用しているため、画像の品質を完ぺきに保持することができる。そして、適切に使用されれば、JPG形式よりもファイルサイズを小さくすることができるのだ。もしも、この事実があなたにとっての新情報であったならば、デザイナーがショックのあまりWacomのタブレットを握りしめ引きこもってしまう前に、下記の記事を読み進めてほしい。

JPG

JPGは今日において、最も一般的な画像フォーマットである。クオリティの損失は気が付かないほどで、最小のファイルサイズを誇っている。JPGには多くの利点があるが、あらゆる場面において使用する前に、いくつかの注意点を挙げておく。

あらゆる画像フォーマットは、何らかの圧縮方法を採用している。JPGの場合、“不可逆”と呼ばれる方法を採用しているが、これは、例えクオリティを”100%”に設定していても、常にデータの損失は発生してしまう方法なのだ。

JPG画像におけるクオリティの損失は”ノイズ”の個所を見れば明らかである。つまり、似た色やコントラストの高い境界（エッジ）で、小さな濃淡のムラに大きく表れる。下記の画像をよく見てほしい。蜂の頭の上部に、ピンクの小さな花びらが突き出ているが、この境界を見ていただければ、私が述べたことが理解できるだろう。

しかし、諦めてはいけない！JPGの圧縮方法は写真画像に最適化されているのだ。圧縮をしすぎなければ、こうしたノイズは目に見えないほど小さいものとなるため、気にする必要はない。しかし、ノイズの量はJPG画像を再保存するたびに増えてしまうため、TIFやPhotoshopのPSDのような、”可逆圧縮”を採用しているフォーマットでオリジナルのデータを保持しておくべきだろう。

PNG

PNGもまた、今日のWebでは広く使われており、”可逆圧縮”を採用している。PNGで写真を保存すればクオリティの損失を防ぐことはできるが、同時に、ファイルサイズは大きくなってしまう。PNGが適しているのは、グラフィカルな画像を保存する場合だ。つまり、使用されている色は少なく（16色以下）、グラデーションも少ない画像に適しているということだ。また、PNGはスクリーンショットに最も適しているフォーマットでもある。

GIF & TIF

多くの場合においてGIFは時代遅れの形式となっており、PNGに置き換わってしまっている。GIFも”可逆圧縮”を採用しているが、8ビットのインデックスカラーに限られている。いくつかの場面においては、GIFを使用することは良い選択となり得るため、PNGとの比較をし、どちらのファイルサイズの方が小さいかを確認しても良いだろう。

TIFは高品質なフォーマットであり、商業用の印刷物などに適している。TIFも”可逆圧縮”を採用しており、ファイルサイズも大きい。写真のオリジナルコピーを保存する際にはこのフォーマットを使用しよう。しかし、Webで使用する場合は、JPGフォーマットにすべきだ。

結局、どのフォーマットを使用すれば良いのだろうか？

デザイナーでもないのに覚えることが多すぎる、と思う方もいるだろう。しかし、安心してほしい。多くの場合で活用できる、基本的なガイドラインを伝授しよう。

ソリッドな色とくっきりとした境界線が多いWebグラフィックの場合は、JPGではなく、PNGやGIFを使用しよう。JPGの方がファイルサイズは小さくなるかもしれないが、ノイズが目立つようになればなるほど、品質における問題は大きくなる。

写真画像の場合は、PNGやGIFではなく、JPGを使用すべきだ。データの量に気を付けている限り、”不可逆圧縮”であっても、1回のエクスポートであればノイズは目に見えるほどではなく、ファイルサイズも非常に小さくなるはずだ。

どのフォーマットを使用すればいいかわからない場合、また、写真とグラフィックの両方の要素がある画像の場合は、画像のバックアップコピーを取ろう。そして、上記のルールを守った上で、異なるフォーマットを試してみよう。また、smush.itなどのオンラインツールを使用して、品質を保ちつつ、最小のファイルサイズでデータを取得するのもいいだろう。

最も重要なことは、基本となるルールをしっかりと守ることだ。つまり、再保存の回数が少ないほど、画像の品質は良くなる。一緒に仕事を行っているデザイナーに画像を送信する場合は、ファイルサイズに関わらず、TIFやPNGのような最高品質のフォーマットで送信しよう。画像の品質は、一度失われれば元に戻すことはできない。異なるフォーマットで低品質のJPGを再保存することによって品質が戻る、という魔法は存在しないのだ。

何かわからないこと、私が言い忘れたことはあるだろうか？お気づきの点があった場合、ぜひ、コメント欄から伝えてほしい！

この記事は、Portentに掲載された「GIFs, JPGs and PNGs, Oh My!」を翻訳した内容です。