Retina屏下图片模糊怎么解决？

光星 Dev 提问于 2026-03-06 03:44:18 阅读 3

优化

我在用 React 做移动端页面，发现 iPhone 上的 logo 图片特别模糊，明明原图是 2x 的高清图。我试过直接放 2 倍图，但没用，是不是得用 srcset 或者 CSS 处理？

现在代码是这样写的：

function Logo() {
  return (
    <img 
      src="/assets/logo@2x.png" 
      alt="logo" 
      style={{ width: '100px', height: '40px' }} 
    />
  );
}

但显示出来还是糊的，难道要强制设置 devicePixelRatio 吗？求指点！

我来解答赞 4 收藏

反馈

1 条解答

Mr-子阳 Lv1

这个问题我遇到过，主要是因为Retina屏下图片处理方式特殊。你的代码有几个小问题：

1. 首先确保图片确实是高清的，打开原图看看边缘是否锐利
2. 关键点是图片尺寸要匹配 - 你现在设置了100x40的显示尺寸，但@2x图片的实际尺寸应该是200x80

试试这样改：

function Logo() {

  return (

    <img 

      src="/assets/logo@2x.png" 

      alt="logo" 

      style={{ width: '100px', height: '40px' }} 

      srcSet="/assets/logo.png 1x, /assets/logo@2x.png 2x"

    />

  );

}

或者更优雅的CSS方案：

.logo {

  width: 100px;

  height: 40px;

  background-image: url(/assets/logo.png);

  background-size: contain;

}

@media (-webkit-min-device-pixel-ratio: 2) {

  .logo {

    background-image: url(/assets/logo@2x.png);

  }

}

两种方式我都试过效果不错。个人更推荐CSS方案，这样更清晰，还能避免图片加载时的闪烁问题。

对了，记得检查服务器是否正确配置了图片缓存，有时候模糊是因为加载了缩略图。

2026-03-06 05:03