渐进式图片在 React 中怎么实现才有效?

诸葛茜茜 阅读 3

我在做图片加载优化,听说渐进式 JPEG 能提升体验,但直接用普通 <img> 标签好像没效果。我试过把图片转成 progressive 格式,但在 React 组件里加载时还是从上到下一行行显示,不是模糊到清晰的效果,是不是我哪里弄错了?

这是我的组件代码:

function ProductImage() {
  return (
    <img
      src="/images/product-progressive.jpg"
      alt="商品图"
      style={{ width: '100%', height: 'auto' }}
    />
  );
}
我来解答 赞 0 收藏
二维码
手机扫码查看
1 条解答
A. 明轩
A. 明轩 Lv1
你这代码没问题,但渐进式 JPEG 需要浏览器支持和正确的图片格式。确保图片确实是 progressive 格式,用工具检查下。另外给 img 加上 loading="lazy" 可能有帮助

function ProductImage() {
return (
<img
src="/images/product-progressive.jpg"
alt="商品图"
style={{ width: '100%', height: 'auto' }}
loading="lazy"
/>
);
}


记得测试不同浏览器,有些老旧的可能不完全支持这个效果,差不多就行吧。
点赞
2026-03-31 12:03