さっと表示されるホームページ

昨今通信速度の向上により、昔ほどホームページの表示を待たされることは少なくなってきました。

制作側としては、重い画像が扱える、ゴリゴリに動くホームページが作れると思われがちですが（もちろんそういうコンセプトページならOKだと思います）、個人的には、動きは最小限で必要な情報がすぐに手に入ることが一番大事だと思います。

そこで、今回は早く表示させる方法を考えていきたいと思います。

第1回は、画像についてになります。レスポンシブな今日のホームページはこれが必須ですね。

最近では、多種多様な大きさの画面が存在しそれに合わせてhtml側でサイズの違った画像記述することが可能です。ただ、全サイズに対応するのは現実的ではないので、ある程度的を絞るのが現実的です。また、それに合わせて画像も複数用意しないといけません。

Retinaディスプレイに対応した書き方

Retinaディスプレイサンプルコード

<img
srcset="img-example.jpg 1x,
img-example2@2.jpg 2x"
src="img-example.jpg" alt=“サンプル画像”>

1x：通常の解像度
2x：2倍の解像度（Retinaディスプレイ）

@2は2倍の解像度だというのをわかりやすくするためのものです。

解像度に応じて表示する場合

画面のサイズにあわせて表示サンプルコード

<img
srcset="img-example320.jpg 320w,
img-example640.jpg 640w"
src="img-example640.jpg" alt="サンプル画像">

画面サイズ：320pxまで、img-example320.jpgを表示、
画面サイズ：640pxまで、img-example640.jpgを表示、
それ以外（640px以上の場合）は、img-example640.jpgを表示

例えば、画面の横幅320pxのRetinaディスプレイは解像度2倍なので、640wのimg_example640.jpg　が表示されます。

ただ、これだけでは画面サイズに応じてにはなりません。

画面のサイズにあわせて表示させる場合

画面のサイズにあわせて表示サンプルコード

<img
srcset="img-example320.jpg 320w,
img-example640.jpg 640w"
sizes="50vw" 
src="img-example640.jpg" alt="サンプル画像">

sizes=”50vw”が新しく追加されました。
これにより、常に表示サイズは「画面サイズ」の50%のサイズで表示されます。
例えば画面サイズが768px（横）だったとすると
img-example640.jpg が 384px（768pxの50%）で表示されまます。

条件分岐させて表示さる場合

条件分岐で表示サンプルコード

<img
srcset="img-example320.jpg 320w,
img-example640.jpg 640w,
img-example1000.jpg 1000w" 
sizes="(max-width: 320px) 100vw,(max-width: 800px) 75vw,50vw" 
src="img-example1000.jpg" alt="サンプル画像">

画面サイズ：320pxまで、img-example320.jpgを表示
画面サイズ：640pxまで、img-example640.jpgを表示
それ以外（641px以上の場合）は、img-example1000.jpgを表示

かつ、

画面サイズ：320pxまで　は　画面サイズの100%、
画面サイズ：800pxまで　は　画面サイズの75%、
それ以外（801px以上の場合）は　画面サイズの50%で表示

例えば、画面サイズ900pxの場合、img-example1000.jpgが　450px（900pxの50%）で表示されます。

もはや暗号です。
普段見ている画像もこれまで例に出した感じの記述で表示されていることが多くなってくると思います。

以上のように画像を細かく設定することで画面サイズに応じた画像が自動的に選択されよみこまれ表示するようにすることができます。

次回に続く。