Html 如何制作可用于视网膜和非视网膜设备的视网膜就绪图像

这是下面链接的后续内容

这是澄清，因为这么多的词对不同的人意味着不同的事情。似乎有一个图像在视网膜和非视网膜设备上看起来都很好：

如果屏幕上的图像最大宽度为400，最大高度为300，则图像本身应为800 x 600，ppi为144。然后文件应该被高度压缩，以尽量减少下载时间

显示图像时，使用css/html代码将其强制为最大宽度和最大高度，如下所示：

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />

---

这是正确的吗？（我已经决定我们公司不会使用responsive.js或cdn。）

一个更简单的方法是使用

img的
srcset
属性。然后，您可以在每个CSS像素上有不同设备像素的图像

尝试在桌面浏览器和支持浏览器的手机中打开此页面：

支持仍然有限，但可能很快会得到更好的支持：
有一个新的响应图像。截至2014年7月，它还只是一个阶段。但是polyfill已经可以使用了

很好地解释了不同的用例。但这里您需要的只是为高分辨率（如“视网膜”）显示器提供一个替代图像：

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />

为了实现广泛的浏览器兼容性，您还可以在容器元素上使用CSS背景图像，并使用

看看这个

谢谢，但是由于srcset没有太多的支持（特别是在IE中），这还不是一个可行的解决方案。很抱歉，我不能使用css背景。
#container {
    background-image: url(http://placehold.it/200x200);
    width: 200px;
    height: 200px;

    @media 
      only screen and (-webkit-min-device-pixel-ratio: 2), 
      only screen and (min-resolution: 192dpi) { 
          background-image: url(http://placehold.it/400x400);
    }
}