最適な画像圧縮方法

シェアする

ブログをアップロードするにあたり、サクサクページを表示させるため、ページの容量を削減することは大事です。とりわけ容量の多くを占める画像のファイルサイズを、なるべく見た目はそのままで小さく圧縮する必要があります。最適な画像圧縮方法について検証したいと思います。

最適な画像ファイル形式

画像といっても、図1のように(a)数式など白黒のグレースケールの画像や、(b)カラーの図表などの画像や、(c)上記のキャッチアップ画像のような写真があるので、それぞれ見た目を維持したまま、どのように保存するのが最適か比較してみました。

(a)グレースケール図表

(b)カラー図表

図1. 比較に用いた画像.

それぞれBMP形式で保存したものを、WindowsのペイントでJPEG形式、PNG形式、GIF形式に変換して保存した際のサイズは下記表1のようになりました。なお、BMP形式は24ビットカラーのものと256色のものを用意し比較しましたが、(b)と(c)のカラー画像の場合256色では劣化してしまい使い物になりませんでした。また、(c)の写真をGIF形式とした場合もドット上のノイズが入り画像は大きく劣化しました。

表1. 画像形式とファイルサイズ(KB).

カラー 24ビット 256色
画像 (a) (b) (c) (a)
BMP 331 331 331 112
JPEG 68 60 60 67
PNG 48 55 304 19
GIF 17 23 劣化 17

以上より、グレースケール画像とカラー図表はGIF形式、写真はJPEG形式とすべきと考えられます。また、GIF形式で保存する場合、元画像が24ビットカラーでも256色同等のサイズなので、元画像は種別にかかわらず24ビットカラーで問題ないとわかりました。

最適な画像圧縮方法

高い画像処理ソフトを使えば、かゆいとことに手の届く細かな調整で画像の圧縮が可能と思いますが、調べてみると最近は無料でかなりレベルの高い画像圧縮サービスを提供するオンラインサイトがいくつもあるようです。そこで、上記検証で用いた画像(b)及び(c)を使って、どのサイトが最適か検証してみました。

表2. 画像圧縮サイトと圧縮率.

サイト JPEG 圧縮率 GIF 圧縮率 調整 複数
JPEGmini -50%
Tiny PNG -19%
Compressjpeg -40%~
Optimizilla -40%~
iLoveIMG -54%  ±0%
Compressor -51%  -数%
Compressnow -29%~  劣化
Kraken -18% ±0%

①のJPEGminiはドラッグ&ドロップに対応しており、処理前後の画像比較が容易にできます。 ページはシンプルですが、動作が遅いです。

②のTiniy PNGは20個までの複数画像を一括で処理でき、ドラッグ&ドロップに対応していますが、処理前後の画像比較ができません。1ファイル最大サイズ5MBまで。ちょっとページがごちゃごちゃしていて使いにくいです。

③のCompressjpegは20個までの複数画像を一括で処理でき、ドラッグ&ドロップに対応しています。また、処理後の画像をクリックすることで、さらなる画質調整ウィンドウが開き、拡大画像を見ながら、圧縮率と画質を調整できます。ページもシンプルで使いやすいです。

④のOptimizillaは②のCompressjpegとほぼ同じシステムを使っているようです。20個までの複数画像を一括で処理でき、ドラッグ&ドロップに対応しています。②と違い、処理後の画像をクリックしなくても、初期から画質調整ウィンドウが開いており、拡大画像を見ながら、圧縮率と画質を調整できます。ページもシンプルで使いやすいです。

⑤のiLoveIMGはドラッグ&ドロップに対応していますが、処理前後の画像比較ができません。ページはシンプルで使いやすいです。

⑥のCompressorはドラッグ&ドロップに対応しており、処理前後の画像比較が容易にできます。 1ファイル最大サイズ10MBまで。ページはシンプルで使いやすいです。GIFの圧縮ができる数少ないサイトですが、GIFはもともと圧縮率が高いのでさらに圧縮できることは少ないのですが、画像によってはさらなる圧縮がうまくいくものもありました

⑦のCompressnowは20個までの複数画像を一括で処理でき、ドラッグ&ドロップに対応しています。また、画質調整バーで圧縮率を調整できます。ただし、処理前後の比較画像が強制的に正方形となるので、すごく見にくいです。1ファイル最大サイズ9MBまで。唯一GIF画像を圧縮できる中で画質調整ができるサイトなのですが、少しでも圧縮率を上げるとすぐに画像が劣化してしまって、使い物になりませんでした。

⑧のKrakenは複数画像を一括で処理でき、ドラッグ&ドロップに対応しています。また、画質調整タグで圧縮率を調整できますが複雑で初心者にはわけがわかりません。処理前後の比較画像もできません。1ファイル最大サイズ1MBまで。また、GIFの画質調整は対応してません。

最適な圧縮率は?

最適な画像圧縮サイトは決まりましたが、画像の圧縮率はどれくらいにすべきかを調べてみました。これまでの検証で用いた(c)の写真を使って、Optimizillaで画質を調整した場合の画質とファイルサイズの関係を下記表3にまとめました。画質を比較しやすいように、画像を3倍に拡大して中心部を切り抜いた結果を同時に記載しました。

ファイルサイズに関しては画質70%までは大きく削減され、それ以上画質を下げてもサイズはあまり下がらないことがわかります。また、実際の画質に関しては画質80%までは拡大してもまずまずの見た目で、画質70%は我慢の限界、それ以下は劣化し過ぎとの印象です。画質70%は拡大するとだいぶ粗く見えますが、元の大きさであれば、それほど違和感はありませんでした。よって、ギリギリまで画質を維持して、なるべくファイルサイズを下げる限界は画質70%程度と言えそうです。

表3. 画質とファイルサイズの比較.

画質 サイズ(KB) 中心部拡大画像
100 57  
90 36  
80 29
70 19  
60 16  
50 14  

まとめ

以上をふまえると、最適な画像圧縮方法は、図表はGIFで保存してCompressorで圧縮、写真はJPEGで保存してOptimizillaで画質70%で圧縮と定まりました。