完整的图片优化管道
从超大原图到可上线的网页资源——一个真正能节省带宽的逐步图片优化工作流。
设计师递给你一张从Photoshop直接导出的4000x3000 PNG。8MB。你的网页需要它是800px宽、100KB以下，最好还是WebP格式。
"你手上有的"和"网页需要的"之间的差距，就是大多数开发者浪费时间的地方。让我们用一条正经的管道来解决它。
第1步：调整到目标尺寸
文件大小最大的降幅来自调整尺寸。一张4000px宽的图片以800px显示，浪费了96%的像素。这不是夸张——这是数学。
对于Retina屏幕，取显示尺寸的2倍。所以如果图片在屏幕上以400px渲染，就调整到800px。不是4000px。不是原图。
典型节省：4000x3000（8MB）→ 800x600（400KB）。光靠调整尺寸就减少了95%。
第2步：压缩但不损失可见质量
调整尺寸之后，进行压缩。对于照片，JPEG质量在75-85%之间是最佳平衡点——视觉上和原图一模一样，文件却小很多。
关键是找到压缩伪影变得可见的阈值。对于大多数照片，这个阈值大约在70%左右。保持在它之上，没人能在不放大的情况下看出区别。
典型节省：400KB → 120KB（80%质量）。你用户的眼睛不会注意到。但加载时间会。
第3步：转换为现代格式
JPEG和PNG已经存在很久了。WebP在相同质量下文件小25-35%。AVIF压缩效果更进一步。
实用的做法：
- 照片：转为WebP（广泛支持）或AVIF（最佳压缩）
- 截图/图形：WebP或PNG，取决于是否需要透明度
- 图标/Logo：尽可能保持SVG格式
使用<picture>元素来提供WebP并以JPEG作为降级方案。WebP的浏览器支持率现在已经超过97%了，但降级方案不花什么成本。
第4步：优化你的SVG
设计工具导出的SVG文件带着一堆累赘——编辑器元数据、不必要的小数精度、冗余的分组、不可见的元素。典型的Illustrator SVG有30-50%是多余的。
用SVG优化器处理一下，看着文件大小骤降。一个15KB的图标变成5KB。乘以你页面上的20个图标，你就省了200KB的标记。
第5步：小资源用Base64
对于非常小的图片（2KB以下）——比如图标、列表标记、微小的装饰元素——转换为Base64并内联嵌入可以完全省掉一个HTTP请求。
少一个请求 > HTML文件稍微大一点。但仅限于小图片。CSS里一个50KB的Base64字符串比单独请求还糟糕。
经验法则：2KB以下？Base64。超过2KB？单独文件。
真实数据：一个案例
起点：商品分类页上的12张产品图片。
| 阶段 | 总大小 | 节省 | |------|--------|------| | 原始PNG | 45 MB | — | | 调整尺寸后（800px） | 2.1 MB | 95.3% | | 压缩后（80%） | 680 KB | 98.5% | | WebP转换后 | 450 KB | 99.0% |
45MB降到450KB。视觉质量一样。页面加载从12秒变成1.2秒。
管道实践
对于一批图片，工作流变成机械操作：
做过三次之后，一整页的图片五分钟就能搞定。
别忘了：懒加载
优化不止于文件大小。给首屏以下的图片加上loading="lazy"。浏览器在用户滚动到附近之前根本不会下载它们。免费的性能提升。
图片优化不光鲜。没人会写博客说自己有多兴奋压缩了JPEG。但它是大多数网站能做的影响最大的单项性能改进。更小的图片意味着更快的页面、更满意的用户和更低的带宽成本。每张图片上线之前都过一遍这个管道。