網膜ディスプレイ用のウェブサイト画像の最適化

https://stackoverflow.com//questions/22008502

21-12-2019
|

質問

網膜時代の非常に通信問題を解決するための良いアプローチを見つけようとしています。

次のことを指定してください。

応答イメージを持つウェブサイトを作成
CSSの背景画像
Webサイト基本機能はJS Webサイトの画像はretinaディスプレイに最適化する必要があります。

これを解決するための簡単な方法はこのようなものかもしれません：

<img src="img.jpg" data-highres="img@2x.jpg" />

とIMG.jpgをwidaデバイスが検出された場合、img.jpgをwimg@2x.jpgでスワップアウトするためのいくつかの種類のJSを書きます。これは機能しますが、Img.jpgとimg @ 2x.jpgの両方がロードされます。あまり帯域幅に優しい：（

元のSRCがロードされる前に、画像のSRCを傍受して変更することは可能ですか？

またはあなたのいずれかの問題は問題を解決するための別のアプローチを持っていますか？

解決

将来的には、」を使用できる可能性があります。絵要素。その間、私が働くかもしれないことを私が見た唯一のアプローチは次のことです：

画像を望むDIVまたはSPANを入れてください。画像の寸法とレイアウトを持つようにスタイル。それにいくつかの種類の識別マークを追加するので（例えばclass="retina-image"）
要素内または要素内のさまざまなサイズの画像に関する情報（例えば、data-something属性の使用）
div

<noscript><img src="..." alt="..."></script>

DOMの準備ができて
1. ステップ1
2. あなたが望む画像の種類を検出する
3. そのイメージに使用するURLを指示する属性を見つけます
4. 手順1

他のヒント

これはおそらく炎餌であるでしょうが、ここに私の2つのセントがあります：

帯域幅に対する懸念は主にモバイルプラットフォームの問題です。最も近代的なモバイルプラットフォームが高いピクセル密度ディスプレイを採用していることを考えると、これらのデバイスからの高解像度イメージの需要はかなり高くなるだろう。時間の2倍の時間の2倍の時間の3倍の時間の3倍の時間（Low Res and High Res Image）の3倍になるのはなぜですか？

それ故、シナリオでは、より高い解像度の画像（幅/高さスタイルを半分にする）を上げ、それをそのままにすることがより簡単かもしれません - それによってそれによって節約（高価な）時間と他の場所でエネルギー。すべてが妥協であるように思われる業界では、このがアプローチとして最も意味があります。

Quentinはあなたの質問に本質的に答えたと思います。

私が追加できるのは、SRCのないIMG要素をSRCのないものではありません。その後、JavaScriptを使用して、<img data-src="" data-src2="">とSwap Imageをイン/アウトすることもできます。<noscript>要素はおそらくこれを行うことの「正しい」方法ですが、コードが本当に冗長になり、私はいくつかのブラウザに<noscript>イメージを事前に読み込むのを聞いたことがあります。

1つのサービス私が遭遇した1つのサービス（retinaディスプレイを含む） pxtulate 。また、ページのロードが完了する前に、IMG.SRC URLを正しくサイズと置き換えるようにJavaScriptを提供します。落とすのはかなり簡単であるべきです。

window.devicePixelRatioを使用して何かをする場合は、data-highres属性を持つイメージをループします。

これは非常に荒いですが、あなたは私のドリフトを手に入れます。

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });

空白の/クリア1px GIF

<img src="clear.gif" data-basesrc="img1" />

はbasesrc Atttributeを使用してJSに適切なファイル名を追加します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow