Question

这是对以下链接的跟进

Preparing the images for retina-ready (web)

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

如果屏幕上的图像最大宽度为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。）

Answer 1

更简单的方法是使用srcset的{{1}}属性。然后，您可以为每个CSS像素设置不同设备像素的图像。

尝试在桌面浏览器和支持浏览器的手机中打开此页面： http://www.webkit.org/demos/srcset/

支持仍然有限，但很快可能会得到更好的支持： http://caniuse.com/srcset

Answer 2

有一个新的响应式图片HTML5 standard。截至2014年7月，它仅在beta builds of browsers。但Picturefill polyfill已经可用。

This article很好地解释了不同的用例。但你想要的只是为高分辨率（例如'视网膜'）显示提供另一种图像：

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

Answer 3

为了获得广泛的浏览器兼容性，您还可以在容器元素上使用CSS背景图像，并使用media queries / dpi queries

控制背景文件（视网膜或非视网膜）

查看此fiddle

#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);
    }
}

如何制作视网膜准备好的图像，可用于视网膜和非视网膜设备

3 个答案: