Retinaスクリーンのグラフィックス最適化

Retina MacBook Proおよび新しいiPadの最近のリリース後、ピクセル密度が増加した画面が私たちの生活に積極的に入り始めました。 これはWeb開発者にとって何を意味しますか？

まず、用語を理解します。

物理ピクセル

物理ピクセル （デバイスピクセルまたは物理ピクセル）は通常のピクセルです。ディスプレイの最小要素であり、それぞれが独自の色と明るさを持っています。

画面密度は、ディスプレイの物理ピクセル数です。 通常、1インチあたりのピクセル数で測定されます（PPI：1インチあたりのピクセル数）。 アップルは、ピクセル密度が2倍のRetinaスクリーンを開発しており、人間の目ではより高い密度を区別できないと主張しています。

CSSピクセル

CSSピクセル （CSSピクセル）-画面に関係なくページにコンテンツを正確に表示するためにブラウザーが使用する抽象的な値（DIP：デバイスに依存しないピクセル）。 例：

<div height="200" width="300"></div> 

通常の画面上のこのようなブロックは200x300ピクセルの領域を占有し、Retina画面では同じブロックが400x600ピクセルを受け取ります。したがって、Retina画面では、ピクセル密度は通常の4倍になります。


物理ピクセルとCSSピクセルの関係は、次のように設定できます。

  device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … } 

または：

  device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … } 

JavaScriptでは、これを使用して達成できます

 window.devicePixelRatio 

ラスターピクセル

ビットマップピクセルは、ビットマップ（PNG、JPF、GIFなど）を構成する最小の部分です。各ピクセルには、画像座標系の色と位置に関する情報が含まれています。 一部の形式では、ピクセルに透明度などの追加情報が含まれる場合があります。

ラスタ解像度に加えて、インターネット上の画像には、CSSピクセルの抽象的な寸法があります。 ブラウザは、CSSの幅と-lengthに従って画像を圧縮または拡大します。 通常の画面に表示される場合、1つのラスタピクセルは1つのCSSピクセルに対応します。 Retinaスクリーンでは、各ラスターピクセルが4倍されます：

最適化

Retinaスクリーンでの表示用にグラフィックを最適化する方法はいくつかあります。 それぞれに長所と短所があり、それぞれの場合に、パフォーマンス、実装の容易さ、ブラウザのサポート、またはその他のパラメータなど、より高い優先度を持つものを選択する必要があります。

HTMLおよびCSSのスケーリング

Retinaディスプレイ用のグラフィックスを準備する最も簡単な方法は、画像の物理的寸法を単純に半分にすることです。 たとえば、ピクセル密度を上げて画面に200x300ピクセルの写真を表示するには、サイズが400x600ピクセルの写真をアップロードし、CSS属性またはHTMLパラメーターを使用して縮小する必要があります。 これは、通常の画面の表示になります。


など、Retina：


HTMLおよびCSSスケーリングを実装するには、いくつかの方法があります。

HTML

最も簡単な方法は、幅と高さのパラメーターをimgタグに設定することです。

 <img src="example@2x.png" width="200" height="300" /> 

使用場所：複数の画像がある単一ページのサイト。

Javascript

Retinaスクリーンの画像サイズを半分にするために、Javascriptを使用して同じ結果を得ることができます。 jQueryライブラリを使用すると、次のようになります。

 $(window).load(function() { var images = $('img'); images.each(function(i) { $(this).width($(this).width() / 2); }); }); 

使用場所：コンテンツに複数の画像があるサイト。

CSS（SCSS）

また、特定のdivの必要なサイズ（背景サイズ）を持つ背景として画像を使用することもできます。 background-sizeオプションは、IE 7および8ではサポートされていません。

 .image { background-image: url(example@2x.png); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; } 

疑似要素の前または後を使用できます

 .image-container:before { background-image: url(example@2x.png); background-size: 200px 300px; content:''; display: block; height: 300px; width: 200px; } 

この手法は、スプライトを使用する場合にも機能します。

 .icon { background-image: url(example@2x.png); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } } 

使用場所：背景画像の数が限られているサイト（たとえば、1つのスプライト）。

HTMLとCSSのスケーリング：プラス

• 実装のしやすさ
• ブラウザー間の互換性

HTMLとCSSのスケーリング：短所

• 通常の画面を持つデバイスは余分なメガバイトをダウンロードします
• 通常の画面では、圧縮アルゴリズムにより画像の鮮明さが損なわれる場合があります
• background-sizeオプションは、IE 7および8ではサポートされていません。

画面のピクセル密度の決定

おそらくこれは、Retinaディスプレイのグラフィックを最適化する最も一般的な方法です。 CSSまたはJavascriptを使用します。

CSS

このメソッドは、device-pixel-ratioを使用して、物理ピクセルとCSSピクセルの望ましい比率を設定します。

 .icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url(example@2x.png); } } 

使用場所：デザイン要素に背景画像を使用するサイトまたはアプリケーション。 コンテンツ内の画像には適していません。

長所

• デバイスは余分な画像をダウンロードしません
• ブラウザー間の互換性
• ウェブサイトのピクセル密度制御

短所

• 特に大規模なサイトでの実装に手間がかかる
• 背景としてコンテンツ画像を使用することは意味的に正しくありません

Javascript

window.devicePixelRatioを使用して同じ結果を達成できます。

 $(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); 

上記のすべてを実行できる特別なJavascriptプラグインRetina.jsがありますが、外部イメージをスキップしたり、 Retinaコピーがない内部イメージをスキップしたりするなどの追加機能があります。

使用場所：コンテンツに画像があるサイト。

長所

• 実装のしやすさ
• デバイスは余分な画像をダウンロードしません
• ウェブサイトのピクセル密度制御

短所

• Retinaデバイスは、各イメージの両方のバージョンをダウンロードします
• 画像のなりすましはRetinaデバイスで顕著です
• 一部の一般的なブラウザ（IEおよびFirefox）では動作しません

スケーラブルベクターグラフィックス

使用する方法に関係なく、ビットマップ画像はその性質上、規模に制限があります。 ここでは、ベクターグラフィックスを支援できます。 SVG（Scalable Vector Graphics）XMLベースのフォーマットは、ほとんどのブラウザーでサポートされています。 SVG画像を使用する最も簡単な方法は、imgタグまたはCSSパラメーターbackground-imageとcontent：url（）を使用することです。

この例では、単純なSVG画像を任意にスケーリングできます。

 <img src="example.svg" width="200" height="300" /> 

CSSでも同じことが起こります。

 /*    */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /*  content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ } 

IE 7または8およびAndroid 2.xをサポートするには、置換PNG画像を使用する必要があります。 これはModernizrで簡単に行えます：

 .image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } } 

ブラウザー間の互換性を高めるには、FirefoxとOperaでのラスタライズの問題を回避するために、各SVG画像をその親HTML要素に対応させる必要があります。

HTMLでは、aタグ内の目的のデータを使用して同じものを実装できます。

 <img src="example.svg" data-png-fallback="example.png" /> 

jQueryとModernizrの使用：

 $(document).ready(function(){ if(!Modernizr.svg) { var images = $('img[data-png-fallback]'); images.each(function(i) { $(this).attr('src', $(this).data('png-fallback')); }); } }); 

使用場所：任意のサイトで、アイコン、ロゴ、および単純なベクトルイラストに適しています。

長所

• すべてのデバイス用の単一の画像セット
• 実装のしやすさ
• 無限のスケーリング

短所

• 「ピクセルに」正確な平滑化はありません
• ファイルサイズが大きいため、複雑なグラフィックには適していません
• IE 7、8、および以前のバージョンのAndroidには組み込みサポートはありません

アイコンフォント

Twitterで人気のあるTwitter Botstrapメソッドは、フォント内の文字を必要な文字に置き換えてから、CSSを使用してページに表示します。 あらゆる好みのシンボルを備えた多くの象徴的なフォントがありますが、 Fontello 、 Font Builder、またはInkscapeを使用して独自のフォントを作成することもできます。

アイコンフォントを使用する最も一般的な方法は、特定のページ要素に目的のクラスを適用することです。

 <span class="icon">a</span> 

そして、スタイルでは、必要なフォントが指定されています：

 .icon { font-family: 'My Icon Font'; } 

擬似要素の前に、各アイコンに一意のクラスを持つcontentパラメーターを使用することもできます。

 <span class="glyph-heart"></span> 

 [class^="glyph-"]:before { font-family: 'My Icon Font'; } .glyph-heart:before { content: 'h'; } 

使用場所：多数のアイコンがあるサイトで、ラピッドプロトタイピング用。

長所

• 無限のスケーリング
• ブラウザー間の互換性
• グラフィック要素のセットよりも普遍的なソリューション

短所

• 「ピクセルに」正確な平滑化はありません
• 実装の難しさ：アイコンごとに個別のフォントシンボル
• この方法は、意味的に正しくないマークアップに基づいています

ファビコン

ファビコンは、サイトまたはアプリケーションのグラフィカルな表現として、ブラウザの外でますます使用されています。 Retinaデバイス用にファビコンを最適化するには、.icoを2つのサイズで準備する必要があります：16x16ピクセルと32x32ピクセル。

未来を見る

Appleの特別な-Webkit-image-set が春に導入されました 。これにより、CSSで単一の画像のいくつかのバリエーションを使用できます。

 .image { background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x); background-size: 200px 300px; } 

ただし、この方法はimgタグ内の画像には適用されません。

もう1つのツールは、Scott JehlによるPicturefillです。 これはHTMLおよびJavascriptソリューションです。

 <div data-picture> <div data-src="example.png"></div> <div data-src="example@2x.png" data-media="(min-device-pixel-ratio: 1.5)"></div> <!-- Fallback content for non-JS browsers --> <noscript> <img src="example.png" > </noscript> </div> 

このマークアップにもかかわらず、これは完全に通常のクロスブラウザソリューションです。

もう1つの野心的な提案は、 ピクチャエレメントの使用です。これにより、画面のピクセルのサイズと密度に応じて互いに置き換えられる複数の適応画像を使用できます。

おわりに

Webデザインにおける他の多くの大きな変更と同様に、Retinaデバイス上の画像の普遍的なソリューションを見つけるのは長い時間を要するでしょう。 座って待つことはできますが、どのデバイスからでも快適にアクセスできるサイトを作成できます。