响应设计和图像大小 [英] Responsive design and image sizes

问题描述

Q。在图像加载时间和性能方面，什么技术是最有效的？

Q. What technique is the most efficient in terms of image load times and performance...?

情景1。

是否使用媒体查询加载不同大小的图片，如下所示：

Is it to load a different size image by using a media query, as below:

/* 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属性来调整大小？

Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?

img {
   max-width: 100%;
}

谢谢....

推荐答案

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

Putting the different images in media queries won't work as some browsers will just preload all assets (even the ones that are no match for the current viewport).

请参阅： http：// www .nealgrosskopf.com / tech / thread.php？pid = 73 一个很好的概述。

See: http://www.nealgrosskopf.com/tech/thread.php?pid=73 for a nice overview.

我会去的div的数据属性包含引用要加载的图像。

I'd go for div's with data attributes that contain a reference to the image to load. Check window width (or use matchMedia) with javascript and create the image on the fly.

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

For images that are really important (content wise / need to be indexed) you could add a small version initially and replace it with a high resolution version if the window is wide enough (or media query is matched using matchmedia).

这篇关于响应设计和图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！