新しいiPadでウェブサイトを見ると画像がぼやけて見づらくなる。その対応方法。
- 2012-03-16 14:23
-
Tweet
3月16日、うちにも「新しいiPad」が届きました！
早速使ってみましたが、いやー本当に画面がきれいですね！テキストにまったくジャギーがなく、とても目が疲れません。これはいいですねー。
ただ、新しいiPadでのブラウジングでは、かなり気になる部分があります。
それは「既存ウェブサイトの画像の荒さが目立つ」です。
ためしにskyarc.co.jpを見てみたところ、iPadを横向きにしてブラウジングすると、ロゴマークや写真画像がぼやけるという現象がおきています。
そりゃそうです。新しいiPadの解像度はiPad2に比べて2倍。1024の領域で2048を表示するわけですから、PCで見たときは問題なくても、iPadで見たらぼやけること間違いなし。
いろんなサイトを見てみましたが、やはり従来の考え方で画像を作成すると新しいiPadでは必ずぼやけます。これはさすがに実際に見ていただかないとわからないと思います。
メインビジュアルで写真をどーんと使っているサイトはかなりむごい状況になっています。さらにさらに、写真にテキストなんて書いた日には、テキストがぼやけて読みづらいです。（ブログでお伝えできないのがざんねんです）
ちなみに縦向きでのブラウジングはまだましです。それでもぼやっとするのはわかってしまうのですが・・・
対応方法
結論からすれば、以下の3つのやり方をうまく組み合わせて、クオリティとデータ量のバランスを見ながら対応するのが良さそうです。
1.高解像度の画像を用意する
一つは高解像度の画像をimgのwidthとheightで小さく指定する方法です。設定は非常に簡単。たとえば600x300で表示したい場合は、1200x600の画像をwidth="600" height="300"で指定するやり方です。背景画像の場合は-webkit-background-sizeで背景サイズを指定することができます。
ただし、画像の容量が当然増えますので、低速度の回線では重たくなってしまう可能性大です。
※すいません、IE6とかだとうまくでないかもしれません。
2.ベクターデータで画像を準備する
ベクターデータで画像を作成します。SafariはSVGが使えますのでロゴマークなどをSVGで作成します。SVGはPhotoshopなどでSVG形式を指定して出力すれば作れます。これは画像サイズを抑えることができて、かつどんなに拡大してもきれいに表示することができますが、AndroidのブラウザだとSVGに対応していないものがあるので、すべてを網羅するのは厳しいです。たとえばSafariの時はSVGを表示して、Androidの時はPNGを表示するなどの処理を入れる必要があります。
また、写真は当然SVGでは厳しいので、ロゴマークやボタンなどの画像だけが対象となります。
3.画像を使わないでCSS3で実現する
ボタンや装飾などをCSS3で実現する方法です。CSS3だとiPhoneもAndroidも対応しているので、きれいにかつデータ量を減らして再現できます。ただし複雑な画像を作ることはできませんので注意が必要です。
うーん、画面がきれいになるのも困りものですねぇ（笑