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

レスポンシブ・ウェブ・デザインを大きく普及させたBootstrap。現在のバージョンは4。

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

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

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

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

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

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

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

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

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

• 参考：2017年最新版　iPhone・Androidスマホ　機種別画面サイズ、解像度、縦横比のまとめ

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

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

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

横幅1200pxの画像

横幅600pxの画像（アスペクト比は保持）

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

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

上に重なっているのが600pxの画像。表示サイズが変わると面積が大きく変わるのがよくわかります

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

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

LightFile Simulator β版

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

https://simulator.lightfile.net/

最後に

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