Question

目前我正在使用<img>标签来显示适合所有屏幕尺寸的大图片。如果我使用<picture>标记会在小图片加载小屏幕时节省带宽或页面加载时间吗？

需要意见。

Answer 1

没有。 picture代码需要输入的字符多于img代码，因此占用的带宽会更多（尽管不会更多）。

您可能会将picture元素与responsive images混为一谈（可以使用picture和img元素实现这一点。）

Answer 2

如果您正在谈论相同的单一来源，如下例所示（无论如何都没有意义），那么没有。

<picture>
    <img srcset="default.jpg" alt="Default">
</picture>

如果您正在谈论使用不同的图片来源，那么是。浏览器只会为当前媒体加载最合适的图像。例如。（source）：

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

请注意，您需要polyfill才能在IE中使用picture。

html图片标签是否可以节省带宽

2 个答案: