html - 响应式设计和图像尺寸

Question

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

场景 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 属性来“拉伸(stretch)”和调整大小..?

img {
   max-width: 100%;
}

谢谢....

Answer 1

也许，一种更合适和/或更灵敏的方法是将两者结合起来。使用第二个 img 作为回退并使用带有 resolution 的媒体查询来指定图像:

img { ...low-res source }

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

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

resolution 目前在 W3 Candidate Recommendation