不要使用 `picture`(大多数情况下)

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

Jason Grigsby

除非您要解决艺术指导问题,否则您不需要使用元素。事实上,使用 <picture> 元素可能会损害用户体验。

我敢打赌,大多数“响应式图像”的使用都是为了根据情况提供适当的大小的图像。情况 = 图像将显示的大小、屏幕像素密度和带宽。这正是 <img sizes="" srcset=""> 最擅长的。它执行浏览器可以优化的神奇操作,而 <picture> 的效率仅与其为其明确设置的规则一样高(您几乎肯定没有使用足够的详细规则来最大化效率)。仅当您需要执行非常明确的操作(例如,需要交换完全不同的图像的确切断点)时,才使用实际的 picture 元素。

直达链接 →