意外と知らないJPGとPNGとGIFの違い

こんにちは、子供の頃の夢は漫画家だったトリでございます。

 

昔は自由帳にテキトーに線引いて漫画もどき描いてたなぁ。

そのうち人物以外描くのがめんどくさくなって(おい)、ただイラストを描くことだけにハマってましたっけ。

 

描くツールも、色鉛筆→コピック→Photoshopと変遷していったのですが、どれも中途半端にしか使いこなせず、結局「才能ねえや」って諦めました。

 

 

で。

 

ですね。

 

本日は昔の思い出を語りたいわけではなくてですね。

 

そのお絵かきツールや画像編集ソフトに関連した話をしようかと。

 

 

みなさんは何かしら画像を編集して保存される際、拡張子は意識されてますか?

  • 拡張子とはファイル名の後ろに.で付いているファイルの種類のことです

 

 

私は全然意識してませんでした。

 

 

なんというか、その時の気分?みたいな感じで選んでました。

 

これって思いっきり損してるんですよね。

 

画像一つとっても、拡張子を間違えて選んでしまうと、画質は微妙だわ、そのくせ容量は重いわ、も~う最悪!ってことにもなりかねません。

 

そんなわけで、どんな画像の時にどんな拡張子を選べばいいのか、リサーチしてきたので、まとめてみたいと思います。

 

 

意外と知らない拡張子

 

写真やグラデーションにはJPEG

デジカメで撮った写真を見ると、大抵このJPEGという拡張子になっていると思います。

 

このJPEGは肉眼では認識出来ないような、細かい色の違いを無くして画像を圧縮する形式です。

 

人の目に見えない部分を省くので、写真やグラデーションといった色数が多く、境がはっきりしていない画像に向いています

 

逆に、色数が少なく、境がはっきりしているテキスト(スクリーンショット)やイラストには向いていません。

 

 

実際に画像を見て頂くとよくわかります。

 

 

OK! 写真:特に問題なく綺麗に表示されています

桜

 

NG! テキスト:字の周りがボンヤリした感じ(ノイズ)になっています

JPEG

 

 

JPEGは写真・グラデーションに対しては高画質だけれども容量を軽くしてくれるというメリットがあります。

 

ただ、画像を大きくしたり、保存し直す度に圧縮されてしまうので、画質が劣化するというデメリットもありますので、ご注意を。

 

 

スクリーンショットやイラストにはPNG

JPEGとは反対に、肉眼で見えないところも全て表示してくれるのがPNGです。

 

スクリーンショットやイラストなど、色数が少なく境界がはっきりしているものに向いています

 

可逆圧縮方式(圧縮前と圧縮後のデータが等しい)のため、何度保存し直しても、画像の劣化もありません。

 

また、透過・半透過処理が出来るのもPNGの特徴です。

 

 

ただ、それだけ優秀な分、容量も大きくなります。

 

色数が多く細かい写真なんかをPNGで保存してしまうと、大容量になってしまいます。

 

 

NG! 写真:見た目はJPEG(265KB)と同等ですが、容量は572KBもあります

桜PNG

 

OK! テキスト:輪郭が鮮明で、容量もJPEG(24KB)より軽くなっています(16KB)

PNG

 

 

PNG=高画質・大容量なイメージがありますが、場合によっては上のスクリーンショットのようにJPEGよりも軽くなる場合もあります。

 

 

シンプルな画像やアニメーションにはGIF

動く画像を作りたい!でご紹介させて頂いたGIFですが、色数は256色しかないので、色数の多い画像でこの形式を選択すると荒くなります。

 

なので、必然的にアイコンなど、小さくても認識出来るようなシンプルな画像やアニメーションに向いています

 

が、現在はアニメーション以外ではほとんど出番がないかと思います。

 

 

NG! 写真:画質が荒くなっています

桜GIF

 

NG! キャプチャ画像:色数の少ないものでも画質が荒くなっています

GIF

 

OK! アニメーション:PNGだったものをGIFアニメにしてみましたが、鮮明です

1468760770j9jXabE7wYHHEpm1468760770

 

 

BMPは何に向いている?

オールラウンダーなのがこちらの拡張子で、Windowsでも画像の標準形式とされています。

 

圧縮をしないため、何度保存しても画質の劣化はありません。

 

ただ、その分データ容量はとても大きくなります

 

画質はPNGと変わらないので、「この画像編集ソフトPNGに対応してないっす!」っていう場合を除けば、そんなに使うことはないかな~と思います。

 

逆に、BMPが使えない編集ソフトはほとんどないので、画像を渡す相手がどんなソフトを持っているかわからない場合などは、容量は大きくなっちゃいますが、BMPファイルで保存しておくと無難ですね。

 

桜BMP

 

 

まとめ

4種類の拡張子の特徴を説明して参りましたが、カンタンにまとめるとこんな感じです。

 

 

  • JPEG:写真やグラデーションなど、色数が多く境界がはっきりしないもの

 

  • PNG:テキストやイラストなど、色数が少なく境界がはっきりしているもの

 

  • GIF:簡単なアニメーションを作りたい時

 

  • BMP:PNG非対応のソフトを持つ相手に画像を送りたい時

 

 

エイトくん
Oh・・・こんなの覚えられないYO!

 

という、アナタ。朗報です。

 

 

↓ペイントの「名前を付けて保存」にカーソルと置くと、それぞれの保存形式のヒントみたいなものが表示されます。

WS000000

 

どの形式がベストか忘れてしまった場合は、こちらも参考にしてみて下さい。

 

もちろん、このページをブックマークして頂いて、都度参照頂くのも歓迎です!

 

上手に拡張子を使い分けて、鮮明で軽い画像を保存できるように、是非それぞれの特徴を覚えていってくださいね。

 

 

 

 

↓↓この記事良かったよって思って頂けましたら、シェアお願いします(*´∀`*)↓↓

この記事に関連する記事一覧

コメントは4件です

  1. きりと より:

    トリさん

    こんにちは、きりとです。

    どの拡張子も特徴やメリットデメリットがありますよね。

    僕自身は「JPG」と「PNG」を
    好んで利用してますね。

    写真とかが綺麗にブログで表示されるので
    「JPG」を使っている理由になりますね。

    メリットデメリットや特徴が
    よく分かる記事で参考になりました。

    応援していきます。

    • きりとさま、こんばんは。

      私もこの記事のリサーチをしていくうちに、
      今までの自分の愚行を恥じましたf^^;

      Winshotでクリップボードにコピー→BMPでメールに貼り付けをして、
      「なんで、こんな重たいの!?」ってなってた理由が今わかりました。
      記事を書くと自分でも勉強になりますね。

      応援ありがとうございました。

  2. ナミ より:

    トリさんこんにちは^^
    ナミです。

    拡張子のそれぞれの特性

    よく理解できていませんでしたので
    すごく勉強になりました^^;

    今まで「jpeg」ばかり使っていたので
    これからもその特性や場面を
    考えて拡張子をつかっていきたいと
    おもいました^^;

    トリさんの今回の記事
    すごく参考になりました!

    ありがとうございます!
    応援して帰りますね^^

    • ナミさま、こんばんは!

      私も拡張子ひとつ取ってもこんなに奥が深いとは思いませんでしたf^^;
      アフィリエイトを始めてから、勉強勉強の毎日です。
      私も今後メールにBMPファイル添付して怒られないようにしたいと思います(笑)

      いつも応援ありがとうございます^^

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ