【画像の圧縮について】いろいろ理解していないと折角のデータ軽量化作業が無意味になるケースも！
Webページで使用する画像の型式、大きく分けて２つであることは他ページ（画像型式について）で説明しています。jpgとpng/gif、この大きくは2種類の画像を圧縮する際のデータ量や画質についてまとめてみました。Webサイトでの使用を想定していますので、データ量を軽く、画質もWebでの閲覧を想定して圧縮についてまとめています。
-
- データ圧縮とはなにか？（非可逆データと可逆データ）
- 写真画像データ(jpg)の圧縮について検証してみる。
- テキスト画像データを圧縮して比較（jpgとpng)。
- 結論！画像データの圧縮について
そもそも画像（データ）圧縮とは何かですが、、
wiki：データ圧縮より抜粋
データ圧縮（データあっしゅく）とは、あるデータをそのデータの実質的な性質（専門用語では「情報量」）を保ったまま、データ量を減らした別のデータに変換すること。高効率符号化ともいう。アナログ技術を用いた通信技術においては通信路の帯域幅を削減する効果を得るための圧縮ということで帯域圧縮ともいわれた。デジタル技術では、情報を元の表現よりも少ないビット数で符号化することを意味する[1]。
データ圧縮には大きく分けて可逆圧縮と非可逆圧縮がある。というより正確には非可逆圧縮はデータ圧縮ではない。可逆圧縮は統計的冗長性を特定・除去することでビット数を削減する。可逆圧縮では情報が失われない。非可逆圧縮は不必要な情報を特定・除去することでビット数を削減する[2]。
つまり、実質的な情報量を保ったまま、データ量を減らすこと、です。後半にでてくる「可逆圧縮」と「非可逆圧縮」ですが、これは圧縮して展開（解凍）した場合に、元データと違ってしまう場合は、非可逆圧縮といいます。
なぜ、非可逆圧縮と可逆圧縮について説明をしているかというと、主な画像形式のjpgとpngが、まさにこの非可逆と可逆に関連しているのです。
jpgは非可逆圧縮された画像で、pngは可逆圧縮された画像、ということになります。つまり、jpgはアプリケーション、たとえばPhotoshopなどで開いて→調整加工して→保存する、と画質が変化していきます。多くは画質ダウンになります。これに比べてpngは、アプリケーションで開いて→調整加工して→保存しても画質の劣化はないのです。
wiki：非可逆圧縮より抜粋
圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方式。不可逆圧縮（ふかぎゃくあっしゅく）とも呼ばれる。画像や音声、映像データに対して用いられる。静止画像ではJPEG、動画像ではMPEG-1、MPEG-2、MPEG-4(DivX、Xvid、3ivX)、MPEG-4 AVC/H.264、HEVC/H.265、WMV9、VP8、音声ではVorbis、WMA、AAC、MP3、ATRAC、Dolby Digital、DTS Digital Surround、Dolby Digital Plus、DTS-HD High Resolutionなどが代表的な非可逆圧縮方法にあたる。
中略）非可逆圧縮では、圧縮により一部のデータは欠落するが、人間の感覚に伝わりにくい部分は情報を大幅に減らし、伝わりやすい部分の情報を多く残すことで、劣化を目立たなくする。この結果、すべてのデータを均一に扱う可逆圧縮と比較して圧倒的な圧縮率が得られる。また、圧縮率と品質を両天秤にかけることができ、目的や環境に応じて適切なバランスを選ぶことができる。
つまり、jpg（上記引用ではJPEGと表記している）画像は既に非可逆圧縮された画像であり、人の感覚に伝わりにくい部分の情報を大幅に減らしている、ということなのです。同様な型式として、MPEG、MP3、があり、Doldyも非可逆なんですね。ノイズリダクションのフォーマットと認識しています。
実際に画像の圧縮率を見てみると、、
sample02a.jpg（Xperiaで撮影）1980ピクセル×1114ピクセル、データ量280kb。
上記sample02a.jpgデータ量280kb（キロバイト）の画像をシンプルにMacの圧縮ツールでzipに圧縮してみる。右画像のSizeから291KBになってる。
これってデータ量に変化はない？いや、増加していない？？そうなんです。jpgなどの非可逆圧縮データの場合、圧縮してもデータ量のダイエット（減少）は小さいのです。
ネット上にある画像を圧縮するコンテンツで圧縮してみる。
https://compressjpeg.com/
上記のCompressJPEGというサイトで圧縮してみました。
右図のように「-2％」圧縮される。やはり、jpgは、それほど圧縮されていない。増加しないだけ、一般的な圧縮よりは優秀ということ。
以下の画像sample02a-min.jpgが、その圧縮した画像。実はデータ量が3kb増加しいる。
sample02a-min.jpg、1980×1114、283kb
メリハリの効いたテキスト画像をjpgで作成→圧縮
text_img_sample01a.jpg、1980×557ピクセル、184kb
上記画像text_img_sample01a.jpgを先ほどと同じ、
https://compressjpeg.com
こちらで圧縮してみました。-8％先ほどの写真画像よりは圧縮されている。実際に圧縮した画像が以下です。16kbダイエットになっている。元画像の約8.7%なので、右図の-8%の数値は正しいといえる。
text_img_sample01a-min.jpg、1980×557、168kb
さらに、上記text_img_sample01をpng8ビットで書き出しみると、
text_img_sample01.png、1980×557ピクセル、74kb
上記画像text_img_sample01.pngを
https://compresspng.com
こちらで圧縮してみた。その画像が下で、70kbなので４kbのダイエット、元画像の5.4%減少できた。が、右画像のような7％の減少ではない。
text_img_sample01-min.png、1980×557ピクセル、70kb
写真画像データをpng24ビットで書き出して圧縮してみる
画像データの圧縮って、それほど圧縮されない印象かと思いますが、画像データを圧縮して使用するケースが有効な使用方法ではないということで、実際には画像データの圧縮は活用されています。例として、png24ビットデータ。つまり、tifとかpsdデータになると圧縮は有効になるケースが多い。つまり、印刷用の画像データの受け渡しの際には、必要画像をまとめて圧縮して受け渡しをする、というケースが多い。
sample02d.png24ビット、1980×1114ピクセル、3.2m
上記png24ビット画像sample02d.pngを、
https://compresspng.com
こちらで圧縮した結果が右画像です。63％圧縮されている。その圧縮された画像が以下です。1.1mbなので、2.1mbダイエットできている。元画像のデータ量で65％減少しているので、右画像の63％とほぼ同じといえる。
sample02d-min.png、1980×1114ピクセル、1.1mb
画像圧縮のまとめ
写真のようにグラデーション（快調）の多い画像(jpgなど)は圧縮してもそれほどデータ量を減少させる事はできなくて、圧縮によってデータ量が増えるケースがある。
シンプルな階調の画像、つまりテキスト画像などは5％〜8％のダイエットができた。
グラデーションのしっかりした印刷に使われるような、つまり、Webに使用する元画像のようなデータは圧縮に有効で63％ダイエットできるケースもあるが、実際のデータが1.1メガなので、Webで使用するにはデータ量が大きいといえる。
結論、Webで使用する画像は，jpgやpngでも比較的余分なデータをそぎ落としたデータであり、圧縮をしても大きくはダイエットにならないデータであるケースが多い。なので、あと5％サイトデータをダイエットしたい、といったケースで有効である。
もし、大きく圧縮できた場合は、pngデータが、24ビットや32ビットであるケースがあるので注意が必要です。実際に、医療機関サイトを専門に制作している会社さんは、人物画像もすべてpng24ビットでサイトを構成していました。この場合、人物画像など写真画像は、jpgに変換をして、pngデータも8ビットに変換するという作業で、サイトのデータ量を大きくダイエットに成功して、検索からの評価も向上してランクアップ→アクセス拡大→新患（新規の患者さん）増加、できました。
昨今、サイトのデータ量を最適化することは、検索からの評価に影響します。スムーズにサイトを表示させる事はユーザーにもメリットがあります。
