そもそもRetina（レティーナ）ディスプレイとは
Apple社の製品に搭載されている「高精細ディスプレイ」のこと。人間の目では識別できないほど、細かい解像度のディスプレイ。※ Retina = 網目という意味
「Retina」とうたっているのはAppleだが、Apple以外には高精細ディスプレイがないかというとそうではなく。AppleのRetinaに限らず、高精細ディスプレイを搭載した端末はどんどん出てきている。
どうやって綺麗に見せてる？
通常の2倍のピクセル数を、通常の画面サイズのまま表示させることで美しく表示ができる。
※ 同じエリアに、「50個のピクセルで表現するか」または「100個のピクセルで表現するか」だと100個のピクセルで表現した方が、画像がより細かく表現される = キレイ！
Retinaの注意点
画像がぼやけて見える
2倍のピクセルを持つために、画像が2倍に引き延ばされることで画像がぼやけ、パッキリしない（キレイじゃない）。
スクリーンショットが2倍のサイズに
見ているときは「幅1000px」でも、スクリーンショットをとると「幅2000px」になってしまう。なので、スクリーンショット画像を使うときはリサイズを。
WEBサイト制作でのRetina対応
「掲載するサイズ」の倍のサイズで画像を作る
WEBサイト上に「縦横共に300pxで掲載」したいなら、2倍の「縦横共に600pxで画像をつくる」。
デメリット
サイズの大きな画像を作る・表示させることになるので、画像のデータ量が大きくなってしまう。
対策としては
Photoshopなら、2倍のサイズで作って、書き出す時に画質が悪くならない程度まで、「画質」設定で画質を落とす（80%とか。自分の目で確認しながら）
または、縦横2倍にしなくても、1.5倍くらいのサイズでもキレイに表示されることもあるので倍率を調整するのでも。
HTMLのsrcset属性を使う
上記の方法だと、画像のデータ量が大きくなってしまうのでこちらのやり方も。
<img src=”img/gazou01.jpg” srcset=”img/gazou01.jpg 1x,img/gazou02.jpg 2x”>
srcset=”img/gazou01.jpg 1x の1xは倍率を指定している。
通常のディスプレイなら srcset=”img/gazou01.jpg 1x の通常サイズの画像を読み込む。
Retinaディスプレイなら srcset=”img/gazou02.jpg 2x の縦横倍にした画像を読み込む。
そして、srcset未対応ブラウザ（IE etc）では、srcで指定している画像が読み込まれる。
これなら、必要以上に大きいサイズを読み込ませなくてもよいので、各ディスプレイに合った最適な画像を読み込ませることができる。
