高解像度デバイスの画像表示〜Retina対応

HTML&CSS

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形式の画像です。拡大して1番目、2番目と比較をしてみてください。くっきりときれいに表示されていると思います。
今後の注目の画像形式です。
SVGはScalable Vector Graphicsの略でベクター形式の画像フォーマットです。XMLを使って描画することができるものでRetinaディスプレイ対応の画像として注目されていますが、ブラウザがまだ完全に対応していない状況ですが、今後の動向が注目されているものです。

densityの値で表示画像を変更するサンプル

$(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"));
}	

});
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました