【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

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

ロスレス圧縮

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

レスポンシブ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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+