2022 年 5 月，Aurora 和 Angular 团队宣布，他们将共同为 Angular 开发图片指令。该指令最近作为 Angular v14.2 的一部分发布了开发者预览版。本文介绍了新的图片指令 NgOptimizedImage 如何在 Angular 中支持图片优化。
背景
图片是网站用户体验中常见且至关重要的组成部分，99.9% 的网页都会生成一个或多个图片的请求。图片也是影响网页大小的最大因素，平均每个网页的图片大小为 982 千字节。
由于图片数量和大小不断增加，因此可能会影响网页的性能并影响 Core Web Vitals 指标。在 2021 年，79.4% 的桌面版网页的 Largest Contentful Paint (LCP) 元素是图片。因此，追求优化图片已成为许多人的一项不懈追求。
Aurora 团队相信，可以利用框架的强大功能，为开发者常见的挑战提供内置解决方案。他们首次涉足图片优化领域是通过 Next.js 图片组件。他们将此组件视为测试平台，以便确定改进图片优化的开发者体验 (DX) 能否让更多使用框架的应用获得更出色的性能。
Next.js 用户 Leboncoin 的第一组结果令人鼓舞。在开始使用 next/image 后，Leboncoin 的 LCP 显著改善（从 2.4 秒缩短到 1.7 秒）。社区随后采用 next/image 有助于提高符合 LCP 阈值的 Next.js 源的数量。很快，其他框架中就出现了请求提供类似功能，其中之一就是 Angular。
因此，Aurora 咨询了 Angular 和 Nuxt，为这些框架设计了图片组件原型。Nuxt 图片组件于去年发布。现在，Angular 图片指令 (NgOptimizedImage) 已发布，可将图片优化默认设置为 Angular。
机会
Angular 是当今开发者使用的领先 JavaScript 框架之一。HTTPArchive 在移动设备上抓取的超过 5 万个源都使用了该库，并且 NPM 上的每周下载量高达近 300 万次。