網膜対応画像用にWebサイトを設定する方法

iOSデバイスのRetinaディスプレイが最初にリリースされてからかなり時間が経っていますが、デザイナーや開発者が完全に応答性の高いモバイルの事実に気付いたとしても、まだRetinaに対応していないWebサイトはたくさんあります。 - フレンドリーな世界。

これは、ますます一般的になってきているRetinaディスプレイで作品を最適に見せるためのオプションについて知っておく必要があることです。幸いなことに、大変なことに思われるかもしれませんが、それほど複雑ではありません。

$config[code] not found

網膜対応画像用にWebサイトを準備する

あなたの楽しみを倍増

実際には、いわば、この猫の皮をむくことができる方法はたくさんあります。最初の方法では、CSSを少しシャープにして、イメージのバージョンを通常の2倍の解像度で含める必要があります。 CSSは、サイトが表示されているデバイスに基づいて表示する画像を決定します。

必要なCSSの更新は対象となるブラウザによって異なりますが、幸いなことに、現在はそれほど複雑ではなく、簡単になっています。実際のコーディングは別の日に任せるつもりです。

念頭に置くべき1つの事柄：あなたがあなたがそれらが後で編集される必要がある場合にあなたが容易にイメージの2つのバージョンを関連付けることができるようにあなたの網膜イメージの命名規則を開発したいかもしれません。

SVG

もう1つのアプローチはSVG、またはScalable Vector Graphicsです。名前が示すように、これらはベクターグラフィックに限定されており、写真画像では機能しませんが、SVGグラフィックでは、サイト上の各グラフィックに2つの画像ファイルが不要になります。繰り返しますが、ブラウザによっては違いがあるため、ニーズに応じて追加の調査を行うことをお勧めします。

また、上記のように、サイトに写真タイプの画像が含まれていない限り、SVGはほとんどのサイトで唯一のソリューションとして機能することはおそらくありません。