3

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

情景 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%;
}

谢谢....

4

3 回答 3

1

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

img {
 max-width: 100%;
}

并在媒体查询中添加这样的

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

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

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

**

并且更好地避免在响应式设计中使用背景图像，如果您正在使用，则每组应该需要 4 到 5 个图像。尝试使用 img 标签

**

于 2013-05-24T11:46:44.127 回答
1

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

img { ...low-res source }

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

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

resolution目前在W3 候选推荐中

于 2013-05-24T11:06:42.730 回答
1

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

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

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

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

于 2013-05-24T12:54:36.027 回答