開発ブログ

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

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

最終更新:2017-09-28 by Joe

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

JPEGとは?

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

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

デジタルカメラで撮影された写真は「Tiff」と呼ばれるビットマップフォーマットですが、自動的に扱いやすく、ファイル容量の軽いJPEGに圧縮された状態で保存されます。

TIFFはいうなれば1ドットごとの色情報をそのまま保存した「生の」状態です。昨今の画質の高いデジタルカメラでは画素数が膨大な数になります。一般的な利用においては、SDカードやパソコンの要領の側面で不便ですので、JPEGで圧縮することで、要領を小さくします。

プロの写真家の方々はむしろTIFFのまま保存することが多いでしょう。(カメラの設定で変更できます)

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

JPEGはもっとも一般的な画像フォーマット
Adobe Photoshopから、画像をJPEGで書き出す

JPEG圧縮の仕組み

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

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

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

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

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

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

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

圧縮率による画質の変化

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

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

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

JPEG圧縮(100%)

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

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

JPEG圧縮(80%)

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

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

JPEG圧縮(60%)

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

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

JPEG圧縮(30%)

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

画像の輪郭がぼやけて、色味もビビッドさが失われています。もちろんデータ量は小さいです。

JPEG圧縮(10%)

上記のように、データ量の低下と感じられる画質の低下は、必ずしも一致しません。バランスを見極めながら、程よく圧縮率を決定すると良いでしょう。

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でなく、PNG圧縮を用いるべきでしょう。

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

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

[1] Compress JPEG

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

JPEG圧縮ツール: Comprees JPEG

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

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

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

[2] TinyJPG

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

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

JPEG、PNG圧縮ツール

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

無料プランでは、ファイルは5MB以内、同時に20ファイルまでの制約がありますが、月々$25の課金プランを選択すると、1ファイルあたり5M→25M、ファイル上限は撤廃とアップグレードできます。

ですが「月々$25」は少し高すぎる気がします。後述するAdobe社のPhotoプランは月々980円です。

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

[3] Toolur

http://compressimage.toolur.com/

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

[4] Adobe Photoshop

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

 

JPEG圧縮にはAdobe Photoshop

言わずと知れたPhotoshop。

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

Photoshopでは、特定の動作を記録して、バッチ処理を設定できます。これでフォルダ内の画像をまとめて圧縮することが可能です。

ローカルで動作するアプリならではの安定感がありますね。

参考

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

閉じる