图像处理组合：压缩、转换、嵌入一站式工作流

图片通常是网页里最重的资源。一张手机直出、未压缩的照片就有 4-6 MB，比整个 HTML、CSS、JavaScript 加起来还大。好消息是：你不需要专业设计软件，用三四个浏览器工具、一套固定流程，就能把图片从「大得传不上去」变成「手机秒开」。

第一步：先定尺寸，再动文件

多数人是先压缩，结果发现图片明明只显示 800 像素宽，文件里却还是 3000 像素。正确顺序是：先缩尺寸，再压体积。经验值：全宽主图约 1600-1920 像素，正文插图约 1200 像素，缩略图约 400 像素。先缩放再压缩，通常能直接省掉 60-80% 体积，肉眼还看不出差别。

第二步：格式选对，而不只是体积更小

照片和截图默认用 WebP 最稳：现在所有主流浏览器都支持，体积通常比同画质 JPEG 小 25-35%。要用在老旧邮件客户端或老式后台上传时，保留 JPEG。只有需要透明背景或线条极其锐利的图形时才用 PNG——用 PNG 存照片，体积往往比 WebP 大好几倍。

第三步：压缩、转换、嵌入，一次走完

1. 用浏览器本地压缩工具过一遍，对比前后体积。文章内插图建议压到 200 KB 以内，全宽主图控制在 350 KB 以内。
2. 要换格式，就从压缩后的原图转换，不要拿一张已经掉过画质的 JPEG 二次压缩。
3. 截图里有仪表盘、图表、代码这类必须保持锐利的内容时，先导出 PNG；工具支持的话，再用无损模式转成 WebP。
4. 图片要塞进邮件模板、后台字段或 JSON 数据里时，转成 Base64；需要归档或打印多张图时，合并成一个 PDF。

几个悄悄拖慢网站的常见错误

• 上传 4000 像素大图，靠 CSS 缩小显示。浏览器依然会下载全部像素。
• 对 JPEG 反复保存两三次。每一次都会永久丢失细节，文件还可能更大。
• 因为「无损」就用 PNG 存照片。这种用不上的精度，花的是访客的真实流量。
• 忘记写描述性 alt 和明确的宽高，导致页面加载时布局跳动。
• 手机直出原图上传，然后困惑为什么移动端访客流失。

这套流程优先用在哪里

先从流量最高的页面动手：首页主图、排名前三的产品或工具截图、以及你最希望被搜到的页面里的每一张图。这些文件被下载的次数最多，通常也是优化最差的——因为它们上线早、后期没人回头改。整套做一遍，页面总重量往往能砍掉一半以上，同时改善搜索引擎当作排名信号的 LCP 指标。