JPG,PNG,GIFってどう違うの?最適な保存方法[猫画像あり]

どうも、Arakiです。北海道はもう雪がふるんじゃないかというくらい寒くなりましたね~。最近では電気ストーブをつけてヌクヌクしております。

ヌクヌクといえば、猫ですよね!!

mohu

冬は猫とコタツで丸くなっていたいものです・・・。

 

ところで拡張子の違いについてご存知ですか?

よくパソコンで写真を保存するときに

「○○.jpg」や「○○.png」

と言った形式で保存しますよね?

この「jpg」や「png」と言ったものを拡張子と言います。我々はその拡張子を設定して保存することができます。

そして場合に合わせて拡張子を最適なもので使い分けることができるようになれば、周りとも差がつきますね!

 

ではそもそもjpgやpng等はどういった使い分けをするか簡単に説明します。

1.jpg

・写真やグラデーション等の”色数の多い”場合によく使われます。

2.png

・PC画面キャプチャや図表、線画等の”色数の少ない”場合によく使われます。

・画像のファイルサイズを気にせず、”画質重視”の場合もpng形式が使われます。

・古いブラウザではサポートされていないこともある。

3.gif

・簡単に言えばいくつかの画像を順番にうつして映像っぽくしたもの。よく画像が動いてるのありますよね?あれの源がgifです。(下図)

ajax-loader←gifアニメーションの例です。

(ローディングしてるわけじゃありません!)

 

・透過画像を扱える。

・色数は256色しか使えない。

 

gifは今で言うpngの存在でありましたが最近はみかけませんね。

なぜならpngがでてきたことにより画質、透明色の画像をつくる等の機能を完全に上回ってしまったからです。

pngはgifのように8ビットカラー画像をサポートしていますが、JPGのように24ビットカラーRGB画像もサポートしています。なおかつ、可逆圧縮で、画像の質を落とすこともありません。

そのような理由からだんだん廃れてきてしまいました。中では、gifを好み、pngアンチと呼ばれるユーザーもまだまだいらっしゃるそうですよ!

pngの弱点はファイルサイズが大きいことなので、色数が256色までであればgifを選択することも良いですよね!

※今回はjpgとpngについて触れていきます。

 

 

さてさて、これだけではわかりませんので画像を見ていきましょう!

DSC09885.jpgDSC09745.jpg

これは先週の記事「小樽紅葉スポット!」という記事の中に載せていた2枚の写真です。

いやぁ~きれいですねぇ。私たちの大好きな猫も秋を感じています。シャドウをうまく使い・・・いやぁ良い表情をしていますね!

・・・っと猫を強調してしまいました。猫かわいい。

これらの画像のように”人物や風景等の写真を保存するときはjpgで保存すること”がおすすめです!

 

次に、画像を圧縮した場合について見てみましょう。

全てjpgで保存して画像アップロードしています。画質を落とすと、言うまでもなくファイルサイズも小さくなります。

ファイルサイズが小さければ表示するスピードも格段に早くなります。加えて、転送量が少なければサーバーに負担がかかりません。いいことだらけですよね!

また、反対に言えば「ファイルサイズを小さくする→画質が落ちる」ということです。

画像をクリックすると大きく見ることができるので、違いをみてみましょう。

画像JPG形式

最高画質(100)
ファイルサイズ:329KB

画質60
サイズ:140KB

画質30
サイズ:64KB

画質0
サイズ:28.6KB

※ここでの「画質100」や「画質60」はadobe photoshopのWEB用へ保存する場合の表現方法です。

今、上から順に画質100→画質60→画質30→画質0と見ましたね?そしてあなたはきっとこう思ったでしょう。

「あれ、画質落ちたって言ってるけどあまり変わってない・・・?」

そうなんです。JPG形式で保存した場合、こういった色数の多い画質を落としてもあまり変わらないのです!

これがJPGの特徴で人間の目では違いがわからない程度で圧縮してくれるんですね~とてもすばらしいです。

 

「いやいや、後ろの葉がボヤけているし、猫の毛の繊細さがなくなってるじゃん」

と思った方もいるでしょう。確かに画質100と画質0を比較すると画質が粗くなっていることがわかりますね。

さすがのjpgも、かなりファイルサイズを小さくすれば粗さが目立ってきます。これは仕方のないことです。

ただ、画質100と画質60であれば見分けは、ほぼつかないでしょう。

 

ここで他pngとgifのサイズもまとめて表にしてみました。

ファイルの形式ファイルサイズ
jpg最高画質(100)329KB
jpg60140KB
jpg3064KB
jpg028.6KB
png908KB
gif435KB

jpgが1番ファイルサイズが軽いことをおわかりいただけましたよね。

hikaku

pngは画質60と見た目ほとんど変わらないのに、ファイルサイズは6.5倍も!

数値から見てもjpgを選択するといいことがわかります。

なので、画質60~30で保存・アップロードすることをオススメします。

 

続いてpngについてみていきましょう。

あいうえおあいうえお

これは簡単な線画を画像保存したものです。左がpng、右がjpgです。

pngはファイルサイズが大きいかわりに画質を粗くせずぎりぎりまでファイルサイズを落とすこともできます。

つまり、jpgは一度画質を落としたりリサイズして小さくしてしまったら、元の画質に戻すことはできません。

一方、pngはわかりやすく言うと”データをそのまま保存している”とでもいうのでしょうか。リサイズしても画質が粗くなったりしません。

ちなみにpngは透過効果をつけることもできるのでとても便利だったりします。(ちなみにLINEスタンプはpng画像です)

□透過画像

pngとgifは透過画像を扱うこともできます。

touka

透過した画像というのは絵がない背景部分を透明にするかどうかの話です。

まとめ

 JPGPNG
良い点比較的高画質のままファイルサイズを小さくすることができる。・画質が粗くならない
・透明、半透明の画像も使える
・シンプルな画像の場合によっては、JPGよりファイルサイズを落とすことができる。
悪い点・ファイルサイズを小さくすれば画質が粗くなり、ノイズが目立つ

・画質を落とせば確実に劣化する

・シンプルな線画の場合は画質が劣化する
・ファイルサイズがとても大きい。(画像や写真)
特徴色数の多い画像に強い

・人間の目には判別しにくいように画像を圧縮し、ある程度までは画質を維持したまま、画像容量を小さくすることができる。

基本的にWEBにアップロードする場合は容量が小さいほうがサーバーに負担かけませんし、閲覧スピードも速くなるのでJPGがおすすめです。
色数の少ない画像に強く、全く画質を劣化させない

・容量を気にせず最高画質そのまま(画質重視)で保存する場合、または線画等のシンプルな画像の場合に使う。

・画面キャプチャや線画をアップロードする場合はPNGでアップロードするのがオススメです(JPGだと画質劣化します)

長々と話してきましたが、これ一択!っていうものはないんですね。

場合によってうまく使い分けられるのがプロです!みなさんもプロの第一歩を踏み出しましょう(?)

それでは、この辺で。

スポンサーリンク

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

▼スポンサーリンク
▼LINEスタンプ販売中です!
▼おすすめの記事
▼スポンサーリンク

お知らせ

12月28日~1月3日はお休みとさせていただきます。

新着記事

  1. Windows10がディスク使用率99%や100%で激重になる場合にチェックする項目や対処法
  2. 5分でできる!いろいろな形の円を作成するチュートリアル:Illustrator
  3. Adobe CCで「ログイン」「続行」がループしてアプリを起動できない場合に確認するポイント
ページ上部へ戻る