開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

JPEG圧縮の仕組みと、おすすめオンラインツール。

最終更新:2017-08-16 by Joe

JPEG圧縮の仕組みについてです。JPEG, PNG、GIFは、いずれも画像ファイルのサイズを圧縮し、データを効率よく保存する方法です。

JPEGとは?

JPEGとは、静止画像のデータを圧縮する方式の一つです。同時に、「Joint Photographic Experts Group」の略でもあり、それはこの圧縮アルゴリズムを作った組織の名称でもあります。

JPEG形式で保存されたファイルの拡張子は「.jpg」と記載する事が多いですが、「.jpeg」と記載されることもあります。

圧縮の仕組み

JPEGの圧縮のしくみは、大学レベルの数学の知識を伴うため、すべてを説明するには複雑ですが、ポイントとしては、高い圧縮率を実現し、効率よくデータ量を減らすため、「データの一部を捨てる」というプロセスを伴う点があげられます。

ただし、この時「どのようにデータを捨てるか」がJPEGの優れた点で、「できるだけ人間の目でわかる画質に影響しないように」データを捨てます。

ですので、場合によっては肉眼では判断できないほど画質を維持したまま、データ量だけ減らす事ができるのです。

そして、データを捨てる際「どのくらい捨てるのか?」の割合は、その圧縮データの作成者によって、簡単にコントロールする事が可能です。

デザイナーの方はPhotoshopなど画像を書き出す際に、よくこのような操作しているはずです。

Photoshopの画像書き出し画面

JPEGの圧縮率の設定

JPEGのアルゴリズムについて
アルゴリズムの詳細はこちらに詳しく解説されています。数学の知識がないと、すこし難しいかもしれません。

データの非可逆性

上述のようなデータの消失を伴うデータ圧縮は、「非可逆圧縮」と呼ばれ、一度JPGで圧縮したデータは、元のビットマップに戻す事ができません。

逆に、圧縮方式として有名な「PNG(ピーエヌジー、ピング)」は、画像の品質を損なわない「可逆圧縮」と呼ばれ、元々の完全なビットマップ情報を維持できます。

(ただし、PNGの実用においては、もともと色数の多かったビットマップ画像を、インデックスカラー(png-8)するなど、色数を近似的に削減することで情報を破棄を伴う場合もあります。この場合、失われた情報を戻す事はできません。)

実用における注意点

JPEGは、そのアルゴリズムの特性から、イラストレーションのような「輪郭のくっきりした画像」が苦手です。

こちらがJPEG圧縮の例ですが、線などの輪郭部分にノイズのような模様が見られると思います。

このようなノイズは「モスキートノイズ」と呼ばれ、その処理の過程で必ず生じてしまいます。イラストレーションは、JPEGでなく、PNG圧縮を用いるべきでしょう。

オンラインJPEG圧縮ツール

近頃は、オンラインの方が使いやすいでしょう。メジャーなオンライン圧縮ツール3点をご紹介します。

Compress JPEG

http://compressjpeg.com/ja/

JPEG圧縮ツール

optimizilla.com」というサイトの側替えですが(SEO上の理由だと思います)機能性は全く同じです。

優れている点は、画質を見ながら、圧縮率を調整できる点です。これは非常に便利です。

20画像まで、まとめてアップロードし、圧縮できます。

TinyJPG

https://tinyjpg.com/

パンダのキャラが目印のキャッチーなJPG圧縮ツールです。

JPEG、PNG圧縮ツール

機能的には、上述の「optimizilla」と大差はないでしょう。ただし、このツールはPNG→JPEGの圧縮が可能です。

課金プランを選択すると、ファイル上限を20ファイル以上、1ファイルあたり5M→25Mとアップグレードできます。

オランダ、アムステルダムのVoormedia社が運営しています。

Toolur

http://compressimage.toolur.com/

見た目が粗野で、ちょっと扱いにくそうですが、機能的には一番パワフルです。25ファル同時、1ファイルあたり30MBまで許容してくれます。

参考

Wikiもそれなりにまとまっています。