picture元素在媒体查询断点切换图片源时出现短暂闪烁如何解决？

问题原因 #

• 缺失sizes属性：使用带宽度描述符（w后缀）的srcset时必须配套sizes属性，否则浏览器无法在断点切换时第一时间计算出正确的渲染尺寸，会出现临时尺寸异常。
• 无明确的图片渲染尺寸规则：你当前的.image类没有设置宽高约束，浏览器每次加载新的断点图片时，需要等图片元数据加载完成才能确定渲染尺寸，加载过程中会出现临时的尺寸跳变。
• 图片加载间隙：切换source时，旧图片已被卸载，新图片还在请求中，这段空白期浏览器会使用默认占位尺寸，表现为瞬间的闪烁或缩放。

修复方案 #

首先更新.image的样式，明确尺寸规则，提前预留占位空间：

.image {
  position: absolute;
  top: 0;
  /* 可选：让图片居中溢出，视觉效果更优 */
  left: 50%;
  transform: translateX(-50%);
  content: "";
  /* 强制高度和父容器一致，满足你保持高度、宽度溢出的需求 */
  height: 100%;
  width: auto;
  /* 提前声明图片宽高比，加载完成前就占据正确尺寸，替换为你实际图片的宽高比即可 */
  aspect-ratio: 1903 / 1000;
}

接着修改HTML的img标签，补充sizes属性：

<img src="https://i.imgur.com/jZkIwzu.jpg" alt="" class="image" sizes="100vw">

如果还是存在加载间隙导致的闪烁，可以在页面<head>中添加对应断点的图片预加载规则，提前加载对应视口的图片资源：

<link rel="preload" as="image" href="https://i.imgur.com/Be8mwYF.jpg" media="(max-width: 1200px)">
<link rel="preload" as="image" href="https://i.imgur.com/uyRlf1V.jpg" media="(max-width: 1500px)">
<link rel="preload" as="image" href="https://i.imgur.com/jZkIwzu.jpg" media="(min-width: 1501px)">

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