iphone用サイトで画像をきれいに。

iPhone、iPod touchのRetinaはきれいなのですが、サイトを最適化する場合、縦横それぞれ半分の解像度で作るのが今でも一般的のようです。
それでも、文字はなめらかになるのですが、画像はどうしても拡大表示したようなゴツゴツしたものになってしまう。まぁ、気にしなければいいのですが、他がなめらかなだけに気になってしまうわけです。

で、試しに、実際に指定するサイズの倍の解像度で画像を作っておいてはどうかと思ってやってみたらきれいにできました。

どういうことかというと、

縦表示のサイト（横320ピクセル×縦480）でサイトを作るとして、
横幅いっぱいに表示したい画像は普通なら、横320ピクセルで作りますが、
これを横640で作ります。
で、そのまま表示するとはみ出しますので、htmlやcssの方で320ピクセル表示（50%表示）にします。
PC用のブラウザでは画像を半分に縮小しますので、ブラウザによっては逆に荒れますが、
iPhoneの場合、これでピクセル等倍になってくれるようです。