>パソコンライフこれでバッチリ!JPEG/PNG/GIFの違いとは?2018年10月10日TwitterSharePocketHatenaLINEコピーするJPEGとPNGとGIFの違いって皆さん分かりますか?これらはパソコンなどで画像を保存するときによく使われる保存形式ですが、形式を気にせず適当に保存していると後々面倒なことに遭遇するかもしれません。そこで今回はJPEGとPNGの使い方についてご説明しようと思います。アイナ私はお気に入りの画像を保存するとき適当ですよ~インターネットの世界ではキレイで軽い画像が超重要!キレイな画像を入れるだけであれば高画質の画像をたくさんいれるだけなので簡単なんですが、そううまくいかないのがインターネットのみなさんは検索をするときに興味のあるサイトをクリックしてページが開くのに長いこと待たされた経験はありませんか?サイトの読み込みに時間がかかる主な原因は画像の読み込みと動画なんですね。この2つがページが開きにくくなる要因なので、あまり待たせてしまうとせっかく来てくれた訪問者が帰ってしまいます。ならないためにも際と全体を軽くするということが重要なんです。サイトが軽ければ良い訳でもない!?サイトの軽さを目指すのであれば低画質の画像や文字だけで充分なんですが、画質の悪い画像や文字だらけのページを最後まで読みたいと思いますか?少なくとも僕は読みたいとは思いません。書いている内容が知りたいことであれば読んでしまいますが、ほとんどのサイトは流し読みをするだけですぐに別のサイトへと足を運んで言ってしまいます。読者をひきつけるには文章以外にも画像を挿入したり、動画を埋め込んだりすることでサイト内の回遊や滞在してくれるので、画像を適度に入れるのは大切なことです。アイナ文字だらけの記事だと眠たくなっちゃうんですよ。JPEGとPNGのGIFの違いとは?それではJPEG/PNG/GIFの違いについてご説明したいと思います。深く解説すると頭がこんがらがってわからなくなると思いますので、分かりやすく説明するために重要なことだけをかいつまんで説明しますね。Group)主な特徴としてはフルカラーで画像を保存することができます。画像がきれいに表現できる上に用量が比較的小さいのでサイトの読み込みがとても早く、読み込みスピードが重要視される今のSEOでは非常に重宝されています。Graphics)の略称で、JPEGやGIFよりも後に登場した画像保存形式です。可逆圧縮方式を採用しており、画像を圧縮しても元となる画像データは記憶されているので、元のサイズに戻しても画像が劣化することなくキレイな状態を保つことが可能になっています。他にも透過処理をすることができるので、画像の合成をすることも容易に編集することもできます。欠点はJPEGやGIFよりも画像サイズの容量が大きくなってしまうので、サイトの読み込みスピードが遅くなってしまうことです。画像を複数使用しているページにいくつものPNGファイルを挿入してしまうと、読み込むだけでも数秒のロスとなってしまい、せっかく訪れた訪問者を逃してしまいかねません。PNG画像は1つのページにあまり使いすぎないようにする必要があります。Format)の略称で簡単な動画を作るのに最適な保存形式です。画像単体としてみてみるとJPEGやPNGと比較してもそれほど特徴的な部分がなく、画像として保存するのには若干使いづらい面があります。最大256色とJPEGやPNGと比べてもそれほどキレイには保存できないので、写真画像を保存するのには向いていません。使用用途としてはシンプルなイラストやアイコンなど保存するのがいいでしょう。JPEGとPNGの画像を見比べてみるそれぞれの画像保存形式について解説しましたが、どのような違いがあるのか画像を使って比較してみましょう。撮影画像の比較1つ目はカメラで撮影した画像を使って比較します。左右に並べた画像を見比べてみて違いがわかりますか?撮影画像の比較JPEGで保存した画像(ファイルサイズ:小)PNGで保存した画像(ファイルサイズ:大)左がJPEGで右がPNGで保存した画像です。両方を見比べてみても違いがわからないですよね?つまりどちらの保存形式を使っても違いがほとんど見られないということです。なるとファイルサイズが小さいJPEGで保存するというのが理想的な使い方となります。次にパソコンで表示されたイラストを使っての比較です。両方を見比べてみてどうでしょうか?イラスト画像の比較JPEGで保存した画像(ファイルサイズ:小)PNGで保存した画像(ファイルサイズ:大)左のイラストの方は少しぼやけて見えませんか?わかりにくい場合は画面をズームしてみると違いがハッキリとわかります。(CTRLを押しながら+を押すと拡大、ーを押すと縮小)このようにイラストをJPEGで保存すると画像がぼやけてしまい、見づらくなってしまうので、PNG形式で保存することをおすすめします。ついでにいうとJPEGで保存した画像は透過処理ができない仕様になっているので背景に色がついてしまいます。(上の画像では白)透過処理ができないと画像編集をする時に色々と問題が発生してしまいますので、加工をする場合は必ずPNG形式で保存することを忘れないでください。動画として使われるのが一般的なGIFの利用方法であり、パラパラ漫画の要領で画像を並べることによって簡単なアニメーションを作成することができるので、解説用の動画を作りたい人には重宝される保存形式とも言えるでしょう。上のアニメーションは解説用として僕が作ったものです。画像を順番通りに並べるとこのように動くアニメーションを作ることができます。youtubeに投稿するほどではないけれど、動画を使いたい場合にはGIFは最適な保存形式ともいえるでしょう。背景が透過処理の保存はPNGかGIFを使うこと!画像を編集する際に合成して使用する場面はあります。凝った画像を作るとなるとPNGかGIFで保存しておいたほうが後々便利です。下の画像はこのブログで使用しているロゴですが、最初からこのような画像があったわけではなく、それぞれのパーツを組み合わせて私が作成したものです。3種類のパーツを組み合わせています。万年筆どうやって作成したのかは長くなってしまうので、今回は割愛します。機会があればそのうち記事にしますので。それぞれ素材フリーのサイトから集めているので、自分好みの画像を作ることができ、納得がいくまで編集に没頭できますよ。(あまり時間をかけるのも問題ですが...)これらの素材はPNGで保存しないとうまく合成することができませんので、画像を保存する際には忘れずにPNG形式で保存をするようにしましょう。まとめこれまでの解説内容をまとめると次のようになります。まとめJPEGは撮影画像向けPNGはデジタル加工向けGIFはアニメーション向け透過処理はPNGかGIFで保存このように画像の保存形式を選ぶだけでも知っているのと知らないのとでは画像編集する上でだいぶ変わってきますので、今まで知らなかった方はこの機会に画像を効果的に使えるようになるのではないでしょうか。正しい使い方を覚えてブログ作りに役立ててください。アイナJPEGとPNGを両方使い分けることが大切なんですね。TwitterSharePocketHatenaLINEコピーする-パソコンライフ-画像author関連記事パソコンライフプリンターの管理が意外と面倒!?自宅に無くても印刷をする方法どうも。カエルブロガーのケロ蔵です。プリンターって便利ですよね。FORCE(リアルフォース)が使いやすかったどうも。カエルブロガーのケロ蔵です。人はパソコンに付属しているキーボードを使っていたり、数千円の比較的安いものを使っていると思います。...パソコンライフスクリーンプレッソが使いやすかったから有料版を購入した感想どうも。カエルブロガーのケロ蔵です。前回パソコンのキャプチャがとても便利なツール『スクリーンプレッソ』を紹介してきました。したんですか?ケロ蔵さん。...パソコンライフパソコン初心者でも必ず上達できる!タッチタイピングの練習法とは?どうも。カエルブロガーのケロ蔵です。休日は外に出かけず、1日中家にこもりっきりのインドア派。30代後半でブログで稼げるというのを知り、少しずつアクセスが増えはじめて本当に稼げるものだと実感している日々です。