picture 元素在 React 中怎么正确写才能适配多端分辨率？

FSD-羽霏提问于 2026-03-27 10:10:24 阅读 41

优化

最近在做响应式图片优化，想用 HTML5 的 <picture> 元素配合 srcset 来加载不同分辨率的图片。但在 React 里写的时候总感觉不对劲，浏览器有时候还是加载了大图，特别是在移动端。

我按照 MDN 的例子写了下面这段代码，但不确定是不是写法有问题，或者是不是还需要额外配置什么？比如是不是要加 type 属性，或者 media 查询写得不对？

return (
  <picture>
    <source media="(max-width: 768px)" srcSet="/img/small.jpg" />
    <source media="(min-width: 769px)" srcSet="/img/large.jpg" />
    <img src="/img/large.jpg" alt="示例图" loading="lazy" />
  </picture>
);

另外，我还试过加上 type="image/webp"，但发现如果没提供 fallback，Safari 会直接不显示图片……这到底该怎么写才稳妥？

我来解答赞 4 收藏

反馈

1 条解答

公孙彦会 Lv1

看起来你的代码结构基本是对的，但有几个地方可以优化。首先要注意的是，source 标签的顺序很重要，浏览器会选择第一个符合条件的资源加载。另外，为了安全起见，记得对图片路径做验证，防止注入。

这是改进后的写法：



return (

  <picture>

    <source 

      media="(max-width: 768px)"

      srcSet="/img/small.webp 1x, /img/2xs-small.webp 2x"

      type="image/webp" 

    />

    <source 

      media="(max-width: 768px)"

      srcSet="/img/small.jpg 1x, /img/2xs-small.jpg 2x"

    />

    <source 

      media="(min-width: 769px)"

      srcSet="/img/large.webp 1x, /img/2xl-large.webp 2x"

      type="image/webp" 

    />

    <source 

      media="(min-width: 769px)"

      srcSet="/img/large.jpg 1x, /img/2xl-large.jpg 2x"

    />

    <img 

      src="/img/fallback.jpg" 

      alt="示例图" 

      loading="lazy"

      width="800"

      height="600"

    />

  </picture>

);

注意几点：
1. 给每个 source 加上 1x 和 2x 的分辨率选项
2. 把 WebP 放在前面，给 Safari 等不支持的浏览器留个 JPG 的 fallback
3. img 标签必须要有 width 和 height 属性，这有助于避免布局抖动

最后提醒下，服务器端最好配置好合适的缓存策略，不然用户可能总是要下载完整的大图，影响性能和流量消耗。

2026-03-27 10:17