Retinaディスプレイをはじめとした高解像度のデバイスで画像表示をすると滲んで見える現象が起こります。
これはdensityにもとずいた解像度で表示するため拡大表示を行っているからです。
PCでも画像を単純に2倍の大きさに拡大するとギザギザが現れたりします。これがつまり滲んで見える原因になります。
画像の表示サンプル
サンプルの一番上の「美」が通常にイラストレーターで作成した文字をpng形式で保存して表示したものです。
density=1のデバイスで表示した場合は問題ありませんが、density=2のデバイスで表示したら一番上の「美」の文字は少し滲んでみえます。
この原因はdensityの仕組みにあります。density=2のデバイスは解像度が640*960となりdensity=1のもの320*480より2倍になります。
そのため同じ表示にするには2倍の拡大をしていることになるのです。
高解像度デバイスの画像表示の問題解決方法
density=2の画像表示の問題を解決する方法は簡単です。通常の画像サイズのものの2倍の大きさで画像を用意することです。
そしてHTMLにimgタグで取り込む時にwidthとheightをもともとのサイズ指定で表示させるだけです。
このサイズ指定はimgタグのwidth属性,height属性で指定してもCSSのwidth,heightで指定してもかまいません。
サンプルの2番目の「美」がその方法を使用したものです。
ちなみに3番目の画像はsvg形式の画像です。拡大して１番目、2番目と比較をしてみてください。くっきりときれいに表示されていると思います。
今後の注目の画像形式です。
SVGはScalable Vector Graphicsの略でベクター形式の画像フォーマットです。XMLを使って描画することができるものでRetinaディスプレイ対応の画像として注目されていますが、ブラウザがまだ完全に対応していない状況ですが、今後の動向が注目されているものです。
$(function() {
if(window.devicePixelRatio>1) {
$(".myimg").attr("src",$(".myimg").attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_hi$2"));
} else if(navigator.userAgent.indexOf('Windows Phone') != -1) {
$(".myimg").attr("src",$(".myimg").attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_hi$2"));
}
});
