如何实现响应式图片，使浏览器在指定断点加载正确的图片资源？

现有代码问题说明 #

• 单<source>标签下type属性与srcset资源格式不匹配：原有代码指定type="image/avif"，但srcset中同时放入了png、webp、avif三种格式资源，浏览器无法正确识别可用资源
• 未按图片格式优先级分层配置：同一断点下需要按avif、webp、png的兼容优先级分别配置source标签，保证浏览器优先加载体积更小的支持格式

正确实现逻辑 #

要同时满足断点适配和格式适配两个需求，需要按「断点从大到小 + 格式优先级从高到低」的顺序排列<source>标签：

1. 对每个断点（如2560px以上、1080px-2559px、1024px-1079px、1024px以下）分别配置对应尺寸的资源
2. 同一断点下，先写avif格式的source，再写webp，最后写png，浏览器会自动跳过不支持的格式

修正后的完整代码 #

<picture>
  <!-- 2560px及以上断点 -->
  <source media="(min-width: 2560px)" srcset="./images/profile1000.avif" type="image/avif" />
  <source media="(min-width: 2560px)" srcset="./images/profile1000.webp" type="image/webp" />
  <source media="(min-width: 2560px)" srcset="./images/profile1000.png" type="image/png" />

  <!-- 1080px-2559px断点 -->
  <source media="(min-width: 1080px)" srcset="./images/profile.avif" type="image/avif" />
  <source media="(min-width: 1080px)" srcset="./images/profile.webp" type="image/webp" />
  <source media="(min-width: 1080px)" srcset="./images/profile.png" type="image/png" />

  <!-- 1024px-1079px断点 -->
  <source media="(min-width: 1024px)" srcset="./images/profile120.avif" type="image/avif" />
  <source media="(min-width: 1024px)" srcset="./images/profile120.webp" type="image/webp" />
  <source media="(min-width: 1024px)" srcset="./images/profile120.png" type="image/png" />

  <!-- 1024px以下兜底，同时兼容无picture元素支持的旧浏览器 -->
  <img src="./images/profile120.webp" alt="profile image" decoding="async" loading="lazy" width="421" height="421" class="bg-clip-padding bg-opacity-50 shadow rounded-full bg-white dark:bg-gray-900 backdrop-blur-2xl" />
</picture>

生效验证 #

修改完成后可以通过浏览器开发者工具的网络面板，切换不同设备尺寸刷新页面，即可看到浏览器会自动加载对应断点和支持格式的图片资源。

内容的提问来源于stack exchange，提问作者lambsbaaacode