記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

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

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

ロスレス圧縮

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

レスポンシブ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サイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

おすすめカテゴリの最新記事