htmlの2つのサイズで同じimg

Question

私は大画面用のimgと小さな画面用のimgを持っています。これは簡単なオプションですが、うまくいけば、同じものを置くのがよいかどうかわかりませんhtmlでさまざまなサイズのimgを表示し、表示なしのものを非表示にしますか？そのオプションに他の問題がありますか？

CSS：

#small { 
    display:none; 
} 

@media screen and (max-width: 630px) { 
#big { display:none; } 
#small { display:block; } 
} 

HTML：

<img id="big" src="img/1-big.jpg"> 
<img id="small" src="img/1-small.jpg"> 

Answer 1

これは何も問題ありません。実際には、ページの読み込み時間を短縮し、モバイルでページサイズを小さくすることは認められています（もちろん、デバイスのサイズに合わせてイメージをロードするだけで済みます）。これに代わる

：

また（Does "display:none" prevent an image from loading?をここを参照してください）私はこれを見ることができる唯一の潜在的な落とし穴として、それは単にdisplay: noneにCSSプロパティを設定すると、常にロードからイメージを妨げるものではないということです、注意してください小文字のが付いているか、または大文字の接尾辞が付いていない（ほとんどの場合、あなたの例にあるように）画像が保存されていることがあります。 javascriptを使用してパスを変更します。例。

// HTML ELEMENT 
<img class='thumbnail' src='img/thumb.png'> 

// JAVASCRIPT 
if(window.innerWidth < 640){ 
    // This is for users with smaller screens, load the smaller image 
    var imgs = document.getElementsByTagName('img'); 

    for(var i = 0; i < imgs.length; i++){ 
    var current = imgs[i].getAttribute('src'); 
    imgs[i].setAttribute('src', current + '-small.png'); 

    // THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png' 
    // AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT 
    } 
} 

Answer 2

IMUO私はあなたが二回すべてのイメージのロード（そして隠された）されているので、これは、良い習慣はないと思います。あなたは、ブートストラップ（または応答ページ）を使用している場合は、クラスimg-responsiveまたはこれを使用することができます。

img { 
    width: 100%; 
    height: auto; 
} 

あるいはそうでない場合は、あなたがこれを行うことができます：

/* For width smaller than 400px: */ 
body { 
    background-image: url('1-big.jpg'); 
} 

/* For width 400px and larger: */ 
@media only screen and (min-width: 400px) { 
    body { 
     background-image: url('1-small.jpg'); 
    } 
} 

そのようにやって、あなただけのロード必要なときに画像を読み込み、画像を2回読み込むことを避けます。背景画像としての別の例：https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/