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

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

优化

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

现在代码是这样写的：

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

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

我来解答赞 17 收藏

反馈

2 条解答

令狐怡彤 Lv1

这个问题在WP里面也经常遇到，retina屏处理确实挺烦人的。你这种情况跟WP处理logo模糊的原理是一样的。

关键问题在于你虽然用了2x图，但是没告诉浏览器这是高分辨率图片。正确的做法是：

1. 把图片的宽高设置成实际尺寸的一半（因为你是2x图）
2. 加个sizes属性告诉浏览器这是高分辨率图片

改完的代码应该是这样：

function Logo() {

  return (

    <img 

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

      alt="logo" 

      style={{ width: '50px', height: '20px' }} 

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

    />

  );

}

这样改之后，浏览器就知道这张图是给2倍屏用的，会自动按2x渲染。原理跟WP里面用srcset处理响应式图片是一样的。

顺便吐槽下，retina适配这个坑我当年也踩过，现在看到这种问题就头疼...

2026-03-06 19:00

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