2018年4月26日木曜日

WebページをRetina対応させるテクニック～実践編 (1/3)

22:15    No comments

勉強の為に転載しました。
http://www.atmarkit.co.jp/ait/articles/1309/26/news058.html

前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。

2013年09月26日 19時30分 公開
[山田　直樹，クラスメソッド]
　前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。

CSS Spriteで複数の解像度に対応

　最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2倍ですから、Retinaディスプレイ用にタテ・ヨコ2倍の大きさの画像を別途用意する必要があります。

CSS SpriteをRetinaディスプレイに対応させる際のポイント

  • HTMLのmetaタグでviewportを指定し、widthをdevice-widthにする
  • タテ・ヨコ2倍の画像を別途用意する（※2倍というのはiPhoneのRetinaディスプレイを基準に考えたものです。Androidが基準であれば、1.5倍や3倍の画像を用意することになります）
  • Media Queriesを使い、device-pixel-ratio:2（resolution:2dppx）以上の場合に2倍の解像度の画像を指定
  • 通常解像度に合わせた2分の1（device-pixel-ratioまたはresolutionによる）のbackground-sizeを指定する
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.          <meta charset="UTF-8"/>
    5. 

  5.          <title>-webkit-mask-image | jHC-Study</title>
    6. 

  6.          <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
    7. 

  7. </head>
    8. 

  8. …
    9. 

  9. </html>
    10.
HTML
    

  1. @media (-webkit-min-device-pixel-ratio: 2),
    2. 

  2.        (min-resolution: 2dppx) {
    3. 

  3.     .class {
    4. 

  4.         background-image: url(image-2x.png);
    5. 

  5.     }
    6. 

  6. }
    7.
CSS

CSS Spriteによる対応のメリットとデメリット

　画像ファイルを使うことで、デザイナーが作成したアイコンやロゴ、あるいは写真といった、プログラムコードだけでは表現しきれない複雑な画像でもきれいに表示できるのがメリットの1つです。
　一方で、同じ用途の画像を2種類以上用意することになれば、単純に管理するファイル数が2倍以上に増えます。この点が最大のデメリットといえるでしょう。また、画像が高解像度であるほどファイルサイズも肥大化し、読み込みの負荷も高くなっていきます。皮肉にも、モバイル環境ではネットワーク回線が不安定になりがちであり、高解像度の画像が通信のボトルネックになるというジレンマが付きまといます。PC環境においても、本来的に不必要な高解像度画像が読み込まれるのは決して良いことではありません。リソースを費やしてまで実装すべきか、事前によく検討することが大切です。

srcsetを使う

　srcsetはimgタグが持つ属性の1つで、WHATWG（Web Hypertext Application Technology Working Group）の提案によるHTML5の仕様です。従来のsrc属性で指定できる画像ファイルは1つだけですが、srcset属性は複数の画像ファイルを指定し、Webブラウザのスクリーン要件（幅、高さ、ピクセル密度）に応じてどの画像ファイルを読み込むか定義できます。
　仕様自体は以前より提案されていましたが、2013年8月になってようやくWebKit Nightly Builds（将来版のSafari）で実装されました。つまり、現時点では正式リリース版のWebブラウザで使えない上、WebKitから派生したBlinkをレンダリングエンジンとするChromeがどのように対応するのか気掛かりですが、知識として抑えておくことに越したことはありません。
　ひとまずここでは簡単な使い方を覚えておきましょう。以下のサンプルコードでは、ピクセル密度が2倍（アップルのRetinaディスプレイなど）のスクリーンにおいてはimage-x2.pngを読み込み、それ以外のスクリーンにおいてはimage.pngを読み込むようにしています。
    

  1. <img src="image.png" srcset="image-x2.png 2x" />
    2.
　指定方法として、まず画像ファイル名（サンプルコードではimage-x2.png）を記述し、半角スペースを置いてその画像を読み込むスクリーン要件（サンプルコードでは2x）を記述します。指定の記述方法は以下の通りです。
  • Nx … 最小ピクセル密度がN倍
  • Nw … 画面幅がNピクセル以下
  • Nh … 画面高がNピクセル以下
　半角スペースで区切れば、複数の条件を組み合わせることも可能です。カンマ区切りで指定することで複数の画像を指定できます。
    

  1. <img src="image.png" srcset="image-x1.5.png 1.5x, image-x2.png 2x, image-x3.png 3x" />
    2.
　srcset属性をサポートしていないWebブラウザではsrcset属性が無視され、src属性のみが読み込まれます。ですから、srcset属性を使用しても特に悪影響はないでしょう。むしろ、今のうちから対応しておけば、Webブラウザが対応すると同時に属性が適用されます。
　　　　　　 1|2|3 次のページへ

0 コメント:

コメントを投稿