スマホのデザインを作るにはどのサイズで作成すればいいのか。
iPhone4からRetinaDisplay(レティナディスプレイ)という解像度が今までの2倍になったことにより、今までは【幅:320px】で作成していたデザインを【幅:640px】で作成しなければなりません。
ここで疑問となのは、RetinaDisplayに合わせて作成した【幅:640px】での画像をそのまま配置すると、サイズがそのまま2倍の状態になってしまう、ということです。
実はここにはやり方があり、例えば【600×300px】の画像を書きだした際、HTMLに貼り付ける時は半分のサイズの【300×150px】で設定することで、RetinaDisplayにも対応させることができます。
半分のサイズにする、ということは解像度が倍になる、とも言い換えられます。
つまり、
<!-- RetinaDisplayにも対応 -->
<img src="aaa.jpg" width="300" height="150">
ただ、画像のサイズを半分にしたとはいえ、元々の画像サイズは【600×300px】なのでデータ容量は大きいままです。
しかも、小数点(50.5px)なんていうのはないので、必ず割り切れる数値で画像を書き出すことが大事です。