五藤隆介(goryugo) 
先日から、ごりゅご.comとごりゅごはんにアップする写真を、RetinaディスプレイのMacにも対応する、高解像度のものにしました。
Retina画像とかってサイズがさすがにデカくて、なんていうかスマホはともかくパソコンとかそれはツライでしょう、って思ってたんですが、なんていうか「裏技」とも言えるようなテクニックがあるんです。
ちょっと前に知ったこのテクニック、ホントに「大したことない」のにめちゃくちゃ凄いんで、ちょっとご紹介したいと思います。
2倍解像度で低い画質の画像を使う
この「レティナ対応しつつ画像容量を抑える方法」は、至ってシンプル。
やることは「2倍の解像度の写真を用意して」「画質3とかの低画質で書き出す」だけ。
横幅320px 画質100 サイズ57kB（width=320px で指定）
横幅640px 画質30 サイズ36kB（width=320px で指定）
これ、パソコンで見ると「ほぼ同じ」なんだけど、iPhoneだと下の画像がだいーぶくっきりと見えるかと思います。
（文字とか、右側の写真とか）
PCの場合だと、下記サイトのサンプルがよりわかりやすいかも
→ 画質とファイルサイズ
「倍の解像度の写真を」「低画質で書き出す」だけで、レティナディスプレイでも普通のディスプレイでもどちらでもけっこうキレイな写真を表示できる。
これ、2012年くらいに一時「Retina革命」として話題になったみたいなんですが、最近まで全く知りませんでした…
Retina対応やレスポンシブ対応は奥深いです
元々、Retinaディスプレイに対応するHTMLタグの書き方として、たとえば横幅320px（実際は640pxある）のiPhoneなどの場合には、横幅が640pxの画像をアップロードしておいて、imgタグの中には「width=320px」って書いておくのが、現状の一番シンプルなRetina対応の方法でした。
とは言え、知識としては知ってても、なんかブログでそれ（2倍解像度で、1/2サイズを指定）やるのとか面倒で、結局放置になってたんですよね。
ただまぁ、自分でRetinaMacを使うとやっぱりそこはすごーく気になるわけで。なんか色々と工夫してみたら、なんとなーく自分のブログを書く環境にも「わりと楽な方法」を作り上げることが出来ました。
これについては後ほど「まぁまぁラクにRetina画像を上げる方法」とかって感じでまとめてみたいと思います。
とりあえず、この画質サンプルを載せてくれているサイトは、レティナ対応だとかレスポンシブ対応だとかに対応するいろーんな方法を載っけてくれているので、その辺に興味ある人ならば見て損は無いかと思います。
