eyemovic inc.

Culture blog会社の活動・働き方

2014.11.26

Retinaディスプレイとコーディング

スマホだけではなく、デスクトップやノートPCもRetinaディスプレイが増えています。
このディスプレイに対応するコーディングも増えてきつつあります。

端末によってデバイスピクセル比の違いはありますが、
Retinaディスプレイ対応の基本的な考えは、
実際の画像よりも大きな画像を掲載するというものです。
※ピクセルの値は偶数が良い、いくらの倍数が良いなどもあります。

 

かつてのコーディングでは、
HTMLやCSSで画像の大きさを変えることは良くないとされていました。
※以前のブラウザは、画像のバイキュービック法に対応していなかったため、
 無理やり縮小表示させるとドットが粗くなっていました。
 通信上、必要以上に大きな画像をロードさせないという狙いもありました。

Retinaディスプレイ対応は、この考えを180度転換し、
実際の表示よりもより大きな画像を縮小表示させることで
きめ細かな解像度に対応します。

また、同じ画像はひとつの画像で流用しやすくなるため、
画面ごとに別々のリサイズ画像を用意する手間も削減されます。

 

デメリットもあります。
近年の通信速度高速化、端末のスペック向上はあるものの、
通常よりも2倍 3倍と、より大きな画像が必要になることです。
無駄を省いたマークアップをしても、
画像の初期ロードにかかる負担を埋めるという課題はあります。

また、大きな画像を背景画像にする場合、
IE 8では通常は、背景画像の表示サイズを調整することができません。
※特に、CSS3のbackground-sizeに対応していないためです。

 

Retinaディスプレイ対応は、
対象にするブラウザと端末を見極めて進める必要があるため、
最初の仕様固めが重要と言えます。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。