谦逊的 `img` 元素和核心 Web 指标

Avatar of Chris Coyier
Chris Coyier

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

Addy Osmani 关于 HTML 中的图片

谦逊的 <img> 元素多年来获得了一些超能力。鉴于它在 Web 上的图像优化中占据核心地位,让我们了解一下它可以做什么以及它如何帮助改善用户体验和 核心 Web 指标

Addy 在将此类内容翻译成 Instagram 帖子方面做得很好,因此我将在此处嵌入它

我想说这些内容是任何 HTML 开发人员1 的必备知识。图片会影响网站的性能。图片会影响网站的可访问性。图片会影响网站的 UX。图片会影响网站的 SEO。这些都不是你可以忽略的东西。有很多东西需要了解,但这就是工作。

我仍然对这个 decoding="async" 东西很好奇。我读到了一些文章,建议在所有图片上都使用它(尽管 Addy 没有建议这样做,但也没有提供指导)。我还没有理解如何最好地使用此属性,但如果它确实变成了“一直使用”,我认为我们应该推动浏览器将此行为设为默认值,这样我们就不必再费心使用该属性了。

我还看到 Addy 建议尽早加载英雄图片,但不要再使用其他技巧了。我很好奇 我们介绍的这个技巧,即根本不加载英雄图片(直到交互),以试图欺骗 CWV 获得更高的数值,最终会成为一个好的实践,还是一个坏的实践。


  1. 我很少听到“HTML 开发人员”这个词,但我喜欢它。例如,人们经常使用“React 开发人员”来描述那些从事 React 开发的人。如果你编写的代码最终变成了 DOM,那么你就是一名 HTML 开发人员。你负责 HTML 提供的体验。

直接链接 →