分室利用者のY.Nです。

今回は、HTMLにおける、レスポンシブイメージについて調べてみましたので、興味がありましたら、ご覧いただけたらと思います。

レスポンシブイメージの説明の前に

最近のWeb制作では、Webページがレスポンシブに対応している事が、当たり前になりつつあります。

レスポンシブWebデザインというのは、『パソコンやスマホ等に関係なく、同じ文章(HTMLコード)を配信するが、画面サイズに応じて表示を変える』というものです。(出典: Google)

そして、画像については、拡大か縮小して表示する事になるのですが、拡大してしまうと表示が汚くなってしまうので、最大画面幅を元に、幅や高さが大きい画像を用意する事になります。

画像は、幅や高さが大きくなるにつれて、ファイルサイズも大きくなってきます。画像の幅は、フルHDだと1920px、4Kでは3840px、8Kだと7680px、最大で必要になってきます。先日、PC用8Kモニタが発表されましたので、幅7680pxの画像を用意する、というのも、ありえない話ではないように思います。

もし、幅7680pxの画像を古いスマホ(例えば、3G回線で画面幅が320px等)で表示しようとした場合、表示するまでに時間が掛かったり、余分なデータ通信量を使わせてしまう事になります。

SEO(検索エンジンに対する最適化)の面から見ると、表示が遅い場合、直帰率や離脱率(Webサイトから離れる事)が上がるばかりか、将来的には、検索結果のランキングが下がってしまう可能性もあります。

また、iPhoneのRetina等、高解像度なディスプレイに対応しないと、画像が荒く表示される場合もあります。

レスポンシブイメージでは、こうした問題に対処できます。

レスポンシブイメージとは

レスポンシブイメージとは、W3CがHTML 5.1で策定した、新しい仕様の1つになります。

※W3Cや、勧告に至るプロセス等については、Build Insiderの記事等を参照下さい。

特徴を一言で言うと「CSSやJavaScriptを使わずにHTMLタグのみで、複数の画像から最適な画像を自動で選ぶ」という事が可能になります。

複数の画像として、様々な幅の画像を用意できますが、それに加え、画像フォーマットも複数あれば、その中から最適な画像を選んでくれます。

記述例: 画像の出し分け

See the Pen yXbova by sp-sephiroth (@sp-sephiroth) on CodePen.0

上記のコードでは、『複数の画像から、最適な画像を選ぶ』という事が可能になります。ブラウザが対応していればSVGを選び、非対応なら、pngの画像を自動で選んでくれます。

SVGはベクター形式の画像フォーマットで、拡大しても画質が荒くならず、ファイルサイズもある程度軽いのが特徴です。

サーバ上には、2枚の画像(svgとpng)がある事になりますが、デベロッパーツールのNetworkタブでは、対象の画像しか読み込みを行っていない事が確認できると思います。(コード埋め込みの右上にある EDIT ON CODEPEN を押すと、全画面で開く事が出来ます)

SVGの利点である『拡大しても画質が荒くならない』というのは、iPhone等のRetinaをはじめとする、高解像度のディスプレイでも画質が荒くならない事が言えます。

順を追って、説明します。

高解像度化に関する技術

モバイル端末の高解像度化

ここ数年、スマートフォンやタブレット等のモバイル端末では、ディスプレイの高解像度化が進んでいます。

比較的新しい機種を例に挙げると、iPhone6 Plusの解像度は、1920x1080px、Nexus6やGalaxyS6は2560x1440px。Xperia Z5 Premiumに至っては、3840x2160pxで、世界初の4Kスマホとして話題になりました。

あの手のひらサイズのディスプレイに、4Kをそのまま表示したら、文字や画像は小さすぎて読めない事と思います。

そこで登場するのが、『デバイスピクセル』と『CSSピクセル』、そして『デバイスピクセル比』です。

デバイスピクセルとCSSピクセル

デバイスピクセルというのは、デバイス自体が物理的にサポートする、最小単位のピクセルの事を言います。これは、ディスプレイの解像度と同義になります。

そして、CSSピクセルというのは、ブラウザで表示させる、論理的な最小単位のピクセルの事です。ブラウザの幅と高さ、と考える事もできそうです。

デバイスピクセル比というのは、これらの比率(デバイスピクセル÷CSSピクセル)の事を言います。

例えば、iPhone4の場合、物理的な解像度(デバイスピクセル)は960x640pxで、論理的な解像度(CSSピクセル)は480x320pxの為、デバイスピクセル比は2になります。

下図のように、Retinaディスプレイでは、デバイスピクセル比を2にすることで、『1つのcssピクセルに対して、4つ(2×2)のデバイスピクセルを使って表示』しており、文字や画像が小さくなりすぎる問題に対処しています。

この為、Retinaでは、2倍の幅と高さの画像を用意しないと、画質が荒くなる、という問題が起こります(画像形式がsvgであれば問題ありません)。

ちなみにですが、JavaScriptで、デバイスピクセル比等を取得する事も可能です。

See the Pen gRWGLa by sp-sephiroth (@sp-sephiroth) on CodePen.0

記述例: Retina対応

See the Pen vZmegB by sp-sephiroth (@sp-sephiroth) on CodePen.0

Retina対応のコードをシンプルに書くと、上記のようになります。

Retina等、高解像度ディスプレイだけを考慮した場合、pictureやsourceタグを書かずとも、srcsetという属性で、読み込み候補の画像を制御できます。srcset属性値は、ファイル名と解像度の倍率を、スペースで区切って入力していきます。

ファイル名の付け方についてですが、ネット上では、@を付ける方法もよく見受けられます(例: image@2x.img)。ですが、Subversion(ソースコード管理システム)では、ファイル末尾に@を付けないと認識されないといった不具合もあるようで、個人的には『-x倍率』とした方が良いように思います。(出典: harukazepc’s blog, qiita)

様々なデバイスピクセル比と記述例

デバイスピクセル比は、Retinaの2以外にも様々なケースが存在します。

様々なデバイスピクセル比に対応させる場合、srcset属性値をカンマ区切りで書く事で、対応する事ができます(例: srcset=”image-x2.jpg 2x, image-x3.jpg 3x”)。

なお、上記の表では、iPhone6 Plus以降で、デバイスピクセル比が約2.61になっていますが、正確にはそうではなく、ダウンサンプリングという技術で、そうなっています。

ダウンサンプリングとズーム

iPhone6 Plus以降では、解像度をダウンサンプリング(縮小)しています。

iPhone6 PlusのCSSピクセルは414x736pxで、デバイスピクセルは1080x1920pxなのですが、CSSピクセルを単純に3倍すると、1242x2208pxとなり、デバイスピクセルを超えてしまいます。

これを1.15で割ってダウンサンプリングする事で、デバイスピクセル1080x1920pxに合わせる、という事をしている為、デバイスピクセル比が約2.61という事になっています。

また、iPhone6以降にはズーム機能があり、この機能をオンにするとダウンサンプリングが変動したり等します。

分かりやすい図解は、PaintCodeの記事をご覧下さい。

アートディレクション等、続きはまた後日、ブログの担当がまた周ってきた時に書きたいと思います。