多倍图、图片模糊问题

约 1167 字大约 4 分钟

2025-07-03

设备像素比（DPR）

首先我们先了解一个概念：设备像素比（DPR）。

设备像素比（DPR） = 物理像素 / 逻辑像素（CSS像素）

物理像素：设备屏幕实际拥有的像素点（硬件决定）
逻辑像素：CSS 中使用的虚拟像素（软件定义）

模糊产生的原因

我们平时使用的图片大多数都属于位图（png、jpg...），位图由一个个像素点构成的，每个像素都具有特定的位置和颜色值。理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。

在 dpr > 1 的屏幕上，位图的一个像素可能由多个物理像素来渲染，然而这些物理像素点并不能被准确的分配上对应位图像素的颜色，只能取近似值，所以相同的图片在 dpr > 1 的屏幕上就会模糊。

所以我们需要针对不同的 dpr 提供不同分辨率的图片，或者使用不失真的矢量图，以保证图片在不同屏幕上的显示效果。

解决方案

使用矢量图替代位图

可以使用 png、svg 等矢量图格式，这些图片在不同 dpr 的屏幕下不会失真。

<!-- 适合图标/简单图形 -->
<img src="logo.svg" alt="矢量logo" />
<img src="content.webp" alt="内容图片" />

多倍图适配方案

规格参考

设计稿尺寸：750×1334 (2 倍图)
实际提供：1 倍图：375×667、2 倍图：750×1334、3 倍图：1125×2001

1、`<img>` 元素

srcset 属性的值是一个字符串，用于标识一个或多个以逗号（,）分割的图像候选字符串，每个候选地址将在特定条件下得以使用。
sizes 属性的值是一个字符串，用于指定图像的宽度，用于描述不同屏幕尺寸下图像的首选宽度。
如果浏览器不支持 srcset 属性，会回退到 src 属性指定的图片。

<img
  src="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
  sizes="(max-width: 600px) 480px,
         800px"
  alt="Responsive image"
/>

2、CSS 样式 `background-image: image-set()`

如果 image-set() 和 url() 属性同时存在，那么浏览器会优先根据 image-set() 来选择图片。如果浏览器不支持 image-set()，则会回退到 url() 属性指定的图片。

.hero {
  background-image: url(hero@1x.jpg);
  background-image: -webkit-image-set(url(hero@1x.jpg) 1x, url(hero@2x.jpg) 2x);
    (url(hero@1x.jpg) 1x, url(hero@2x.jpg) 2x);
}

3、`<picture>` 元素 + `<source>` 元素

<picture> 为容器元素，主要是为了给多个 <source> 提供包装。
<picture> 可以包含多个 <source> 和一个 <img>

工作流程

浏览器会按顺序检查 <source>条件，使用第一个匹配的 <source>，如果都不匹配则使用 <img>。
如果浏览器不支持 <picture> 元素，会回退到 <img> 元素指定的图片。

<picture>
  <!-- 小屏使用正方形裁剪 -->
  <source
    media="(max-width: 600px)"
    srcset="square@1x.jpg 1x, square@2x.jpg 2x"
  />

  <!-- 大屏使用原始比例 -->
  <source media="(min-width: 601px)" srcset="full@1x.jpg 1x, full@2x.jpg 2x" />
  <img
    src="fallback.jpg"
    srcset="full@1x.jpg 1x, full@2x.jpg 2x"
    alt="响应式图片"
  />
</picture>

媒体查询适配

.logo {
  background-image: url(icon@1x.png);
  background-size: contain;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url(icon@2x.png);
  }
}

性能优化技巧

新一代图片格式 Webp

Webp 是谷歌开发的一种图片格式，它支持有损压缩和无损压缩，压缩率比传统图片格式更高。更小的文件体积，带来的是加载更快的体验。

<!-- WebP格式 (比JPEG小25-35%) -->
<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="优化图片" />
</picture>

通过 Webp + 多倍图方案，可在保证 Retina 屏幕显示质量的同时，减少 30% - 50% 的图片流量消耗，显著提升移动端页面性能。

懒加载实现

懒加载是一种优化技术，它可以推迟图片资源的加载时机，当用户即将滚动到图片位置时再加载，减少页面加载时间。

<img
  src="placeholder.jpg"
  data-src="real-image@2x.jpg"
  loading="lazy"
  alt="懒加载图片"
/>

CDN 智能适配

<!-- 通过URL参数自动适配 -->
<img
  src="https://cdn.example.com/image.jpg?width=800&quality=80&dpr=2"
  alt="CDN优化图片"
/>

移动端特殊处理

微信小程序方案

<!-- 使用mode控制缩放 -->
<image src="image@2x.jpg" mode="widthFix"></image>

React Native 方案

<Image
  source={{
    uri: "image_url",
    width: PixelRatio.getPixelSizeForLayoutSize(100),
    height: PixelRatio.getPixelSizeForLayoutSize(100),
  }}
/>

设计协作建议

设计稿交付规范：
- 要求提供@1x、@2x、@3x 三套素材
- 图标优先提供 SVG 格式
切图注意事项：
- 保留安全边距
- 关键内容远离边缘

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24