0

私はこれに何度も遭遇し、常に CSS と JS の組み合わせで解決していましたが、レスポンシブ画像のサポートが増えるにつれて、より説得力のある解決策を探していました。セマンティクスを保持しながら（CSSなし）、ブラウザの事前読み込みを利用して（JS遅延読み込みなし）、モバイルに画像を読み込まないようにしています。background-image

どうすればこれを達成できますか?

4

1 に答える 1

0

tl;dr

の URLと幅記述子をsrcset持つ画像候補文字列で属性を使用し、属性のフォールバックを に設定します。次に、小さいビューポートの画像を非表示にする CSS ルールを追加します。最後に、完全な制御のためにs でラップします。about:blank1wsizes<source-size-value>0vw<picture><source>

srcset

これは、レスポンシブ画像と少しの CSS を使用して解決できるようです。

次のレスポンシブ イメージを検討してください。

<img
    src="foo-585.png"
    alt="foo"
    srcset="foo-375.png 375w, foo-585.png 585w"
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px"
>

<source-size-value>にフォールバックがないにもかかわらずsizes、foo-375.pngがまだロードされています。したがって、追加の HTTP リクエストを送信しない画像候補文字列を見つける必要があるようです。

SO を検索して、null 画像候補文字列を本質的に設定する方法に関するヒントを探しました。私はいくつかの方法を見つけましたが、それらはすべて次のように実装できます。

<img
    src="foo-585.png"
    alt="foo"
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw"
>

の幅記述子1wと のフォールバック<source-size-value>を持つ新しい画像候補文字列0vwが追加されていることに注意してください。この例で[URL]は、次のいずれかの URL のプレースホルダーです。

空のフラグメント

1 つの回答では、空のフラグメント ( #) を有効なオプションとして使用することをお勧めします。残念ながら、私のテストでは、このメソッドが HTTP リクエストを現在の URL に繰り返し送信していることがわかります。良くない。

小さなデータの URL

別の回答では、Base64 でエンコードされたデータ URL でThe Tiniest GIF Everを使用することを推奨しています。

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

最初、私は 58 バイトで、それ自体で gzip 圧縮を行う機会はほとんどないため、GIF を外部リソースとして短い URL で保存する方が、複数のデータ URL よりも効率的であると考えていましたが、私は間違っていました。gzip は、朝食用にこのデータ URL の複数のインスタンスを使用します。

しかし、あるコメントが指摘しているように、データ URL はモバイルでは低速です。

スキームなし、ホストなし、ポートなし0

さらに別の回答では、スキームなし、ホストなし、ポートなし0( //:0) の URL を使用することを提案しています。これは機能しているように見えますが、ファイアウォールの警告に関する懸念があります。破損した画像スタイルを非表示にするために CSS も必要です。

about:blank

実際にはabout:blank十分に機能しているように見えますが、最後の方法と同様に、破損した画像スタイルを非表示にするために CSS が必要です。

img {
    display: none;
}

@media (min-width: 768px) {
    img {
        display: inline-block;
    }
}

私には、これが有効で効率的であり、ユーザー向けの警告が表示されないため、これが最良の選択肢のように思えます。これらの数行の CSS は、私にとって非常に価値があるように思えます。

<picture>

コメントが指摘しているように、保証されてsrcsetいません。何らかの理由でブラウザがabout:blank画像の候補に反対することを決定した場合、ソリューションは崩壊します。これを解決するには、<img>in要素をラップして、関連するs<picture>を追加します。<source>

<picture>
    <source
        media="(min-width: 768px)"
        srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
    >
    <source srcset="about:blank">
    <img
        src="foo-585.png"
        alt="foo"
        srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
        sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw"
    >
</picture>
于 2016-04-25T14:05:17.047 に答える