クイック・ロードのための最小サイズの画像と高解像度の画像を網膜ディスプレイ用に選択する

Question

画像を必要な幅でのみ（srcsetを使用して）提供するか、画像を2倍にするかの間にはちょっとした疑問がありますそれは網膜ディスプレイでよく見えるでしょう。

私たちはすべて、私たちのウェブページが一番に見えるようにしたい。特にグラフィックや写真を扱う人のために。そして、我々はまた、トラフィックの帯域に関して賢明でなければならない。私たちはWiFiのみを使用する人には配慮したいと思っています。彼らがそれをロードするために長く待たなければならない場合、彼らは出発するでしょう。私はまた、ランキングで軽いGoogle favウェブページを読んだ。

しかし、あなたのウェブページが網膜またはHDデバイス上でぼやけて見えるのは、悪いことではありません。特に最近では、携帯電話や業界で情報にアクセスする人が増えているため、ほとんどがMacbookユーザーです。 今私srcsetは次のようになります。私のサムネイル用

<img 
    srcset="img/large-image-1920w.jpg 1920w, 
      img/medium-image-1600w.jpg 1600w, 
      img/small-image-1024w.jpg 1024w" 
    sizes="100vw" 
    src="img/small-image-1024w.jpg" /> 

とコード（私はブートストラップを使用している理由は768ワットでだと、私はそれが携帯電話に良くなりますことを考えて960ワットの画像を選択してください）：

<div class="col-xs-12 col-sm-4">  
<img 
    srcset="img/thumbnail-960w.jpg 1920w, 
      img/thumbnail-640w.jpg 1200w, 
      img/thumbnail-960w.jpg 768w" 
    sizes="100vw" 
    src="img/thumbnail-328w.jpg" /> 
</div> 

画像は、ブラウザの全幅の100％を満たすように設定されています。各行に3つのサムネイルが表示されます。

網膜ディスプレイで2倍のピクセル密度を適切なサイズで表示する必要がある場合（例：400ピクセル×400ピクセルの画像が200ピクセル×200ピクセルで表示されます）、私のウェブページは960ワイドブラウザで良好に見えますか？それはばかげて小さいです。

iPhoneの場合、物理的な寸法も小さいので、必要に応じて1600wの媒体イメージにアクセスすることができます。

提案がありますか？

Answer 1

上記のコードは、さまざまな画面で問題なく表示されます。

タグで試してみると同じですが、解像度を確認するためのメディア属性があります。

<picture> 
    <source media="(min-width: 650px)" srcset="img_650.jpg"> 
    <source media="(min-width: 465px)" srcset="img_465.jpg"> 
    <img src="img_default.jpg" alt="something" style="max-width:auto; width: auto"> 
</picture> 

希望すると、これが役に立ちます。