Question

Q值。在图像加载时间和性能方面，哪种技术效率最高......？

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

... OR

情景2。

加载一个大图像并使用CSS来“拉伸”并通过设置max-width属性来调整大小。？

img {
   max-width: 100%;
}

...谢谢

Answer 1

或许，更合适和/或更敏感的方法是将两者结合起来。使用第二个img作为后备广告，并使用resolution的媒体查询来指定图片：

img { ...low-res source }

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

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

resolution目前位于W3 Candidate Recommendation

Answer 2

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

img {
 max-width: 100%;
}

并在媒体查询内添加如下

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

并且不要设置高度。你只需通过设置

来控制父母的图像

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

**

如果你愿意的话，最好避免在响应式设计中使用背景图像使用你应该每套需要4到5张图像。尝试使用img标签

**

Answer 3

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

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

我会使用包含对要加载的图像的引用的数据属性来获取div。使用javascript检查窗口宽度（或使用matchMedia）并动态创建图像。

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

响应式设计和图像尺寸

3 个答案: