使用<picture>元素适配浏览器能力与视口属性提供最优图片时，始终加载最大宽度图片的问题排查

这个问题我之前也踩过坑，核心原因是浏览器根据sizes属性计算的目标图片宽度和你预期的不一致，或者srcset的档位设置没覆盖到实际需求。咱们一步步拆解解决：

可能的问题点 #

1. sizes规则和实际容器宽度不匹配 #

你写的sizes里，小屏（<767px）用calc(0.8 * 100vw)，但得先确认：你的主题在小屏时，图片容器的实际宽度真的是视口的80%吗？
打开开发者工具切换到小屏视口（比如375px），选中图片容器看「样式」面板的宽度值——如果实际是100vw（全屏），那sizes的计算就错了：浏览器会按80vw算目标宽度，但实际显示是100vw，为了避免拉伸模糊，它会直接选更大的图。

2. 浏览器的srcset选择逻辑（你可能没注意到） #

浏览器选图的逻辑是：先根据sizes算出图片需要显示的目标宽度，然后从srcset里挑大于等于这个宽度的最小图（优先保证清晰度）。
比如在767px的小屏，0.8*767=613px，这时候400w的图用来显示613px会被拉伸，浏览器自然会选800w的图，这是正常的清晰度优化行为，但和你“小屏用小图”的预期不符。

3. 缓存干扰 #

如果之前加载过800w的图，浏览器会直接从缓存读取。测试时记得在开发者工具「网络」面板勾选「禁用缓存」，再刷新看实际加载的资源。

解决方案 #

第一步：验证容器实际宽度 #

先确认小屏时图片容器的真实宽度，再对应修改sizes规则。比如如果小屏容器是100%视口，就把小屏规则改成(max-width: 767px) 100vw。

第二步：调整sizes和srcset适配需求 #

场景1：让浏览器自动选最合适的清晰度

如果想让浏览器根据实际容器宽度自动选图，建议补充中间档位的图（比如600w），同时把大屏规则明确加上媒体查询（逻辑更清晰）：

<picture>
  <source 
    srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.avif 400w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-600x-q80.avif 600w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.avif 800w"
    sizes="(max-width: 767px) calc(0.8 * 100vw), (min-width: 768px) calc(66.666667% * 100vw)"
    type="image/avif"
  >
  <source 
    srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.webp 400w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-600x-q80.webp 600w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.webp 800w"
    sizes="(max-width: 767px) calc(0.8 * 100vw), (min-width: 768px) calc(66.666667% * 100vw)"
    type="image/webp"
  >
  <img 
    src="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img_20170217_122206.jpg"
    srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.jpg 400w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-600x-q80.jpg 600w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.jpg 800w"
    sizes="(max-width: 767px) calc(0.8 * 100vw), (min-width: 768px) calc(66.666667% * 100vw)"
    decoding="async"
    loading="lazy"
    alt="户外拍摄的风景照片"
  >
</picture>

场景2：强制小屏用400w的图

如果不管小屏多大，都想让它加载400w的图，直接把sizes的小屏规则设为固定宽度：

<picture>
  <source 
    srcset="https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-400x-q80.avif 400w,
            https://domain.tld/kirbytest/media/pages/blog/vierter-beitrag/8a7534e6bb-1628195522/img-20170217-122206-800x-q80.avif 800w"
    sizes="(max-width: 767px) 400px, (min-width: 768px) calc(66.666667% * 100vw)"
    type="image/avif"
  >
  <!-- webp和img标签同理修改srcset和sizes -->
</picture>

额外提醒：别忘补alt属性 #

你的代码里alt=""是空的，这对可访问性不友好，记得补上图片的描述文本。

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