为什么使用WebP格式后图片在移动端显示模糊，该怎么解决？

a'ゞ伊可提问于 2026-02-06 06:07:29 阅读 49

优化

我在项目里用WebP格式压缩图片，发现手机端显示的图片边缘特别模糊，这是为什么？

之前用这个JS脚本自动替换图片格式：


document.querySelectorAll('img').forEach(img => {
  const src = img.src.replace(/.(jpe?g|png)$/, '.webp');
  img.src = src;
});

测试时发现iPad Pro的图片文字边缘锯齿严重，而电脑上看没问题。尝试过加了但没效果，是不是需要调整压缩参数？或者WebP在移动端有特殊设置？

我来解答赞 8 收藏

反馈

1 条解答

FSD-淑怡 Lv1

WebP在移动端显示模糊主要是因为压缩参数设置不合理，特别是在转换图片时如果使用了较低质量的参数，会导致图片细节丢失严重，特别是在高分辨率屏幕上更明显。你在前端用JS替换图片格式的做法没有错，但这种方式无法控制WebP的压缩参数，导致生成的WebP图片可能质量不足。

建议把图片转换逻辑移到后端处理，这样可以精细控制压缩参数。比如用Node.js可以这样写：

const sharp = require('sharp');



sharp('input.jpg')

  .webp({ quality: 85, lossless: false })

  .toFile('output.webp');

重点是quality参数，移动端建议设为85以上，lossless设为false即可，不要盲目追求压缩率。如果图片中有文字或图标，WebP的有损压缩会对边缘做平滑处理，造成锯齿感。这时候可以考虑用PNG格式或者开启sharp的effort参数提升压缩质量。

另外iOS系统对WebP兼容性比安卓差，有些老版本系统根本不支持。建议后端加个UA判断，对iOS设备返回PNG格式，或者前端JS检测User-Agent再决定是否替换为WebP：

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

if (!isIOS) {

  document.querySelectorAll('img').forEach(img => {

    const src = img.src.replace(/.(jpe?g|png)$/, '.webp');

    img.src = src;

  });

}

2026-02-06 07:00