PNGとJPEGの違いとファイル圧縮のしくみ、徹底まとめ。WWWクリエイターズHTMLタグ辞典CSSリファレンスGitコマンド開発ブログ開発ブログGit、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。›PNGとJPEGの違いとファイル圧縮のしくみ、徹底まとめ。PNGとJPEGの違いとファイル圧縮のしくみ、徹底まとめ。Joeよくある疑問、JPEG(JPG)と、PNGの違いについてです。どっちがいいの?どっちがきれい?どっちが軽いの?は状況によって異なりますが、それをうまく使いこなせるよう、できるだけ詳しく、でも分かりやすくまとめてみます。参考リンクJPEGとPNGの違いについて何が違うの?JPEGとPNGは、それぞれ画像を取り扱うための保存形式(ファイルフォーマット)です。それらの違いは、ファイルデータを圧縮してファイルサイズを軽くするためのしくみ(=圧縮アルゴリズム)が異なります。同じ画像ファイルでも、中身のデータがかなり違うので、最終的に「画質」「ファイルサイズ」に違いが生じます。どちらが画質が良いの?保存時の条件にもよるため一概にいえないのですが、大雑把に答えると、PNGの方が画質良いことが多いです。そのかわりに、PNGのほうが、ファイルサイズが重くなることが多いです。画質とファイルサイズが違うのはなぜ?上述の通り、JPEGとPNGの違いの大部分は「圧縮アルゴリズムの違い」です。画像の情報は、基本的には「ビットマップ」とよばれ、1ピクセルにどんな色が割り当てれているか?を1つずつ保存します。(Windowsでは、bmpという保存形式が、これに近いです)ビットマップはそのままでは、画像サイズに比例してデータ量がどんどん大きくなってしまいますので、うまくデータ量を抑えるように保存しないと、特に大きい画像ほど、取扱が難しくなってしまいます。(とくにインターネットでは、ファイルサイズの大きい画像は、致命的です。)どちらを使えばいいの?どちらのフォーマットも、ウェブやパソコンOS上で、広くサポートされており、実際の用途における制約はほとんどありません。あとは、画質と容量の側面で選べばいいのですが、それらが画像によって異なってしまうので、一概に言えません。すごく大雑把に言えば、塗りつぶしの多い画像には(イラストなど)はPNGを、もっと複雑な画像(写真など)にはJPGを使うと良いでしょう。おって詳しく見ていきます。見た目で分かる、画質の違いそれでは、具体例を交えて少し詳細に見ていきます。上述の通り、PNGはイラストが得意です。ためしにこのイラスト画像を圧縮してみます。pxのPNG画像ですが、ファイル容量を減らすように圧縮してみます。オリジナル画像(72KB)JPEGに圧縮(15KB)PNG-8に圧縮(16KB)それぞれの画質の特徴JPEGはそのアルゴリズムの特徴で、色と色の違いが大きい部分に大きなノイズ(モスキートノイズ)が生じます。色の輪郭がくっきりしている今回のイラストのような画像にはむしろ不向きです。PNGはビットマップ(ピクセルごとの色情報)を完全に維持するので、そのようなノイズは一切発生しません。ちなみに、上記の例では「PNG-8」と呼ばれる種類に圧縮しました。「8」とは、ピクセル単位の色データが「8ビット」であるPNGフォーマットである事を意味します。この時、カラーパレット(使用する色数)を2^8(8乗)である256色でしか使いません。使う色数が少ないほど、圧縮率が高くなり、ファイルサイズが小さくなります。この理由はこの記事の後の方で、説明します。「PNG-8」に対して、「PNG-24」と呼ばれる色数の多いフォーマットも存在します。これは2^24色の表現力があります。輪郭のくっきりした」「使用する色数の少ない」画像は、PNG圧縮において、圧倒的な圧縮率と画質を発揮します。PNGとJPEGの圧縮の仕組みPNGの圧縮アルゴリズムPNGの圧縮のしくみは、すごく大雑把に言うと「同じパターンが見つかれば、繰り返し保存しない」という考え方に基づきます。」によって実現されています。LZSS)これにより、画像のビットマップデータ内に「同じデータパターン」の繰り返しが多く見つかるほど、圧縮率が高まり、軽い画像になります。「同じデータパターン」とは、極端に言えば、色が一色で塗りつぶされた画像を想像して下さい。各ピクセルすべて同じ色で、その隣も同じ色です。これは画像が、パターンが1つだけで構成されていると言えます。逆のケースで、同じパターンが少ない画像があります。その写真に写り込んだものが細かく複雑であるほど、同じパターンを探すのが難しくなります。複雑さの少ない画像ほど、PNGは効率よく圧縮できますので、塗りつぶしの多いイラストなどに適しています。Group」と名付けられ、それはこの圧縮アルゴリズムを作った組織の名称です。JPEGの圧縮のしくみは、PNGと比べて複雑ですが、違いの大部分としては、データ量の圧縮のため、「データの一部を捨てる」というプロセスを伴う点です。JPGは高い圧縮率を実現が目的とした保存方法だからです。このデータの捨て方がJPEGの特徴で「できるだけ体感する画質に影響しないように」データを捨てます。場合によっては肉眼では判断できないほど画質を維持したまま、データ量だけ減らす事ができるのです。データの捨てる際、「どのくらい捨てるのか?」の割合は、しばしば画像データの作成者によってコントロールされます。デザイナーの方はPhotoshopなど画像を書き出す際に、よく操作しているはずです。Photoshopの画像書き出し画面:このようなデータ消失を伴う圧縮は、「非可逆圧縮」と呼ばれ、これにより、一度JPGで圧縮したデータは、元のビットマップに戻す事ができません。逆に、PNGは、画像の品質を損なわない「可逆圧縮」と呼ばれ、元々の完全なビットマップ情報を維持できます。PNGの実際の利用においては、もともと色数の多かった画像を、png-8にするなど、色情報を破棄を伴う場合もあります。この場合、失われた情報を戻す事はできません。まとめJPGとPNGの違い、理解できたでしょうか?完全に繰り返しになりますが、塗りつぶしの多い画像には(イラストなど)はPNGを、複雑な画像(写真など)にはJPGを使って見て下さい。ちなみに私は、どっちがベストか微妙だな〜、という場合は、JPGを使っています。圧縮率を変えながら、画質と容量のバランスを調整することが用意だからです。それでは、以上になります。参考リンクJPGのとPNGの違いに関する参考リンクです。PNGおすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。Chrome(グーグルクローム)に保存されたキャッシュを完全に削除する方法をまとめました。Spreadsheet)で改行の方法のご紹介です。リモートブランチの最新に合わせようとしたら・・、あれ?コンフリクト・・?なにこれ、うまくいかない12018-07-13GitCSSで上下・左右に中央寄せする方法、全部まとめHTMLとCSSで、テキストや画像を縦方向(上下方向)に中央寄せ(センタリング)したい事があります。取り消し方法や、やり直し操作に関する方法をまとめました。違いと役割ステージング環境という言葉は、ソフトウェア開発に携わっていてもあまり聞き慣れない方もいるかもしれません。この記事では、ソ12017-06-20ソフトウェア開発JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。JPEG圧縮の仕組みについてです。JPEG、PNG、GIFは、いずれも画像ファイルのサイズを圧縮し、データを効率よく保存12018-11-02ソフトウェア開発WordPressステージング環境の簡単な作り方ワードプレスでテーマ開発をしていると、本番データと同期した開発環境や、テスト環境がだいたい欲しくなります。いうのは、IT特有の言い回しです。「フロントエンド」とは?よく聞くけど、よくわからないIT用語解説。「アジャイル開発」とは?アジャイル(Agile)開発は、現代のソフトウェア開発においては無くてはならない概念となりました。違いと役割2017-06-20JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。英語で何?2018-03-20「フロントエンド」とは?2018-11-02「アジャイル開発」とは?2018-07-25おすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。隠しファイルを表示する方法。リセット方法2018-10-08「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。