你的图片可能太大了（这里教你怎么修复）

上周我给朋友的摄影作品集网站做了审计。图片很美。作品很棒。

首页加载用了12秒。

罪魁祸首？一张8MB的首屏图片。在手机网络上，访客还没看到任何东西就走了。

这种情况比你想象的更常见。所以我们来聊聊怎么解决。

没人注意到的问题

当你从Photoshop或手机导出图片时，它通常比需要的大得多。相机直出的4000x3000照片可能有15MB。

对于网站，你很少需要超过200KB的东西——有时更少。

差异很重要：

| 图片大小 | 加载时间（3G） | 加载时间（4G） | |----------|----------------|----------------| | 5MB | 40+秒 | 8秒 | | 500KB | 4秒 | 1秒以内 | | 100KB | 1秒以内 | 瞬间 |

那个5MB的图片不只是慢——它还在吃访客的流量套餐。

步骤1：先调整大小

在压缩任何东西之前，检查尺寸。

如果你的网站以800像素宽显示图片，上传4000像素的原图就没意义。你发送的数据是需要的5倍。

算出你的图片会显示的最大尺寸（在桌面上检查——通常是最大的），然后调整到那个宽度。如果你想要，可以添加大约20%的缓冲用于视网膜屏。

步骤2：压缩它

现在你的图片是正确的大小了，压缩它。

现代压缩算法出奇地好。你通常可以减少60-80%的文件大小而没有可见的质量损失。真的——把前后并排放在一起，试着找出区别。

几件要知道的事：

JPEG质量80-85通常是最佳点。低于70，你开始看到伪影。高于90，你在为看不见的改进浪费字节。

PNG是无损的，所以压缩得少。但仍然值得通过压缩器运行以去除元数据和优化编码。

WebP给你两全其美——比JPEG文件更小，同时像PNG一样支持透明度。现在大多数浏览器都支持它。

步骤3：选择正确的格式

这比人们意识到的更重要。

使用JPEG：

• 照片
• 有大量颜色和渐变的图片
• 背景

使用PNG：

• Logo
• 图标
• 截图
• 任何需要透明度的东西

使用WebP：

• 所有东西，如果你的受众使用现代浏览器
• 为旧浏览器降级到JPEG/PNG

使用SVG：

• 简单图形
• 图标
• Logo（如果你有矢量文件）
• 任何需要无限缩放的东西

真实数字

这是我优化朋友的作品集后发生的事：

| 之前 | 之后 | |------|------| | 首屏图片：8MB | 首屏图片：180KB | | 缩略图网格：总计12MB | 缩略图网格：总计400KB | | 页面加载：12秒 | 页面加载：1.8秒 |

相同的图片。相同的视觉质量。只是正确优化了。

懒人方法

如果你要上传到WordPress、Squarespace或类似平台，它们通常会自动压缩图片。但"通常"不是"总是"，而且它们的压缩并不总是足够激进。

更好的方法：上传前优化。你控制质量，而且你不依赖平台决定做什么。

每张图片花2分钟。你的访客会感谢你——即使他们永远不知道为什么你的网站感觉快。

快速检查清单

上传任何图片之前：

1. 尺寸对吗？ 当你需要800px时不要上传4000px
2. 压缩了吗？ 通过压缩器运行它
3. 格式对吗？ 照片用JPEG，图形用PNG，可能的话用WebP
4. 测试了吗？ 看看最终版本。如果看起来不好，降低压缩程度

---

网站速度主要是关于图片的。修复图片，你就修复了一半的性能问题。其他都是边际优化。

先从最大的图片开始。通常是首屏横幅和全宽照片。这些给你最少的努力带来最大的收益。