html 中两种尺寸的相同 img

Question

我有一个用于大屏幕的 img 和另一个用于小屏幕的 img screens.This 是一个简单的选择，如果可行，但我不确定将相同的 img 以不同的尺寸放在html 并用显示 none 隐藏一个？该选项还有其他问题吗？

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

IMUO 我认为这不是一个好的做法，因为您将所有图像加载两次（然后隐藏）。如果您使用 bootstrap（或响应式页面），您可以使用 class 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');
    }
}

这样做，您只在需要时加载图像，避免加载两次图像。另一个例子作为背景图片：https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

Answer 2

我看不出有什么不妥。事实上，减少页面加载时间并在移动设备上减小页面大小是一种公认的技术（当然，前提是您只加载设备大小所需的图像）。

另请注意，我能看到的唯一潜在缺陷是，简单地将 CSS 属性设置为 display: none 并不总是会阻止图像加载（看这里：Does "display:none" prevent an image from loading?)

另一种方法是使用相同的名称存储图像，并添加 small 或不添加后缀（对于较大的图像）（几乎就像您在例如），除了在任何时候屏幕上只有 1 个 html 元素并使用 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
  }
}

html 中两种尺寸的相同 img

The same img in two sizes in the html

html

css

media-queries

responsive