ブログの画像をRetinaディスプレイに対応させる方法

iPhoneやMac Bookなどの高解像度ディスプレイが増えています。

高解像度になると、ひとつひとつのドットが小さくなることで文字や画像が滑らかに表示されてとてもWebサイトもキレイに表示されます。

しかし、その恩恵を受けられるのは高解像度の画像を用意してあるサイトだけで、今までどおりの画像では逆にぼやけて汚く見えてしまいます。

そこで高解像度ディスプレイに対応させる方法を紹介します。

対応方法

高解像度のディスプレイに対応させるには主な方法を紹介。

CSSのMedia Query

CSSのMedia Queryを使い画面サイズごとに画面に合った解像度の画像を「background-image」で表示させる方法。

JavaScript

「Retina.js」を使い、高解像度ディスプレイの場合「@2x」のプレフィックスが付いた画像を自動で読み込ませる方法。

pictureタグ

pictureタグを使い「source」属性で各画面サイズ、解像度に合わせた画像を指定する方法。「HTML Standard」

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

srcset 属性

「img」の「srcset」属性を使い各画面サイズ、解像度に合わせた画像を指定する方法。「HTML Standard」

<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
     /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">

「picture」タグと「srcset」属性の違いは「なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 – Rriver」で詳しく説明されている。

srcsetの使い方

このブログでは、上記4つの方法で書き方と実装方法が簡単だった「img」タグの「srcset」属性を使う方法を採用した。

まず、通常画像と解像度が2倍の画像を用意する。ファイル名の規則は特にないので自分が分かりやすいファイル名にする。
画像の指定属性は「src」と「srcset」の2つで行う。

src

「srcset」に対応していないブラウザ用に通常の「src」属性で画像を指定。

srcset

「ファイルパス」+「スペース」+「解像度」で画像を指定し、読み込みたい画像を「,」で区切り追加していく。

srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
        /uploads/200-marie-lloyd.jpg 2x"

1.5倍の解像度の時は「/uploads/150-marie-lloyd.jpg」を読み込み、2倍の解像度の時は「/uploads/200-marie-lloyd.jpg」を読み込む。

因みに解像度指定の「1.5x」や「2x」の「x」はエックス。

タグの全体はこのようになる。

<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
     /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">

未対応ブラウザへの対応

「Picturefill.js」を使うことで未対応ブラウザへの対応が可能。

ダウンロードして使っても良いがCDNでも使えるので

<script src="//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>

をタグの前など書けば良い。

最新版URLは「jsDelivr – Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more」で。

おわりに

Retinaディスプレイなどの高解像度ディスプレはとてもキレイですが、このようなことをしっかり行わないとその恩恵を受けられません。

HTMLの仕様でもまだ定まっておらず、ブラウザの対応状況もまちまちなので、はやく決定的な指定方法が確立されて欲しいですね。