【無料ツール】レスポンシブサイトで画像サイズを悩むならロスレス圧縮を!

【無料ツール】レスポンシブサイトで画像サイズを悩むならロスレス圧縮を!

ロスレス圧縮

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

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

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

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

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

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

ロスレス圧縮とは?

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

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

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

実例1.圧縮率37.44%

b_kinou01

▲元画像(17.98KB)

a_kinou01

▲ロスレス圧縮後(6.73KB)
実例2.圧縮率63.59%

m_01

▲元画像(139.62KB)

01 (1)

▲ロスレス圧縮後(88.79KB)
実例3.圧縮率54.98%

m_traffic-graph

▲元画像(35.64KB)

traffic-graph

▲ロスレス圧縮後(19.59KB)

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

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

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

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

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

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

葉糸

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。