教程 · 图片处理
图片转 WebP 体积反而变大：先看内容类型再选格式
按照片、截图、透明图三类内容分别选择 WebP、PNG 或 JPG，避免转格式后体积不降反升。
前置：有一批待上线的图片，知道图片最终在网页还是 App 里展示。
材料：原始图片、Squoosh 网页版、MarkKit 图片批量压缩、浏览器兼容性检查
材料：原始图片、Squoosh 网页版、MarkKit 图片批量压缩、浏览器兼容性检查
步骤
1. 按内容给图片分类
把图片分成照片、界面截图、带透明的图标三类；照片适合有损压缩，截图和图标适合无损，分类之后再谈格式，混在一起处理必然有一类会变大。
2. 照片先试 WebP 75
照片转 WebP 时质量从 75 起步，和原 JPG 同尺寸对比体积；如果原图已经是高质量 JPG，转完可能只小一点甚至变大，这时直接沿用原图更划算。
3. 截图和图标留 PNG
界面截图、纯色图标、带文字的图优先保留 PNG，或转 WebP 无损模式；有损压缩会在文字边缘产生彩色噪点，这类图省下的体积不值得牺牲清晰度。
4. 统一尺寸再比体积
对比格式时先保证长宽一致，否则体积差异可能来自尺寸而不是格式；把同一张图分别导出三种格式，记录体积和放大后的画质，再决定用哪个。
5. 确认兼容再上线
确认目标浏览器和平台支持所选格式，必要时保留 JPG 或 PNG 作为回退；格式再先进，用户打不开就是零，上线前用真实设备看一次。
做完检查
- 同尺寸下新格式体积确实更小
- 文字和线条边缘没有彩色噪点
- 目标浏览器能正常显示所选格式
常见错误
- 不分类一律转 WebP，截图反而变大
- 质量设到 100，体积比原图还大
- 转完格式又压缩一次，画质双重损失
相关工具
同类教程
商品图压到 200KB 还不糊：先改尺寸还是先降质量
学会先缩尺寸再降质量的两段式压缩，把商品图稳定压到 200KB 以内且文字边缘仍然可读。
查看 →手机拍的白底商品图发灰：先调曝光还是先校白平衡
判断发灰是曝光不足还是色温偏移，用曝光、白平衡和曲线三步把背景拉回干净的白底。
查看 →头像换底色后边缘一圈白边：先查来源再决定收缩还是描边
定位白边来自背景残留还是羽化过度，用容差、收缩选区和深色底验收三步把头像是边缘处理干净。
查看 →更新时间：2026-10-29 · 平台规则/软件版本会变；操作前保留原件，以实际页面为准。
跨库学习路径
按共同关键词匹配，不是随机推荐；从任务到提示词/教程/项目继续走。