JPEG、PNG、GIFの違い【使い分けのポイントや特徴について】

JPEG、PNG、GIFの違い【使い分けのポイントや特徴について】

 

ヤナケン

こんにちは!

柳井です。

 

代表的な画像の形式といえばJEPG(ジェイペグ)、PNG(ピング)、GIF(ジフ)の3つがあると思いますが、どう使い分けたらよいのかイマイチわかりづらいですよね。

※PNGにおいてはPNG-8とPNG-24という2タイプがあったりします

 

それぞれの形式について細かく解説されているサイトもありますが、専門的すぎて具体的な使い方が分かりにくことがあります。

そこで今回は私が実際にどのように使い分けをしているのか、それぞれ形式の違いを含めて解説していきます。


それぞれの使い方

『ファイルの説明はいいから、とにかく使い分けのコツだけおしえて!』

という方が多いと思いますので、まずはじめに結論を。

 

『印刷物はサイズを気にせず最高画質の画像形式で』

『ウェブは表示速度に影響がでるのでなるべく軽い画像サイズで』

 

これが使い分けのポイントです。

印刷物で使う画像形式は、JPEGかPNG-24

印刷物の場合、ウェブの様に表示速度を気にする必要がないので、

なるべく質がよく、画像サイズが大きいものを掲載するようにしましょう。

 

ほとんどの画像がフルカラー形式の『JPEG(画質100%) 』で問題ありません。

透過系のアイコンやロゴ、イラストを掲載する場合のみ(JPEGでは透過画像が扱えない)、同様のフルカラー形式『PNG-24』を使いましょう。

ウェブの場合は、表現でそれぞれを使い分ける

ウェブの場合は、画像サイズが大きいと表示速度が遅くなってしまう可能性があるので、

質とサイズのバランスを見ながら、なるべく軽い画像サイズで掲載するようにしましょう。

 

経験上、下記の様に使い分けるのがオススメです。

写真系の画像(詳細なグラデーション、自然色を含む)
JPEG

ベタ塗りのイラスト、アイコン(透過無し)
PNG-8

透過系の画像(イラスト、アイコン、写真を含む)
PNG-24

アニメーション画像(上下する矢印とか)
GIF

【補足】画像サイズの比較

画像の内容にもよるので一概に言えないことですが、一般的には下記の様になります。

一番軽い:PNG-8、GIF

↓↓↓

そこそこ軽い:JPEG 中画質
※画質を70%位にしておくと、ファイルサイズが軽くなります。

↓↓↓

フルサイズ:PNG-24、JPEG 高画質

 

それぞれのファイル形式について

各ファイル形式について、もう少し突っ込んで解説をしていきます。

JPEG(ジェイペグ)の特徴

JPEGは私たちが一番馴染みにある画像形式で、色数の多い写真向けの形式です。

フルカラー画像ならJPEGが一番軽量!

フルカラー表現(約1,677万色)ができる画像形式で、物や風景写真など繊細なグラデーションや自然色を含んだ画像もきれいに表示することができます。

ちなみにフルカラーはPNG-24でも表現できますが、ファイルサイズが大きくなりがちなので、JPEGを使った方が同等の画質でも軽量に済ませることができます。

保存をかける度に画像が劣化する…

JPEGのデメリットとして、保存の度に画像が劣化してくということがあります。

といってもプロの写真家やデザイナーでない限り、そこまで気にする必要はありません。

透過画像を表現できない…

JPEGでは透過画像を表現できません。

たとえば一枚の写真から特定の画像を切り抜き、切り抜いた画像だけを表示したくても必ず白バックがついてしまいます。

透過画像を使いたい場合、JPEGの選択肢はありません。

PNG(ピング)の特徴

PNGは比較的新しい画像形式で、PNG-8(256色)とPNG-24(フルカラー)の2タイプがあります。

透過のないベタ塗り画像ならPNG-8が一番軽くてキレイ!?

PNG-8はベタ塗りのイラストやロゴの表現に強く、

美しい画質を保ちながらサイズが超軽量というメリットがあります。

私の場合、透過のないベタ塗りの画像についてはPNG-8形式しか使いません。

※GIFの方が軽くなる場合がありますが、微々たるものです

透過画像ならPNG-24がオススメ!

透過するような画像については、PNG-24が一番美しく表現できます。

PNG-24はJPEG同様にフルカラー形式なので、詳細なグラデーションや自然色にも強く、JPEGのような画質の劣化もありません。

 

画質としてはパーフェクトなPNG-24ですが、その分ファイルサイズが重くなりがちななので、ウェブで多様すると表示速度が遅くなってしまう可能性があります。

そのためウェブでPNG-24を多用する場合は、圧縮ツールを使いできる限り軽量化しておきましょう。

≫画像圧縮ツール『TinyPNG』

※ソフト不要、ブラウザ上で圧縮できます
※JPEGの圧縮にも対応

GIF(ジフ)の特徴

GIFについては、PNG-8に近く透過ができる画像形式といったイメージです。

私はアニメーション以外で、あまり使うことがありません。

ベタ塗りのイラスト、ロゴ向けの画像形式

GIFで表現できる色数はPNG-8同様に256色、ベタ塗りのイラストやロゴであれば、GIF形式にしておくと画像サイズを軽くすることができます。

逆に写真の様な詳細なグラデーションや自然色の表現には不向きで、表現はできますが画像が荒くファイルサイズは大きくなります。

PNG-8におされ気味かな…

ベタ塗りのイラストやロゴを得意とするGIFでしたが、

最近では同じ色数を表現できるPNG-8がよく使われるようになり、GIFが使われる機会めっきり減った印象を受けます。

透過画像も表現できるが…

GIF形式は透過画像も表現できますが、

周りがギザギザになっちゃうことが多いんですよね…

なので透過画像ではGIFでなく、PNG-24を使うのがオススメです。

きちんと圧縮をかければPNG-24でもかなり軽量化しますよ!

アニメーション画像ならGIFで決まり!

私がGIFを使う唯一のケースはアニメーション画像を使う場合で、

JPEGやPNGで表現できないアニメーション画像が、GIFでなら表現できます!

ウェブでよく上下に動く矢印を見たりすることってありませんか?

あれはGIF形式で作られたアニメーションです。

 

最後に

以上、今回は3つの画像形式について解説させていただきました。

画像ファイルの使い分けで迷ったら参考にしてみてください!


ご拝読ありがとうございました。

コメントやご質問はお気軽に、ページ最下部にあるコメント欄よりどうぞ

ヤナケン

【下記画像をクリックして、儲かる物販ノウハウを手に入れる】 

ヤナケン公式メルマガ

メルマガ読者様限定で僕が身に付けた独自性・希少価値の高い物販ノウハウを、どんどん公開していきます。また有料級のプレゼントも無料で定期的にお届けします。

不要の場合は、いつでも解除可能です。
メルマガでお会いできるの楽しみにしております!

≫詳細が気になる方はコチラから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください