用 picture 元素实现响应式图片

前言

以头图为例搭建完整的响应式图片方案，包括 AVIF/WebP 切换，以及常被用错的像素密度描述符。

现场笔记

在处理 HTML 问题的过程中，反复出现的几个模式：

• 简单的版本撑过了每次重构，聪明的版本没有。
• 边做边写的文档，比事后补写的耐用得多。
• 同一个问题第二次出现时，它就已经是一个模式了——给它起个名字。

可以直接抄的检查清单

• 问题可以用一条命令复现。
• 修复附带一个没有它就会失败的测试。
• 作者本人之外的人也在自己的机器上跑过。

写在最后

写下未来那个自己真正会读的短版本——这就是全部的诀窍。