响应式设计和图像尺寸答案

【问题标题】：Responsive design and image sizes响应式设计和图像尺寸
【发布时间】：2013-05-19 22:53:59
【问题描述】：

问。就图像加载时间和性能而言，哪种技术最有效...？

场景 1。

是不是通过媒体查询来加载不同尺寸的图片，如下：

/* Smartphone */
@media screen and (max-width: 320px) {
   .img-page-1-img {
      background: url('../images/img-page-1-img-117.jpg') no-repeat;
      width: 117px;
      height: 77px;
   }
}
/* Desktop */
@media only screen and (min-width: 769px) {
   .img-page-1-img {
      background: url('../images/img-page-1-img-234.jpg') no-repeat;
      width: 234px;
      height: 154px;
   }
}

或者...

场景 2。

加载一张大图片并使用 CSS 通过设置 max-width 属性来“拉伸”和调整大小..？

img {
   max-width: 100%;
}

谢谢....

【问题讨论】：

好吧，在任何情况下加载“大”图像，即使页面在非常小的屏幕上查看，对于加载时间或性能都没有好处，应该非常明显，或者不是吗？

标签： html css responsive-design

【解决方案1】：

将不同的图像放入媒体查询中不起作用，因为某些浏览器只会预加载所有资源（即使是与当前视口不匹配的资源）。

请参阅：http://www.nealgrosskopf.com/tech/thread.php?pid=73 以获得很好的概述。

我会选择带有数据属性的 div，其中包含对要加载的图像的引用。使用 javascript 检查窗口宽度（或使用 matchMedia）并动态创建图像。

对于非常重要的图像（内容明智/需要编入索引），您可以最初添加一个小版本，如果窗口足够宽（或使用 matchmedia 匹配媒体查询），则将其替换为高分辨率版本。

【讨论】：

【解决方案2】：

对于响应式设计，我们需要添加它以获得大屏幕的原始图像

img {
 max-width: 100%;
}

在媒体查询内部添加这样的

@media screen and (max-width: 320px) {
 width:117px;
}

并且不要设置高度。您只需通过设置来控制带有父级的图像

溢出：隐藏；高度：117px;

最好避免在响应式设计中使用背景图片，如果你是使用您应该每组需要 4 到 5 张图像。尝试使用img标签

【讨论】：

【解决方案3】：

也许，一种更合适和/或响应更迅速的方法是将两者结合起来。使用第二个img 作为后备并使用带有resolution 的媒体查询来指定图像：

img { ...low-res source }

@media (min-resolution: 2dppx) { 
     img { ...hi-res source }
}

理解高分辨率的代理可能会丢弃第一个请求并仅获取高分辨率图像；在最坏的情况下会有两个请求。其他人只会获取低分辨率的源代码。

resolution 目前在W3 Candidate Recommendation

【讨论】：