コラムColumn

【GIF・JPG・PNGの違いって何?】

05e4597f97c9f455e567e9422c3d5a21_s

こんにちは!2回目の投稿、やっさんです!

寒くなってきましたが、みなさん風邪などひいてないですか?
栃木は気温差が激しく、朝晩がとっても寒いです((+_+))
私の部屋には暖房器具がないので、最近はずっと布団に入っています(笑)

唐突ですが、デザインを作成していざ画像を保存!となった時、
みなさんはgif、jpg、pngどれで書き出していますか?
用途によって保存の仕方を変える人がほとんどかと思いますが、その明確な違いってご存知でしょうか?
今回はそんな「gif、jpg、pngの違い」のお話をしたいと思います。

GIF(Graphics Interchange Format)

GIFファイルは8ビットカラーのファイルです。
画像内では「CLUT(Color Look Up Table)」と呼ばれるカラーパレットにある256色しか使うことができません。

GIF画像の特徴は
・シンプルな画像の場合ファイルサイズを小さくできる
・透明な画像も使える
・GIFアニメーションが作成できる

256色しか使用できないため、色数の多い写真やグラデーションの表現は不向きです。
バナーの容量が指定されている時や、どうしても画像の容量を減らしたいときに使うといいかもしれませんね。

JPG(Joint Photographic Experts Group)

JPGは画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮します。
16777216色(256x256x256)を扱えるため、色数の多い写真やグラデーションの表現に向いています。

しかし、JPGの画像圧縮方法は「非可逆圧縮」といい、一度圧縮してしまうと元には復元できません。
一度低画質で保存してしまうと、元の状態には戻せないので要注意です。
アンチエイリアスによって、ぼやけたりかすれたりするので、線や活字、シャープな輪郭を含む写真にも不向きです。

PNGで保存するよりデータ容量が少ないため、編集する予定のない画像やWEB用の画像であればJPG画像で十分だと思われます。

PNG(Portable Network Graphics)

PNGもJPGと同様16777216色(256x256x256)を扱えるため、色数の多い写真やグラデーションの表現に向いています。
また、PNGであれば透明色も表現できます。
JPGと違い「可逆圧縮」なので、画像の質を落とすこともありません。

しかし、GIF、JPGと比べるとファイルサイズが大きくなりがちです。
また、古いブラウザではPNG画像はサポートされていない場合もあるので要注意です!

PNG画像のデータ容量を減らしてくれる便利なサイト♪

3つのデータの特徴を比べると「じゃあ全部PNGでいいじゃないか!」となりそうですが、
データ容量が重く、WEBサイト制作をした場合読み込みに時間がかかってしまう…
「少しでもPNG画像の容量を減らす方法ないの?」という方にオススメの便利なサイトがあります。

TinyPNG – Compress PNG images while preserving transparency
20151029_001
https://tinypng.com/
PNGファイルをブラウザにドラッグ&ドロップするだけで画像を最大70%まで圧縮することが可能なのが「TinyPNG」。
画像の質をほとんど落とさずにファイルサイズを少なくすることができますよ!

いかがでしたか?
3つの特徴をしっかり把握して、使用用途にあった適切な保存形式で保存する・・・
基礎的なことですが、覚えておくといざという時に役立てることができたらいいですね♪

GIF / JPG / PNG / WEBデザイン / 画像

執筆者:yatabe0922

お問い合わせフォーム