レスポンシブ デザイン - メディア クエリ - 特定の画像を読み込まない方法

Question

さて、メディアクエリと display: none;.

ここまでは順調ですね。ただし、これらのイメージは依然としてこれらのデバイスにダウンロードされるため、帯域幅の増加が発生します。

これらのイメージが指定されたデバイスにダウンロードされないようにする適切な方法は何ですか?

ご返答いただければ幸いです。

Answer 1

今すぐ唯一のアクセス可能なソリューションは、<noscript>タグで画像を包み込み、後でJavaScriptを使用して画像を出力することです。 cookieは、最初のページロード（HTMLPreloadScanner）でもCDNSを使用して動作しません。。あなたのイメージが常にビューポートの100％ではない場合は、ブラウザスニッフィングは無用です。

slimmage.jsは、3KBのVanilla JS 。のコンテキストフレンドリーな応答イメージを実装します。

マークアップはかなり単純です：

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

. もちろん、これを抽象化するためのサーバーサイドヘルパーを作ることができます。

Answer 2

私が考えることができる 2 つのオプション:

1. ブラウザスニッフィングを使用してサーバー上の小型デバイスを検出し、画像を参照しない別の HTML を送信します。
2. HTML ではなく CSS 経由で画像を表示します ( style 必要に応じて属性)、いずれかを使用します background-image または :before/:after そして content (IE 6 または 7 ではサポートされていません)、その CSS コードをメディア クエリでラップして、画面が大きいデバイスでのみ表示されるようにします。

Answer 3

JavaScript依存関係を気にしない場合 window.innerWidth 十分に大きなスクリーン用の画像タグを挿入します。

JavaScriptが有効になっていて、ウィンドウが十分に大きい場合にのみ要求されます。

Answer 4

追加のJavaScriptを使用して問題がない場合は、このを試すことができます。メディアクエリについて検索して学びながら、私はそれにつまずいた。