レスポンシブWebデザインで画像をどのように扱ったらよいのか

2017年3月5日カテゴリー : CSS コメント : 0

　2015年に Google がスマホに対応しているサイトを検索結果で優遇するアルゴリズムを導入したことで、多くのウェブサイトにおいてモバイルフレンドリー化が進んできました。ジャンルによってはアクセスの6割がモバイルであるという調査も出ており、これからもこの傾向は進んでいくものと考えられます。

　私もこのビッグウェーブに乗るためにいろいろ調べているのですが、画像の扱い方については考えるポイントが結構多かったので記事としてまとめてみました。ネットの情報を見てみると JavaScript や jQuery を利用したものも多いですが、HTML5.1 から導入された picture 要素や srcset 属性を使うともっと簡単に実装することが可能です。

画像のレスポンシブ対応について

一番簡単な画像のレスポンシブ対応といえばフルードイメージですね。フルードイメージにすることで、小さいディスプレイでも画面いっぱいに画像を表示させたり、親要素からはみ出したりしないようになります。

img {
    width: 100%;
    height: auto;
}

img {

width: 100%;

height: auto;

}

「max-width じゃないの？」と思われるかもしれませんが、個人的には width を使用したほうがよいのではないかと思います。記事としてまとめました。動作は同じです。

なぜフルードイメージではmax-widthを100％にしているのか？ | Naokix.net

さて、ここで終わりにしてもよいのですが、上限の設けられているモバイルの通信量のことを考えると、フルードイメージのみの対応では少しばかりユーザーに不親切かもしれません。

フルードイメージはディスプレイの大きさに合わせて単純に画像を伸縮するだけです。このため、小さいディスプレイでは大きく表示されないにもかかわらず、データサイズの大きい画像がダウンロードされてしまうので、不必要に通信量が大きくなってしまいます。PCに比べて貧弱な通信回線であるモバイル端末にとって、何百キロバイトもの通信ロスはかなりの痛手です。

そこで考え出されたのが、前もって複数のサイズの画像を用意しておき、ディスプレイのサイズに合わせて最適な大きさの画像だけをダウンロードする方法です。

srcset属性

srcset を使うと、ディスプレイの幅に合わせて表示する画像を切り替えてくれます。

<img src="test_1024.jpg"
     alt="月見そば"
     srcset="test_480.jpg 480w,
             test_768.jpg 768w,
             test_1024.jpg 1024w">

<img src="test_1024.jpg"

alt="月見そば"

srcset="test_480.jpg 480w,

test_768.jpg 768w,

test_1024.jpg 1024w">

「480w」ですが、これは画面サイズが480pxの場合には test_480.jpg を表示してくれるという意味です。同様に、画面サイズが768pxのときは test_768.jpg、画面サイズが1024pxのときは test_1024.jpg を表示してくれます(Retina ディスプレイについて考慮するとこの限りではないのですが、説明がややこしくなるので後述)。

srcset に非対応のブラウザの場合、src 属性に指定された画像が表示されます。

picture 要素と source 要素を使うと次のようにも記述できます。

<picture>
    <source srcset="test_480.jpg 480w,
                    test_768.jpg 768w,
                    test_1024.jpg 1024w">
    <img src="test_1024.jpg" alt="天ぷらそば">
</picture>

<source srcset="test_480.jpg 480w,

test_768.jpg 768w,

test_1024.jpg 1024w">

</picture>

メディアクエリを利用すれば次のようにも記述できます。

<picture>
    <source media="(max-width: 480px)" srcset="test_480.jpg">
    <source media="(max-width: 768px)" srcset="test_768.jpg">
    <source media="(max-width: 1024px)" srcset="test_1024.jpg">
    <img src="test_1024.jpg" alt="きつねそば">
</picture>

</picture>

Retinaディスプレイとは

Retina ディスプレイとは、2010年にアップルが iPhone 4 で初めて採用した高精細ディスプレイのことです。その後、他社もアップルに追随することで高精細ディスプレイを搭載したモデルが発売されてきました。

Retina ディスプレイの特徴は画面解像度の高さです。今まで1pxの太さの線を液晶画面の1ドットで描画していましたが、解像度が2倍になったため1pxの太さの線は液晶画面の2ドットで描画されるようになりました。当然、縦方向の解像度も2倍になっているため、密度としては4倍になったことになります。

これが画像のレスポンシブ対応にどのような影響を与えるかというと、ブラウザの倍の幅をもつ画像を用意しなくてはならなくなったことです。例えば、320pxの幅の画面のスマホだった場合、今までは幅が320pxの画像を用意していました。これが解像度が2倍になったことで用意する画像の幅は640pxにする必要がでてきました。

320pxでも表示はしてくれます。ただ、倍に拡大表示されることになるので、非常に画質が悪くなります。サイズの小さい画像を画像ビューアなどで無理矢理拡大表示してみてください。どのように見えるかが体験できると思います。

どうやってRetina対応するの？

picture と source を使ってレスポンシブ対応をする場合、それぞれのメディアクエリに対して解像度が2倍の画像を用意し、ソースコードを次のように修正すればよいです。

<picture>
    <source media="(max-width: 480px)" srcset="test_480.jpg 1x, test_480@2x.jpg 2x">
    <source media="(max-width: 768px)" srcset="test_768.jpg 1x, test_768@2x.jpg 2x">
    <source media="(max-width: 1024px)" srcset="test_1024.jpg 1x, test_1024@2x.jpg 2x">
    <img src="test_1024.jpg" alt="冷したぬきそば">
</picture>

</picture>

説明を簡略化するために1xと2xについてのみ解説を行いましたが、実際には1.5xにも対応する必要があります。また最近では3xなんて製品まで登場してきているので、画像を多用するウェブサイトは大変です。

もっと楽に対応したい場合、srcset を使って必要なサイズの画像を並べるだけというのも手のひとつです。ブレイクポイントが480、768、1024pxだった場合、それぞれの解像度で必要になる画像のサイズは以下のようになります。

解像度1x ：480、768、1024
解像度1.5x：720、1152、1536
解像度2x ：560、1536、2048
解像度3x ：1440、2304、3072

さすがに全サイズそろえるのは大変なので次のようになるでしょうか。

<img src="test_1024.jpg"
     alt="コロッケそば"
     srcset="test_480.jpg 480w,
             test_768.jpg 768w,
             test_1024.jpg 1024w,
             test_1536.jpg 1536w,
             test_2304.jpg 2304w,
             test_3072.jpg 3072w">

<img src="test_1024.jpg"

alt="コロッケそば"

srcset="test_480.jpg 480w,

test_768.jpg 768w,

test_1024.jpg 1024w,

test_1536.jpg 1536w,

test_2304.jpg 2304w,

test_3072.jpg 3072w">

ただし、この方法を採用した場合、アートディレクションには対応できなくなります。

アートディレクションとは

例えば、次の画像を表示したいとします。

当ブログは幅を640pxに指定しているのでこのように見ることができます。これがモバイルで縮小されて表示されたらどうなるでしょうか。

小さくてなにが表示されているのかわかりづらいですよね。必要な部分だけを切り取ってみます。

画像が縮小されてもなにが表示されているのかがわかると思います。これがアートディレクションです。

W3C コミュニティグループのひとつである RICG は理想的なレスポンシブ画像として、ユーザーのコンテキストに適した画像を要求しています。モバイル用のレスポンシブ画像には単なる縮小画像ではなく、ユーザーに訴えたい部分を切り出して拡大すべきというものです。

アートディレクションに対応するには、srcset を使って単純に複数サイズの画像を用意するだけでは不十分で、picture と source を使ってメディアクエリごとにそれぞれの解像度に必要な画像を用意しなければなりません。

レスポンシブ画像は今まではビューポートや回線に適した画像をダウンロードすることでモバイルの通信量を抑えることを目的に行われていましたが、モバイルからのネットアクセスが増加することにより要求が複雑化してきました。通信量の低減にとどまらず、モバイル環境を見据えた新たな表現方法として導入を検討してみてください。