JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。WWWクリエイターズHTMLタグ辞典CSSリファレンスGitコマンド開発ブログ開発ブログGit、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。›JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。JoeJPEG圧縮の仕組みについてです。JPEG、PNG、GIFは、いずれも画像ファイルのサイズを圧縮し、データを効率よく保存する方法ですが、その中でも特に用途の広いJPEGの特徴とはどんなものか、まとめて見ました。参考JPEGとは?JPEGとは、静止画像のデータを圧縮する方式の一つです。Group」の略でもあり、それはこの圧縮アルゴリズムを作った組織の名称でもあります。JPEG形式で保存されたファイルの拡張子は、3文字で「.jpg」と記載する事が多いですが、まれに「.jpeg」と記載されることもあります。デジタルカメラで撮影された写真は、通常最初は「Tiff」と呼ばれるビットマップフォーマットです。TIFFはいうなれば1ドットごとの色情報をそのまま保存した「生の」状態です。昨今の画質の高いデジタルカメラでは、画素数が膨大な数になってしまいますので、自動的に、ファイル容量の軽さで扱いやすいJPEGに圧縮された状態で保存されています。(プロの写真家の方々はむしろTIFFのまま保存することが多いでしょう。これは普通、カメラ側の設定で変更できます。)デジタルカメラ以外においても、あまりにデータ量の大きな状態は、SDカードやパソコンのストレージ要領の側面で不便ですので、JPEGやPNG形式に圧縮することで、要領を小さくするのが一般的です。同時に、多くのOS、デバイス、また画像編集アプリケーションがサポートしている、もっとも一般的な画像フォーマットでもあります。Photoshop」を使って、画像をJPEGで書き出す。「JPEG」は「画像の圧縮方法」を指す名称なんだね。JPEG圧縮の仕組みJPEGの圧縮のしくみは、少し高度な数学の知識を必要とするため、すべてを説明するには複雑ですが、ポイントとしては、高い圧縮率を実現し、効率よくデータ量を減らすため、「データの一部を捨てる」というプロセスを伴う点があげられます。この時「どのようにデータを捨てるか」がJPEGの優れた点です。処理の中で「できるだけ人間の目でわかる画質に影響しないように」データを捨てるのです。これにより、場合によっては肉眼では判断できないほど画質を維持したまま、データ量だけ減らす事ができるのです。データを捨てる際「どのくらい捨てるのか?」の割合は、その圧縮データの作成者によってコントロールする事が可能です。Photoshopなど画像を書き出す際に、よくこのような操作しているはずです。Photoshopにかぎらず目にすることがあるはずです。データ量を少なくするか、ファイル容量を減らすか・・。それでは、画質と圧縮率の関係を調べてみましょう。Photoshopで、圧縮率を変えてデータを書き出した例です。徐々にデータ量と共に、画質が悪くなっているがわかると思います。画質:100%、データ量:312KB最大の画質で書き出したものです。データ量312KBは、このようなウェブのブログ記事に貼り付けるには少し大きいといえます。秒も待ち時間が生じてしまいます。これはウェブでは少し避けたほうが良いようなデータサイズです。設定時の半分以下に減らすことができました。画質の低下は、肉眼ではそこまで目立ちません。データ量:83KBさらに画質を低下させます。このくらいから、画質の低下がやや目立つようになってきます。データ量としては、ウェブに配置するのであれば、このくらいか、できればもう少し落としたほうが良いように感じます。データ量:41KB画質が悪くなってきたのが分かるようになってきます。程度しか減っていません。これ以上画質を下げても、あまりデータ量を減らす意味が小さいかもしれません。データ量:26KB画像の輪郭がぼやけて、ノイズが目立ちますし、色味もビビッドさが失われています。比べるとバイト数の差分が少ないです。上記のように、データ量の低下と感じられる画質の低下は、必ずしも比例しません。容量の低下自体も、100%〜60%付近の方がよりデータ量の減り方が大きくなります。用途に合わせてバランスを見極めながら、ベストな圧縮率を決定すると良いでしょう。100%〜80%付近の最も容量を減らせている事が分かる。80%では画質の変化も少ないため、データ容量だけを効率よく減らせている事が分かる。JPEGのアルゴリズムについてアルゴリズムの詳細はこちらに詳しく解説されているようです。数学の知識がないと、すこし難しいかもしれません。JPEG画像形式の概要(圧縮アルゴリズム)。上述のようなデータの消失を伴うデータ圧縮は、「非可逆圧縮」と呼ばれ、一度JPGで圧縮したデータは、元のビットマップにそのまま戻す事ができません。逆に、もう一つの圧縮方式として有名な「PNG(ピーエヌジー、ピング)」は、画像の品質を損なわない「可逆圧縮」と呼ばれ、元々の完全なビットマップ情報を維持できます。PNGの実用においては、もともと色数の多かったビットマップ画像を、「減色」と呼ばれる処理で、色数を近似的に削減することで、データの破棄を伴う場合もあります。(もちろん、この場合、失われた情報を戻す事はできません。)PNGの種類と色数PNGは、その特性上、利用される色数に応じて、圧縮率が上がります。インデックスカラーと呼ばれる方式は、利用する色をパレットにして保存します。任意の色コードを指定できますので、色数を減色しても違いがわからないような色数の少ない画像(塗りつぶしの多いイラストなど)であれば、PNGは画質を維持したまま高い圧縮率を実現できます。256色以内でカラーパレットを作成)JPEGの実用における注意点JPEGは、そのアルゴリズムの特性から、イラストレーションのような「輪郭のくっきりした画像」が苦手です。JPEG圧縮の例ですが、線などの輪郭部分にノイズのような模様が見られると思います。このようなノイズは「モスキートノイズ」と呼ばれ、JPEGでは、その圧縮処理の過程で必ず生じてしまいます。例で使ったイラストレーションのようなグラデーションが少なく、輪郭がはっきりしている画像は、JPEGでなく、PNG圧縮を用いるべきでしょう。!PNGか、JPEGかは、画像の種類によって使い分けたほうがいいんだね。おすすめオンラインJPEG圧縮ツール近頃は、オンラインの方が使いやすいでしょうが、ローカルのアプリは大量に高品質な処理を行うには重宝します。下記に、メジャーなJPEG圧縮ツールをかいつまんでご紹介します。JPEGサイトURL:http://compressjpeg.com/ja/ぞうさんのロゴが目印。ちなみにこちらは、「optimizilla.com」というサイトのガワ(=見た目とテキスト)だけ変更したサイトですが、(サイト名の変更は、SEO上の理由だと思います)機能性は全く同じです。JPEGの優れている点は、オンラインのUIを利用して、実際の画質をプレビューしながら圧縮率を調整できる点です。これは非常に便利です。CompressJPEGの画質調整UI。使いやすく、分かりやすい。最大で20画像まで、まとめてアップロードし、圧縮できます。こちらが最もお勧めのツールです。2TinyJPGサイトURL:https://tinyjpg.com/パンダのキャラが目印のキャッチーなJPG圧縮ツールです。圧縮が成功すると、パンダが喜ぶアニメーションがみられる。機能的には、上述の「optimizilla」と大差はないでしょう。このツールはPNG→JPEGの圧縮が可能です。無料プランでは、ファイルは5MB以内、同時に20ファイルまでの制約がありますが、月々$25の課金プランを選択すると、1ファイルあたり5M→25M、ファイル上限は撤廃とアップグレードできます。「月々$25」は少し高すぎる気がします。後述する「Adobe社のPhotoプラン」は月々980円です。価格と機能のどちらをとってもAdeboのPhotoプランがが選択肢になるのではないでしょうか。オランダ、アムステルダムのVoormedia社が運営しています。3ToolurサイトURL:http://compressimage.toolur.com/見た目が粗野で、ちょっと扱いにくそうですが、機能的には一番パワフルです。25ファル同時、1ファイルあたり30MBまで許容してくれます。粗野な見た目だが、機能性は網羅されている。一人か少数のエンジニアが作ったのだと予想される。この「Toolur.com」のドメイン配下には、JPEG以外にも様々なツールが用意されているので、眺めてみると、以外に便利なものが見つかるかもしれません。IMGサイトURL:https://www.iloveimg.com/jaこちらは比較的新しくリリースされたツールですが、特に上述のツールと大きな違いは無いようです。無料で15ファイルまで、サインアップ(無料)すれば、30ファイルまで一度にJPEG圧縮が可能ですが、画質の調整ができないのが難点です。2017年11月現在、まだリリースしてから日が浅いようですのでそのうち機能が追加されるかもしません。プレミアム機能もリリース予定なまま、未公開な状態なようです。JPEG圧縮以外の機能で、サイズ(寸法)変更や、切り抜きなども可能ですが、あえてこのツールで行う必要も無い気がします。LightroomサイトURL:http://www.adobe.com/jp/products/photoshop-lightroom.html言わずと知れたPhotoshop。こちは有料のみですが、最も現実的な選択肢として、こちらをおすすめしておきます。写真の編集に特化したツールである、Lightroomも、写真を取り扱うプロからも圧倒的な評価を得ています。プラン」はPhotoshopとLightroomが両方利用できる月額制の契約プランです。Adobeのシリーズは、フル契約では月々4980円と高価ですが、写真系のツールに2つに限定した「Photoプラン」はわずか980円/月でPhotoshopとLightroomが利用できます。一時的に大量のJPEGを圧縮する必要がある場合は、一時的に利用を検討してもよいのではないでしょうか?Photoshopでは、特定の動作を記録して、バッチ処理を設定できます。これでフォルダ内の画像をまとめて圧縮することが可能です。効率が圧倒的に違いますし、サイズや画質調整に加えて、明るさや彩度の調整まですべてバッチ処理に組み込む事ができます。作業の効率やスピードに圧倒的な違いが出ることは間違いないです。機能が非常に豊富ですので、始めての方はやや使い方に戸惑うかもしれませんが、いまや圧倒的なシェアをほこるアドビ製品ですので、グーグルなどで検索すればほとんどの操作方法は解決できます。ローカルで動作するアプリならではの安定感がありますね。あなたが仕事の目的でJPEGの圧縮作業を検討しているのであれば、選択肢に含めてもよいのではないのでしょうか。参考JPEGに関しては、Wikiもそれなりにまとまっています。JPEGおすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。Chrome(グーグルクローム)に保存されたキャッシュを完全に削除する方法をまとめました。Spreadsheet)で改行の方法のご紹介です。リモートブランチの最新に合わせようとしたら・・、あれ?コンフリクト・・?なにこれ、うまくいかない12018-07-13GitCSSで上下・左右に中央寄せする方法、全部まとめHTMLとCSSで、テキストや画像を縦方向(上下方向)に中央寄せ(センタリング)したい事があります。取り消し方法や、やり直し操作に関する方法をまとめました。違いと役割ステージング環境という言葉は、ソフトウェア開発に携わっていてもあまり聞き慣れない方もいるかもしれません。この記事では、ソ12017-06-20ソフトウェア開発PNGとJPEGの違いとファイル圧縮のしくみ、徹底まとめ。ある疑問、JPEG(JPG)と、PNGの違いについてです。どっちがいいの?どっちがきれい?どっちが軽いの?は状況に12017-08-07ソフトウェア開発WordPressステージング環境の簡単な作り方ワードプレスでテーマ開発をしていると、本番データと同期した開発環境や、テスト環境がだいたい欲しくなります。いうのは、IT特有の言い回しです。「フロントエンド」とは?よく聞くけど、よくわからないIT用語解説。「アジャイル開発」とは?アジャイル(Agile)開発は、現代のソフトウェア開発においては無くてはならない概念となりました。違いと役割2017-06-20PNGとJPEGの違いとファイル圧縮のしくみ、徹底まとめ。英語で何?2018-03-20「フロントエンド」とは?2018-11-02「アジャイル開発」とは?2018-07-25おすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。隠しファイルを表示する方法。リセット方法2018-10-08「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。