開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

JPEG圧縮の仕組みと、おすすめ圧縮ツール5選。

最終更新:2018-11-02 by Joe

JPEG圧縮の仕組みについてです。JPEG、PNG、GIFは、いずれも画像ファイルのサイズを圧縮し、データを効率よく保存する方法ですが、その中でも特に用途の広いJPEGの特徴とはどんなものか、まとめて見ました。

JPEGとは?

JPEGとは、静止画像のデータを圧縮する方式の一つです。同時に、「Joint Photographic Experts Group」の略でもあり、それはこの圧縮アルゴリズムを作った組織の名称でもあります。JPEG形式で保存されたファイルの拡張子は、3文字で「.jpg」と記載する事が多いですが、まれに「.jpeg」と記載されることもあります。

デジタルカメラで撮影された写真は、通常最初は「Tiff」と呼ばれるビットマップフォーマットです。TIFFはいうなれば1ドットごとの色情報をそのまま保存した「生の」状態です。昨今の画質の高いデジタルカメラでは、画素数が膨大な数になってしまいますので、自動的に、ファイル容量の軽さで扱いやすいJPEGに圧縮された状態で保存されています。(プロの写真家の方々はむしろTIFFのまま保存することが多いでしょう。これは普通、カメラ側の設定で変更できます。)

デジタルカメラ以外においても、あまりにデータ量の大きな状態は、SDカードやパソコンのストレージ要領の側面で不便ですので、JPEGやPNG形式に圧縮することで、要領を小さくするのが一般的です。

同時に、多くのOS、デバイス、また画像編集アプリケーションがサポートしている、もっとも一般的な画像フォーマットでもあります。

JPEGはもっとも一般的な画像フォーマット
画像編集ツール「Adobe Photoshop」を使って、画像をJPEGで書き出す。

「JPEG」は「画像の圧縮方法」を指す名称なんだね。

JPEG圧縮の仕組み

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

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

これにより、場合によっては肉眼では判断できないほど画質を維持したまま、データ量だけ減らす事ができるのです。そして、データを捨てる際「どのくらい捨てるのか?」の割合は、その圧縮データの作成者によってコントロールする事が可能です。

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

PhotoshopのJPEGの圧縮率の設定
Photoshopの画像書き出し画面で、JPEG画質を設定する

この圧縮率の設定値「xx%」はJPEGのアルゴリズム上の指標ですので、この設定はAdobe Photoshopにかぎらず目にすることがあるはずです。

データ量を少なくするか、ファイル容量を減らすか・・。悩ましい問題だね。

それでは、画質と圧縮率の関係を調べてみましょう。

圧縮率による画質の変化

幾つかAdobe Photoshopで、圧縮率を変えてデータを書き出した例です。徐々にデータ量と共に、画質が悪くなっているがわかると思います。

画質:100%、データ量:312KB

最大の画質で書き出したものです。データ量312KBは、このようなウェブのブログ記事に貼り付けるには少し大きいといえます。

例えば、特にモバイル環境では、スムーズな4G環境でも速度は「8Mbps」これはおよそ「1MB/秒」と概算できますので、1枚あたり0.3 秒も待ち時間が生じてしまいます。これはウェブでは少し避けたほうが良いようなデータサイズです。

JPEG圧縮(100%)

画質:80% 、 データ量:142KB

画質設定の値を80%に落とすことで、画像のデータ量を 100% 設定時の半分以下に減らすことができました。画質の低下は、肉眼ではそこまで目立ちません。

JPEG圧縮(80%)

画質:60%、 データ量:83KB

さらに画質を低下させます。このくらいから、画質の低下がやや目立つようになってきます。データ量としては、ウェブに配置するのであれば、このくらいか、できればもう少し落としたほうが良いように感じます。

JPEG圧縮(60%)

画質:30% 、 データ量:41KB

画質が悪くなってきたのが分かるようになってきます。データ量は、60%とくらべて 40KB 程度しか減っていません。これ以上画質を下げても、あまりデータ量を減らす意味が小さいかもしれません。

JPEG圧縮(30%)

画質:10% 、データ量:26KB

画像の輪郭がぼやけて、ノイズが目立ちますし、色味もビビッドさが失われています。もちろんデータ量は小さいですが、30 % と比べるとバイト数の差分が少ないです。

JPEG圧縮(10%)

上記のように、データ量の低下と感じられる画質の低下は、必ずしも比例しません。また、容量の低下自体も、100%〜60%付近の方がよりデータ量の減り方が大きくなります。

用途に合わせてバランスを見極めながら、ベストな圧縮率を決定すると良いでしょう。

JPEGの圧縮率の設置とデータ量のグラフ
100%〜80%付近の最も容量を減らせている事が分かる。80%では画質の変化も少ないため、データ容量だけを効率よく減らせている事が分かる。
JPEGのアルゴリズムについて

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

データの非可逆性

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

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

ただし、PNGの実用においては、もともと色数の多かったビットマップ画像を、「減色」と呼ばれる処理で、色数を近似的に削減することで、データの破棄を伴う場合もあります。(もちろん、この場合、失われた情報を戻す事はできません。)

PNGの種類と色数

PNGは、その特性上、利用される色数に応じて、圧縮率が上がります。

インデックスカラーと呼ばれる方式は、利用する色をパレットにして保存します。任意の色コードを指定できますので、色数を減色しても違いがわからないような色数の少ない画像(塗りつぶしの多いイラストなど)であれば、PNGは画質を維持したまま高い圧縮率を実現できます。

ダイレクトカラー(RGB値を直接指定)

  • PNG-24 ( 24bit RGB = 256 x 256 x 256 色、True Colorと呼ばれる)

インデックスカラー(カラーパレットを作成)

  • PNG-8 (8bit RBG, 256色以内でカラーパレットを作成)

JPEGの実用における注意点

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

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

JPEG特有のモスキートノイズ

このようなノイズは「モスキートノイズ」と呼ばれ、JPEGでは、その圧縮処理の過程で必ず生じてしまいます。

例で使ったイラストレーションのようなグラデーションが少なく、輪郭がはっきりしている画像は、JPEGでなく、PNG圧縮を用いるべきでしょう。

なるほど!PNGか、JPEGかは、画像の種類によって使い分けたほうがいいんだね。知らなかった〜。

おすすめオンラインJPEG圧縮ツール

近頃は、オンラインの方が使いやすいでしょうが、ローカルのアプリは大量に高品質な処理を行うには重宝します。下記に、メジャーなJPEG圧縮ツールをかいつまんでご紹介します。

1Compress JPEG

サイトURL:http://compressjpeg.com/ja/

JPEG圧縮ツール「 Comprees JPEG」のトップページ
ぞうさんのロゴが目印。

ちなみにこちらは、「optimizilla.com」というサイトのガワ(=見た目とテキスト)だけ変更したサイトですが、(サイト名の変更は、SEO上の理由だと思います)機能性は全く同じです。

Compress JPEGの優れている点は、オンラインのUIを利用して、実際の画質をプレビューしながら圧縮率を調整できる点です。これは非常に便利です。

CompressJPEGは画質をリアルタイムに調整可能。
CompressJPEGの画質調整UI。使いやすく、分かりやすい。

また、最大で20画像まで、まとめてアップロードし、圧縮できます。こちらが最もお勧めのツールです。

2TinyJPG

サイトURL:https://tinyjpg.com/

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

JPEG、PNG圧縮ツール
圧縮が成功すると、パンダが喜ぶアニメーションがみられる。かわいい。

機能的には、上述の「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まで許容してくれます。

JPEG圧縮ツールのトップ
粗野な見た目だが、機能性は網羅されている。一人か少数のエンジニアが作ったのだと予想される。

この「Toolur.com」のドメイン配下には、JPEG以外にも様々なツールが用意されているので、眺めてみると、以外に便利なものが見つかるかもしれません。

4I Love IMG

サイトURL:https://www.iloveimg.com/ja

こちらは比較的新しくリリースされたツールですが、特に上述のツールと大きな違いは無いようです。無料で15ファイルまで、サインアップ(無料)すれば、30ファイルまで一度にJPEG圧縮が可能ですが、画質の調整ができないのが難点です。

2017年11月現在、まだリリースしてから日が浅いようですのでそのうち機能が追加されるかもしません。プレミアム機能もリリース予定なまま、未公開な状態なようです。

I Love IMG のトップページ

I Love IMG では、JPEG圧縮以外の機能で、サイズ(寸法)変更や、切り抜きなども可能ですが、あえてこのツールで行う必要も無い気がします。

5Adobe Photoshop & Lightroom

サイトURL:http://www.adobe.com/jp/products/photoshop-lightroom.html

言わずと知れたPhotoshop。こちは有料のみですが、最も現実的な選択肢として、こちらをおすすめしておきます。写真の編集に特化したツールである、Lightroomも、写真を取り扱うプロからも圧倒的な評価を得ています。

「Adobe Photo プラン」はPhotoshopとLightroomが両方利用できる月額制の契約プランです。

JPEG圧縮にはAdobe Photoshop

Adobeのシリーズは、フル契約では月々4980円と高価ですが、写真系のツールに2つに限定した「Photoプラン」はわずか980円/月でPhotoshopとLightroomが利用できます。一時的に大量のJPEGを圧縮する必要がある場合は、一時的に利用を検討してもよいのではないでしょうか?

Photoshopでは、特定の動作を記録して、バッチ処理を設定できます。これでフォルダ内の画像をまとめて圧縮することが可能です。効率が圧倒的に違いますし、サイズや画質調整に加えて、明るさや彩度の調整まですべてバッチ処理に組み込む事ができます。作業の効率やスピードに圧倒的な違いが出ることは間違いないです。

機能が非常に豊富ですので、始めての方はやや使い方に戸惑うかもしれませんが、いまや圧倒的なシェアをほこるアドビ製品ですので、グーグルなどで検索すればほとんどの操作方法は解決できます。

また、ローカルで動作するアプリならではの安定感がありますね。もしあなたが仕事の目的でJPEGの圧縮作業を検討しているのであれば、選択肢に含めてもよいのではないのでしょうか。

参考

JPEGに関しては、Wikiもそれなりにまとまっています。

閉じる