プラカンブログSTAFF BLOG

2017.03.15

画像をRetina対応させるHTML5のsrcset指定の使い方

高解像度デバイスが乱立してきた昨今、WEB制作においてRetina対応は必須になってきました。もう皆さん周知の事実だとは思いますが、Retinaディスプレイのデバイスから通常デバイス用の画像を見た場合、画像がぼやけて見えてしまいます。iPhoneなどの高解像度端末で、ぼやけた画像を見た人も少なくはないでしょう。いくら美しいデザインを施しても、画像がぼやけていては台無しです。そこで今回、画像をRetina対応させるのに便利な、HTML5のsrcset指定について解説したいと思います。

srcsetの対応ブラウザ

現時点でsrcsetはIE未対応ですが。。。ちょっと待って、離脱しないで最後まで読んでくださいw。IEが対応していないと聞くと、使えない!と短絡的に考えがちですが、だからといってこのsrcsetを使ってはいけないわけではなく、srcsetを指定していても、IEでも通常通りの画像を見せる事ができるので問題ないという事です。プログレッシブエンハンスメント的な考え方で、高度なブラウザではよりリッチな画像を提供するという考えです。つまりsrcsetを指定していても誰も損しないという事です。

srcset対応ブラウザ:Can I use

考えてみれば、RetinaディスプレイとはApple独自の呼び名であり、IEを標準搭載しないMacbookProやiPhoneをはじめとする端末や、その他多くのスマートフォンでもsrcsetは問題なく使う事ができるという事です。Surfaceなどの高解像度Windows端末において、さらにIEで開いた場合のみsrcsetの恩恵が受けれないという事になります。

srcsetの基本的な使い方

<img src="img/test.jpg" srcset="img/test.jpg 1x,img/test@2x.jpg 2x" alt="test">

まずは通常通りsrcを指定します。これはsrcsetに対応していないブラウザ用の指定です。先にも説明したとおり、この指定をしている限り、srcset未対応のブラウザでも問題なく表示できるという事です。

つぎに今回のメインのsrcsetの指定です。記述の方法は簡単で、ファイル名の指定の後に半角スペースをあけてピクセル比(倍率:1xが1倍、2xが2倍)を記述して「srcset=”img/test.jpg 1x」、カンマ(,)でつなげて、複数のピクセル比(倍率)の画像指定をしていく「srcset=”img/test.jpg 1x,img/test@2x.jpg 2x”」という書き方です。

この方法で記載する事によって、通常のディスプレイでは「img/test.jpg」が表示され、ピクセル比2倍の画面では「img/test@2x.jpg」が自動的に表示されるという仕組みです。これは単純に表示が切り替わるだけでなく、通常ディスプレイでは「img/test.jpg」のみがレンダリングされるので、不必要に重い高解像度画像を読み込んでしまう負荷を避ける事ができるという事です。つまり見る人のディスプレイにあった最適な画像を指定できるという事です。

まとめ

今回ご説明したとおり、srcsetに対応したブラウザにはより美しい画像を提供する事ができるのですが、この指定をするには当然それぞれの画像を用意しないといけないので、手間のかかる作業になります。この高解像度ディスプレイの対応費として見積もりに計上できれば良いですが、なかなかこの費用の捻出の理解を得るのも難しい話です。

もし予算的に厳しい場合は、全ての画像で使うのではなく、各ページのメインのビジュアルや会社のロゴや可読性が問われる重要な図や表などで使うなど、画像として美しく見せたい要素でのみ対応するというのもひとつの手段ではないでしょうか。

この記事は、HISADA が書きました。
Webデザイナー募集中
Webデザイナー募集中(東京)ただいま東京事務所ではウェブデザイナーを募集しています!詳しくはこちらをご参照ください。