ロスレス圧縮でサイト容量を削減
レスポンシブWEBデザインでのサイト構築において、頭を悩ませるのがサイト上に表示させる画像のサイズです。
レスポンシブWEBデザインの場合、画像の推奨サイズを一概にご案内することができません。サイトの構成によりまちまちである為です。ワイヤーフレームをしっかり設計できていれば、表示最大サイズを考慮して画像を作成できるのですが、少し慣れるまでは戸惑う制作者も多いはずです。
また全てのデバイスでの表示を考慮する上で、大きな画像を使い過ぎるとスマートフォン表示の際に表示遅延が発生する可能性があります。
逆にスマートフォン表示時を考慮し過ぎて画像を小さくし過ぎると、PCなどの画面で元画像より大きなサイズで表示する場合には、画像が引き伸ばされぼやけてしまうことも考えられます。
そこで積極的に取り入れたいのが、画像のロスレス圧縮です。
ロスレス圧縮とは?
ロスレス圧縮とは、データを全く損なわずに復元できるような圧縮方式のこと。つまりロスレス圧縮を利用することで、無駄なデータ量を省き、ページ容量の軽量化を図ります。
ロスレス圧縮で容量を削減した実例
実際にロスレス圧縮をしてみた画像を比較してみましょう。
いかがでしょうか?ロスレス圧縮することにより、画像が荒れてしまうのでは?という心配も不要です。画質をほとんど落とさずにファイルサイズを小さくすることで、ページの容量を抑えることができ、サイト読込速度も改善可能です。
ロスレス圧縮 フリーで使えるツール3選
■TinyPNG
複数の画像ファイルをドラッグ&ドロップするだけでPNGファイルを最大70%圧縮。透過PINGにも対応しています。同じ画像を圧縮してみて、最も高い圧縮率を弾き出しました。圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。
■kraken.io(Chrome拡張機能)
サイト用の画像をブラウザ上で一括でロスレス圧縮できます。圧縮された画像は一括でzipファイルでダウンロードすることができます。こちらも圧縮率も表示され、どれぐらいの軽量化されたか一目で確認することが出来ます。
■JPEG専用ファイル圧縮プログラム -carmine-
複数の画像ファイルをドラッグ&ドロップするだけで、縮小されたJpegファイルを一括で作ることが出来ます。result_carmineフォルダが生成され、自動で保存してくれます。いくつかフリーソフトを試してみましたが、最もスムーズにロスレス圧縮できました。
百聞は一見に如かず。無料でつかえるツールをご紹介致しますので、是非トライしてみてください。
葉糸