Building an effective Image Component
一篇介绍图片资源优化的综述文。 文章先介绍了图片在页面性能中的权重，未优化的图片对 LCP 造成影响。 然后抛出了图片优化时的一些难点，并借此引出文章的主角 NextJs Image 组件，一个开箱即用的解决方案。 随后重点讲其优化措施，以及面对开发者时 如何在开发体验与性能保障 中取衡。
文章暴露的问题很明显，不管怎样 性能优化 都要侵入开发层，开发者都要承担其带来的心智成本，关于图片组件优化，理论上可以在编译时 通过 babel plugin 去替换。 理想场景是开发者不必关心媒体资源的优化。
关于之前提到的 使用 babel 插件做图片格式优化（比如 png 换成 webp、avif 以减轻页面的资源体积），主要是为了将 img native element 换成 一个 集成多种优化方案的 Image 组件。
但该方案需要侵入开发层，个人开发还好，但团队开发中 制定开发规范是很难推进的。
如果让开发者无需承载任何心智成本，优化措施就需要集成在运行时。 我们优化的目标就是 Image DOM，而该对象代表的就是 HTMLImageElement。
那么刚刚说的图片格式替换 的优化措施如下，借助 Proxy、Reflect 做到动态图片资源拦截。
当然 这也需要静态资源 cdn 边缘计算能力，或者 图片资源打包时的下一代格式的处理。