onepage

Retinaディスプレイって?

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

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

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

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

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

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

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

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

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

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の利用も選択肢に入れてみてください。

The following two tabs change content below.
ワンページ編集部
名古屋に拠点を構えて、ホームページ制作やデジタルマーケティングを通してネット集客を行っています。ワンページ編集部が、当メディアを通して初心者の方にもわかりやすくウェブの情報を伝えていきます。