Question

可能是本专家的基本问题

示例：

我有图像2000x1500px @ 556kb - 由于我猜测的缓存级别，一组这样大小的图片会导致iOS设备无法加载页面（考虑到有很多图片）。

如果我创建两个相同的文件，一个在2000x1500，另一个在800x450，由于尺寸较小，重量轻得多 - 这仅适用于移动设备。

我如何在CSS中解决这个问题？或者用什么方法解决这个问题？

Answer 1

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

例如，假设您知道所有移动设备将在窗口宽度为768px时触发，并且假设图像大小小于500kb对所有这些设备都有好处，那么CSS就是您的解决方案：

HTML

<img class="mobile_image" src="mobile_image.png" alt="Mobile Image"/>
<img class="desktop_image" src="desktop_image.png" alt="Desktop Image"/>

CSS

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

注意：Media Queries for standard devices

如果您需要更复杂的东西，由于识别出目标设备，您还可以将上述CSS与Javascript结合使用以进行图像检测。

请看这里：What is the best way to detect a mobile device in jQuery?

Answer 2

您可以使用srcset属性

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                             image-3x.png 3x, image-4x.png 4x">

可以看到漂亮的演示here以及更多详情here

要查看哪些浏览器支持此属性see here，firefox 38 +，chrome 39 +，safari 7.1+，opera 29+，ios safari 8.3+ ......

img元素上的src和srcset属性可以使用x描述符来提供只有大小不同的多个图像（较小的图像是缩小版本的更大的形象）。

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

其他选项是同时使用<picture>代码和srcset属性。

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

<picture>
   <source media="(min-width: 20em)"
           srcset="image-big.jpg 1x, image-big-hi-res.jpg 2x">
   <source srcset="image-small.jpg 1x, image-small-hi-res.jpg 2x">
   <img src="fallback-image.jpg" alt="No support for picture tag">
</picture>

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

2 个答案: