[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

レスポンシブ・ウェブ・デザインにおいて、画像最適化が意味するもの。高速回線ではない環境で、不要なデータサイズをダウンロードさせない事が重要。

スマートフォンでウェブサイトをみることが、本当に多くなってきました。ウェブサイトの作りは十人十色であり、全く同じサイトは存在しないと行ってよいでしょう。今回は、レスポンシブ・ウェブ・デザイン(RWD)と画像最適化の関係について説明します。

2018-06-14-rwd-image-optimisation-02.jpgレスポンシブ・ウェブ・デザインを大きく普及させたBootstrap。現在のバージョンは4。

レスポンシブ・ウェブ・デザインとは

語弊を恐れずにいうならば、PCサイトとして作成したものを、同じソースコードでスマートフォンでも閲覧できるようにする方法です。CSSとJavascriptを利用して、ブラウザのウィンドウサイズによって表示を切り替えます。

今でこそスマートフォンが主流なので「スマホファーストのWeb制作」が当たり前ですが、RWDが出始めた頃は、まだまだPCサイトでの閲覧が多かった時代なのです。ガラケーサイトもあった時代ですし。

レスポンシブ・ウェブ・デザインで利用する画像は、スマホのウィンドウには画角が大きい

PCサイトでよく利用されている表現の一つに、スライダーがあります。トップページアクセスすると一番大きく表示されている画像が、時間とともに横にスライドしたりフェードイン・フェードアウトして切り替わるお馴染みの機能です。

このメインビジュアルに用いることが多いスライダーですが、一般的には「横幅1000pxから1200px」の画像サイズが多いです。PCであれば、モニタが1280px以上の解像度を持っているのがほとんどですので、問題ないなく表示することができます。

スマートフォンのディスプレイサイズは多種多様。しかし720pxのディスプレイも

iPhoneでは、750px以上のディスプレイサイズを持っています。しかもRetinaディスプレイですので横幅いっぱいにきれいな画像を表示するには倍角にあたる1500px以上が必要となります。

Androidでは、各社からさまざまな端末が発売されているため、ディスプレイサイズもさまざまです。その中で、720pxの端末がいくつか存在ます。この720pxの端末に上記の「横幅1000pxから1200px」の画像を表示すると、画角サイズとしてはオーバースペックなものとなります。本来は720pxあれば十分なので。

画角が大きい画像は、ファイルサイズも大きい

PNGやGIFであれば色数でファイルサイズが決まるので、画角サイズにはあまり影響されません。JPEGは画角サイズが大きければ大きいほど、ファイルサイズは大きくなります(PNGも利用する色数が多ければ、JPEGよりもファイルサイズが大きくなることがあります)。

実際にどのぐらい異なるのか、みていきましょう。

2018-06-14-rwd-image-optimisation-ogp.jpg横幅1200pxの画像

2018-06-14-rwd-image-optimisation-600.jpg横幅600pxの画像(アスペクト比は保持)

画像ファイルサイズ容量の差
1200px - 675px 987KB -
600px - 338px 274KB 713KB(約72%)軽い

ファイルサイズが大きく異なることがわかります。これは表示サイズが約1/4になっているためです。それに伴い、ファイルサイズも約72%と1/4近くまで削減されていることがわかります。

JPEGは画角サイズでファイルサイズが変わりますので、できるだけ最適な表示サイズで作成することが重要です。ディスプレイ表示サイズよりも大きな画像は重要ではないのです。

2018-06-14-rwd-image-optimisation-01.jpg上に重なっているのが600pxの画像。表示サイズが変わると面積が大きく変わるのがよくわかります

JPEGの最適化・軽量化にはLightFileがおすすめ

JPEG画像はツールを使うことで、さらに軽くすることができます。弊社のLightFileなら、画質をキレイに保ったまま、ファイルサイズを軽くすることが可能です。無料のシミュレータを利用して、どのぐらい軽くなるのか、せひ試してみてください。

LightFile Simulator β版

LightFile Simulator β版

無料で使える画像最適化チェックシミュレータ。チェック結果がレポートになるので、URLを共有すればみんなでみれる。

最後に

レスポンシブ・ウェブ・デザインは、デバイスごとにページ作成しなくてよいため、効率よくPCサイトとスマホサイトを制作することができます。有料のテーマもたくさんありますし、汎用的なテンプレートも数多く出ています。画像については制作するウェブサイトごとにオリジナルで作ることが多いでしょう。その時、画角サイズや画像軽量化をしっかりと行うことで、ウェブページの表示速度が速くなり、閲覧者にとってUXが高いウェブサイトと感じることができるようになります。

前へ前へ

実録Lighthouseのスコア改善〜Performance(ユーザー待ち時間)編

次へ次へ

表示サイズごとにファイルサイズを比較!画像最適化は、表示サイズと画質調整が重要!