ロスレス圧縮でサイト容量を削減

レスポンシブWEBデザインでのサイト構築において、頭を悩ませるのがサイト上に表示させる画像のサイズです。

レスポンシブWEBデザインの場合、画像の推奨サイズを一概にご案内することができません。サイトの構成によりまちまちである為です。ワイヤーフレームをしっかり設計できていれば、表示最大サイズを考慮して画像を作成できるのですが、少し慣れるまでは戸惑う制作者も多いはずです。

また全てのデバイスでの表示を考慮する上で、大きな画像を使い過ぎるとスマートフォン表示の際に表示遅延が発生する可能性があります。

逆にスマートフォン表示時を考慮し過ぎて画像を小さくし過ぎると、PCなどの画面で元画像より大きなサイズで表示する場合には、画像が引き伸ばされぼやけてしまうことも考えられます。

そこで積極的に取り入れたいのが、画像のロスレス圧縮です。

ロスレス圧縮とは？

ロスレス圧縮とは、データを全く損なわずに復元できるような圧縮方式のこと。つまりロスレス圧縮を利用することで、無駄なデータ量を省き、ページ容量の軽量化を図ります。

ロスレス圧縮で容量を削減した実例

実際にロスレス圧縮をしてみた画像を比較してみましょう。

いかがでしょうか？ロスレス圧縮することにより、画像が荒れてしまうのでは？という心配も不要です。画質をほとんど落とさずにファイルサイズを小さくすることで、ページの容量を抑えることができ、サイト読込速度も改善可能です。

ロスレス圧縮　フリーで使えるツール3選

■TinyPNG
複数の画像ファイルをドラッグ&ドロップするだけでPNGファイルを最大70％圧縮。透過PINGにも対応しています。同じ画像を圧縮してみて、最も高い圧縮率を弾き出しました。圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。

■kraken.io（Chrome拡張機能）
サイト用の画像をブラウザ上で一括でロスレス圧縮できます。圧縮された画像は一括でzipファイルでダウンロードすることができます。こちらも圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。

■JPEG専用ファイル圧縮プログラム -carmine-
複数の画像ファイルをドラッグ&ドロップするだけで、縮小されたJpegファイルを一括で作ることが出来ます。result_carmineフォルダが生成され、自動で保存してくれます。いくつかフリーソフトを試してみましたが、最もスムーズにロスレス圧縮できました。

百聞は一見に如かず。無料でつかえるツールをご紹介致しますので、是非トライしてみてください。

葉糸