JPEGとPNGとGIFの違いって皆さん分かりますか？
これらはパソコンなどで画像を保存するときによく使われる保存形式ですが、形式を気にせず適当に保存していると後々面倒なことに遭遇するかもしれません。
そこで今回はJPEGとPNGの使い方についてご説明しようと思います。
インターネットの世界ではキレイで軽い画像が超重要！
キレイな画像を入れるだけであれば高画質の画像をたくさんいれるだけなので簡単なんですが、そううまくいかないのがインターネットのみなさんは検索をするときに興味のあるサイトをクリックしてページが開くのに長いこと待たされた経験はありませんか？
サイトの読み込みに時間がかかる主な原因は画像の読み込みと動画なんですね。
この２つがページが開きにくくなる要因なので、あまり待たせてしまうとせっかく来てくれた訪問者が帰ってしまいます。
そうならないためにも際と全体を軽くするということが重要なんです。
サイトが軽ければ良い訳でもない！？
サイトの軽さを目指すのであれば低画質の画像や文字だけで充分なんですが、画質の悪い画像や文字だらけのページを最後まで読みたいと思いますか？
少なくとも僕は読みたいとは思いません。
書いている内容が知りたいことであれば読んでしまいますが、ほとんどのサイトは流し読みをするだけですぐに別のサイトへと足を運んで言ってしまいます。
やはり読者をひきつけるには文章以外にも画像を挿入したり、動画を埋め込んだりすることでサイト内の回遊や滞在してくれるので、画像を適度に入れるのは大切なことです。
JPEGとPNGのGIFの違いとは？
それではJPEG/PNG/GIFの違いについてご説明したいと思います。
ただあまり深く解説すると頭がこんがらがってわからなくなると思いますので、分かりやすく説明するために重要なことだけをかいつまんで説明しますね。
JPEGとは？
JPEGはジョイント・フォトグラフィック・エキスパート・グループ（Joint Photographic Experts Group）主な特徴としてはフルカラーで画像を保存することができます。
画像がきれいに表現できる上に用量が比較的小さいのでサイトの読み込みがとても早く、読み込みスピードが重要視される今のSEOでは非常に重宝されています。
PNGとは？
PNGはポータブル・ネットワーク・グラフィックス(Portable Network Graphics)の略称で、JPEGやGIFよりも後に登場した画像保存形式です。
可逆圧縮方式を採用しており、画像を圧縮しても元となる画像データは記憶されているので、元のサイズに戻しても画像が劣化することなくキレイな状態を保つことが可能になっています。
他にも透過処理をすることができるので、画像の合成をすることも容易に編集することもできます。
欠点はJPEGやGIFよりも画像サイズの容量が大きくなってしまうので、サイトの読み込みスピードが遅くなってしまうことです。
画像を複数使用しているページにいくつものPNGファイルを挿入してしまうと、読み込むだけでも数秒のロスとなってしまい、せっかく訪れた訪問者を逃してしまいかねません。
なのでPNG画像は１つのページにあまり使いすぎないようにする必要があります。
GIFとは？
GIFはグラフィックス・インターチェンジ・フォーマット(Graphics Interchange Format)の略称で簡単な動画を作るのに最適な保存形式です。
画像単体としてみてみるとJPEGやPNGと比較してもそれほど特徴的な部分がなく、画像として保存するのには若干使いづらい面があります。
最大２５６色とJPEGやPNGと比べてもそれほどキレイには保存できないので、写真画像を保存するのには向いていません。
使用用途としてはシンプルなイラストやアイコンなど保存するのがいいでしょう。
JPEGとPNGの画像を見比べてみる
それぞれの画像保存形式について解説しましたが、どのような違いがあるのか画像を使って比較してみましょう。
撮影画像の比較
1つ目はカメラで撮影した画像を使って比較します。
左右に並べた画像を見比べてみて違いがわかりますか？
撮影画像の比較
JPEGで保存した画像
(ファイルサイズ：小)
PNGで保存した画像
（ファイルサイズ：大）
左がJPEGで右がPNGで保存した画像です。
両方を見比べてみても違いがわからないですよね？
つまりどちらの保存形式を使っても違いがほとんど見られないということです。
そうなるとファイルサイズが小さいJPEGで保存するというのが理想的な使い方となります。
イラスト画像の比較
次にパソコンで表示されたイラストを使っての比較です。
両方を見比べてみてどうでしょうか？
イラスト画像の比較
JPEGで保存した画像
(ファイルサイズ：小)
PNGで保存した画像
（ファイルサイズ：大）
左のイラストの方は少しぼやけて見えませんか？
わかりにくい場合は画面をズームしてみると違いがハッキリとわかります。
（CTRLを押しながら＋を押すと拡大、ーを押すと縮小）
このようにイラストをJPEGで保存すると画像がぼやけてしまい、見づらくなってしまうので、PNG形式で保存することをおすすめします。
ついでにいうとJPEGで保存した画像は透過処理ができない仕様になっているので背景に色がついてしまいます。
（上の画像では白）
透過処理ができないと画像編集をする時に色々と問題が発生してしまいますので、加工をする場合は必ずPNG形式で保存することを忘れないでください。
GIFはアニメーション向けの保存形式
動画として使われるのが一般的なGIFの利用方法であり、パラパラ漫画の要領で画像を並べることによって簡単なアニメーションを作成することができるので、解説用の動画を作りたい人には重宝される保存形式とも言えるでしょう。
上のアニメーションは解説用として僕が作ったものです。
画像を順番通りに並べるとこのように動くアニメーションを作ることができます。
youtubeに投稿するほどではないけれど、動画を使いたい場合にはGIFは最適な保存形式ともいえるでしょう。
GIFアニメを簡単に作るなら⇛バナー工房
背景が透過処理の保存はPNGかGIFを使うこと！
画像を編集する際に合成して使用する場面はあります。
凝った画像を作るとなるとPNGかGIFで保存しておいたほうが後々便利です。
例えば下の画像はこのブログで使用しているロゴですが、最初からこのような画像があったわけではなく、それぞれのパーツを組み合わせて私が作成したものです。
この画像では『ノート』『文字』『万年筆』３種類のパーツを組み合わせています。
ノート
文字
万年筆
どうやって作成したのかは長くなってしまうので、今回は割愛します。
機会があればそのうち記事にしますので。
それぞれ素材フリーのサイトから集めているので、自分好みの画像を作ることができ、納得がいくまで編集に没頭できますよ。
（あまり時間をかけるのも問題ですが…）
これらの素材はPNGで保存しないとうまく合成することができませんので、画像を保存する際には忘れずにPNG形式で保存をするようにしましょう。
まとめ
これまでの解説内容をまとめると次のようになります。
まとめ
- JPEGは撮影画像向け
- PNGはデジタル加工向け
- GIFはアニメーション向け
- 透過処理はPNGかGIFで保存
このように画像の保存形式を選ぶだけでも知っているのと知らないのとでは画像編集する上でだいぶ変わってきますので、今まで知らなかった方はこの機会に画像を効果的に使えるようになるのではないでしょうか。
正しい使い方を覚えてブログ作りに役立ててください。
