RetinaディスプレイとRetina用の画像ソースコード

この記事の内容

Retinaディスプレイって？
じゃあ、どうやって対応するの？
srcsetで画像を切り替える方法

Retinaディスプレイって？

Retina（レティーナまたはレティナ）ディスプレイとは、従来のApple社のディスプレイより高画素密度（高解像度）のIPS液晶・有機ELディスプレイのこと。
iPhoneやiMac同様、Apple社のブランド名で、アメリカでは登録商標でもあります。
ホームページにおいては、Retinaディスプレイで見るとものすごくきれい！に見える反面、制作者がきちんと対応をしないと、画像がボヤけて見えてしまうことがあるのです。

じゃあ、どうやって対応するの？

WordPressを利用したホームページの場合は、プラグインを利用したり、条件分岐をしたりして、PCとスマートフォンでそれぞれ別の画像を表示させることができます。
が、今回はHTML5から新しく使えるようになったsrcsetという属性を使って切り替える方法をご紹介したいと思います。

srcsetで画像を切り替える方法

通常の解像度（1倍、たとえばiPadやiPad 2）と2倍の解像度（Retina）用に画像を書き出して切り替える際の一番単純な指定はこのようになります。

＜img src="img/sample.jpg" srcset="img/sample@2x.jpg 2x" alt="""/＞

srcはフォールバックで、Internet ExplorerやOpera miniなど、srcsetをサポートしていないブラウザはこちらを読みます。
srcで指定している画像と1倍の画像が同じ場合、srcsetでは1xの指定を省くことができます。

CSSで指定をする場合は以下の通りです。

background-image: url("1倍画の像URL");
background-size: 100px 100px; //画像のサイズ

@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx) {
  background-image: url("2倍画像のURL");
}

これまではよく、スマホ用には2倍サイズの画像を用意しなさいと言われていました。
iPhone4以降の普通のサイズのiPhoneは確かに解像度が2倍のRetinaディスプレイです。
しかし、iPhone XやiPhone 6s Plus、iPhone 7 Plus、iPhone 8 Plusは同じRetinaディスプレイでも解像度が3倍です。

もし、そういったディスプレイのために3倍の画像を用意した場合は、更にもう一つ指定を増やします。

＜img src="img/sample.jpg" srcset="img/sample.jpg 1x, img/sample@2x.jpg 2x, img/sample@3x.jpg 3x" alt="" /＞

AndroidはXperia Z5やXZなどがiPhone Plus機種と同じ3倍の画面解像度です。
Galaxy S7やS8に至っては4倍（！）になります。

解像度が2倍とか3倍とかどこで調べるの？: iPhoneに関しては検索をするとまとめられた表がいくつも見つかると思いますが、Androidは機種が多いので、なかなか個人がまとめた一覧は見つかりません。
手っ取り早いのは、キャリアのホームページで技術情報を見ること。
中でもauが掲載している仕様表が発売時期別にまとめられていてとても見やすいです。
表の中の「Density DPI」という項目で確認できます。X-Highが2倍、XX-Highが3倍、XXX-Highが4倍です。

imgタグのsrcset属性で画像を切り替えるにはもう一つ、ディスプレイサイズで分ける方法もあります。
そちらについては下記の記事でとても詳しく解説されています。

『srcset と sizes』　エリック・ポーティス（訳者鈴木丈）

昔作ったホームページを今スマートフォンで見たら画像がボケていた……という事象は、スマートフォンの進化のためです。
そういった箇所を修正する際はsrcsetの利用も選択肢に入れてみてください。

【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法