查询以设置要使用的图像大小-Querytosetwhichimagesizetobeused

0  

If you can determine what image sizes to use for mobile/tablet/desktop/extraneous cases then you can use Javascript or CSS media queries to accomplish replacing the images on the fly.

如果您可以确定用于移动设备/平板电脑/桌面设备或外部设备的图像尺寸,则可以使用Javascript或CSS媒体查询来动态更换图像。

For instance say you know all your mobile devices will trigger at window width 768px and that it is safe to assume an image size less than 500kb will be good for all these devices, then CSS is your solution:

比如说你知道你的所有移动设备都会在窗口宽度为768px时触发,并且可以安全地假设图像尺寸小于500kb对所有这些设备都有好处,那么CSS就是你的解决方案:

HTML

CSS

@media (max-width: 768px) {
    .desktop_image { display: none; }
    .mobile_image { display: block; }
}

Note: Media Queries for standard devices

注意:标准设备的媒体查询

If you need something more sophisticated, due to identifying which device is being targeted, you can also couple the above CSS with Javascript for image detection.

如果您需要更复杂的东西,由于确定了哪个设备是目标,您还可以将上述CSS与Javascript结合使用以进行图像检测。

Look here: What is the best way to detect a mobile device in jQuery?

看看这里:在jQuery中检测移动设备的最佳方法是什么?

0  

You could use srcset attribute

您可以使用srcset属性

Nice demo can be seen here and more details here

这里可以看到漂亮的演示以及更多细节

To see which browsers support this attribute see here, firefox 38+, chrome 39+, safari 7.1+, opera 29+, ios safari 8.3+ ...

要查看哪些浏览器支持此属性,请参阅此处,firefox 38 +,chrome 39 +,safari 7.1 +,opera 29+,ios safari 8.3+ ...

The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

可以使用img元素上的src和srcset属性,使用x描述符来提供仅在大小上变化的多个图像(较小的图像是较大图像的缩小版本)。

Browsers can then use this information to pick the best image source.

然后,浏览器可以使用此信息来选择最佳图像源。

Other option is to use tag and srcset attribute together.

其他选项是一起使用 标签和srcset属性。

The picture element gives developers control when those images are presented to the user.

图片元素使开发人员能够控制何时向用户呈现这些图像。