mobile safariで大きな画像を扱うとき、気をつけることが何点があったので、記録しておきます。
iphone4,ipad(3rd generation)は、retinaディスプレイ採用に伴って解像度が2倍になっていて、より鮮明な画像が扱えるようになっています。しかし、いままでの解像度の画像を、表示したらどうなるのか？大きさが半分（面積は1/4)になってしまうのか。
mobile safariでは、1pixelを倍にして表示するようになっています。画像の大きさは元の大きさですが、このままだとジャギーが目立った画像になってしまいます。
多くのブログで紹介されていますが、元の画像を倍の解像度におきかえて、imgタグでは従来の大きさで指定してやると、鮮明な画像が表示できます。
たとえば、正方512ピクセルの画像は、正方1024ピクセルの画像にしておいて、imgタグを以下のように書いておくと、きれいに表示できます
<img src="hoge.jpg" style="width:512px;height:512px" />
しかし、画像の大きさを2倍にすると、当然ファイルのサイズも大きくなり、保管するストレージ領域増加、データ転送速度低下という問題が発生します。
また、mobile safariでは扱えるリソースに制限があります。
たとえば、JPEGイメージでいうと、32Mピクセル以上の画像※は1/16のサイズ（2M）に縮小されるとあります。2Mピクセルを超えたものは、サブサンプリング（色情報の削減を行うことでダウンサンプリングともいう）されるとあります。
単純に解像度が高くなったからと、2Mピクセルを超える大きな解像度の画像を用意すると、逆に画像が粗く汚くなるという現象が発生します。
つまり2Mピクセル（1414×1414ピクセル程度）というのがポイントですね。
大きな画像を扱うには、分割することも考えた方がよいでしょうね。
ipad(3rd G.)では2048×1536(3M)あるのに、2Mの壁って、釈然としませんが、これはmobile safariから閲覧したときで、写真アプリなど（対応アプリ）では、問題ありません。
※扱える最大ピクセルは画像フォーマット(GIF,PNG,JPEG)やデバイスのメモリサイズにより変わるようです。
データ転送の問題に関しては、apple.comでは通常解像度と高解像度の画像を用意しておいて、javascriptで高解像度の画像があるかどうかをまず調べてから(HEADを先に読む）、コンテンツをロードするような仕組みがあるようです。しかし、HTTPリクエストが増加するという問題はあります。
How Apple.com will serve retina images to new iPads
この記事をたどらせていただいたmyakura様のブログには、このような記事があります。
Responsive imagesのための-webkit-image-set()
javascriptにたよらなくても、cssで書けるようになるんでしょうかね。
