GIF、JPG、PNGの違い

画像を保存する際にGIFかJPG、またはPNGどの形式で保存するのかというのかウェブデザインを始めた人が最初に迷う疑問の1つですよね。正直、私もドット絵やイラストならGIF、写真やグラデが多い画像であればJPG、PNGはサイズ重視で画像の劣化を避けたい時や正直良く分からない時、、程度の知識しかない人間ですが、今回親切にもその違いを解説してくれた記事があったので紹介したいと思います。 — SEO Japan

JPG形式でロゴを受け取るときはいつも、私の小さな一部分が停止する。実際には、それは私の大きな部分だ。なぜなら、画像用に適切なファイル形式を選択することは、良いウェブデザインの必要不可欠な部分だからだ。

あなたは、JPG画像が再保存されるたびにクオリティを失うことを知っていただろうか?PNGとGIF画像は、“可逆圧縮”を使用して完璧な画像クオリティを維持するが、実際には、適切に使用された場合にはJPGよりもファイルサイズは小さくなる。もしこのことがあなたにとって初めて知ることなら、あなたのデザイナーがWacomタブレットをひっつかんで安全な場所に逃げ込む前に読み進めよう。

JPG

JPGは、最近では最も一般的な画像形式である。一般的に、目立ったクオリティ損失のない最小ファイルサイズを誇りにしている。大半の良いことと同様に、あなたはそれをそこら中で使用し始める前に気を付ける必要がある。

全ての画像形式は、何らかの形の圧縮を使用する。JPGの圧縮は、“不可逆”と呼ばれ、“100%クオリティ”設定であっても常にデータを損失する結果となる。

JPG画像におけるクオリティの損失は、“アーティファクト”の形式、または、あなたが似た色もしくは高コントラストの境界の広い範囲で認識する小さな濃淡のむらがある部分で明らかである。この画像で、蜂の頭の上に突き出ているピンクの花びらの境界線辺りを見れば私の言っていることが分かる。

それでも、全ての望みを捨ててはいけない!JPG圧縮は、写真画像用に最適化されている。圧縮しすぎなければ、アーティファクトは肉眼では分からないだろう。しかしながら、JPGは再保存されるたびにアーティファクトの量を増やすことになるため、TIFやPhotoshopのPSDのような科学形式で写真のオリジナルコピーを持っておくべきだ。

PNG

PNGもまた、今現在、ウェブで大きな存在となっていて、可逆圧縮を使用している。あなたはクオリティを失うことなくPNGで写真を保存することができるが、ファイルサイズはかなり大きくなってしまう。PNGを使用するのに適しているのは、グラフィック画像だ。少ない色(16以下)と恐らく少ない勾配を使った描画である。PNGは通常、スクリーンショットには最高の選択肢である。

GIF & TIF

GIFは、ほとんどの環境下において時代遅れの形式であり、PNGに置き換わっている。GIFも可逆圧縮を提供するが、8ビットのインデックスカラーに限られる。それでも、いくつかの状況ではウェブグラフィックにはそこそこ良い選択である(PNGも試してみて、どちらが画像サイズが小さくなるか確かめてみよう)。

TIFは、広告印刷のためのハイクオリティな形式と見なされている。それは、可逆圧縮と膨大なファイルサイズを提供する。オリジナルの写真を保存するにはこの形式を使用するが、ウェブ使用の際は常にJPGにエクスポートする。

では、どんな場合にどちらの形式を使うべきなのか?

もしあなたがデザイナーでないのなら、覚えておくには多いということは分かっている。幸いにも、大部分の状況で良く見えるようにするための基本的なガイドラインがいくつかある。

たくさんのソリッド・カラーとくっきりとした境界線のあるウェブグラフィックには、JPGよりもPNGやGIFが適している。JPGの方がファイルサイズは小さくなるかもしれないが、アーティファクトが目立つため、画像のクオリティにかなり苦しむことになる。

写真画像では、PNGやGIFよりもJPGが適している。量に気を付けている限り、不可逆圧縮はオリジナル写真からの1回のエクスポートなら目に見えないし、ファイルサイズにおいて大きな減少を手にすることができるのだ!

どちらの形式を使えばいいのか分からない、もしくは、写真的要素とグラフィック要素の両方を含んだ画像を持っている場合には、バックアップコピーを取っておいて、これらの一般的なルールを頭に入れたうえで異なる形式を試してみることだ。クオリティを失うことなく最小ファイルサイズを手にするために、smush.itのようなオンラインツールを試してみるのもいいかもしれない。

最も重要なことは、常識を使うことだ。画像の再保存は少なければ少ないほどいい。もし、一緒に仕事しているデザイナーに画像を送信する場合には、ファイルサイズに関係なく最もクオリティの高い形式(TIFまたはPNG)で送るようにすることだ。一度クオリティを失ってしまえば、それは戻って来ない。あなたは、クオリティの低いJPGを異なる形式で再保存してクオリティを魔法のように上げることはできないのだ。

何か分からないこと、もしくは私が言い忘れたことがあれば、コメント欄で教えてほしい!


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

サンプル画像もあり、分かりやすい説明でした。何かの時の参考になれば幸いです。 — SEO Japan [G+]
Page Top

投稿ナビゲーション