如何让网站图片加载更快
按效果大小排序，五个能减轻任何网站图片体积的改动。
在大多数网站上，图片占了访客下载内容的绝大部分。一张未经优化的手机照片，可能比页面其余部分加起来还要大。优化图片通常是成本最低、效果最明显的提速手段，而更快的页面排名更好，访客停留更久，转化率也更高。
1. 按显示尺寸上传图片
手机直接拍出来的照片宽度通常在 4000 像素以上。而网站的内容栏很少超过 1200 像素宽，卡片或缩略图更小。多出来的每一个像素都会被下载，然后被浏览器丢掉。上传前先调整尺寸：通栏横幅大约 2000 像素宽（以便在高分辨率屏幕上保持清晰），正文图片 1200 到 1600 像素，卡片 600 到 800 像素。调整尺寸工具可以一次处理整个文件夹。
2. 压缩
尺寸合适之后，剩下的交给压缩。在网页上，质量 80 保存的照片和质量 100 的看起来没有区别，体积却往往只有三分之一。图片压缩工具支持批量处理，并显示每个文件节省了多少空间。
3. 使用 WebP
所有主流浏览器都支持 WebP。在视觉质量相同的情况下，它通常比 JPG 小 25% 到 35%，而且支持透明背景，所以也能替代很多 PNG。可以用 JPG 转 WebP 或 PNG 转 WebP 进行转换。AVIF 的体积还要更小，但编码更慢，各种上传系统对它的支持也没那么普遍，所以 WebP 是更实际的默认选择。
4. 根据内容选择合适的格式
| 内容 | 最佳格式 |
|---|---|
| 照片 | WebP，不支持 WebP 的地方用 JPG |
| Logo 和图标 | 有 SVG 就用 SVG，否则用 PNG 或 WebP |
| 带文字的截图 | PNG 或无损 WebP |
| 简单动画 | 用短视频代替 GIF |
5. 帮助浏览器合理加载
- 延迟加载。首屏以下的图片应该在访客滚动到附近时才加载。大多数建站平台会自动处理；如果是纯 HTML，就给首屏不可见的 img 标签加上 loading="lazy"。
- 尺寸属性。给每张图片设置 width 和 height，这样页面不会随着图片加载而跳来跳去。布局偏移是 Google 核心网页指标（Core Web Vitals）之一。
- 主图优先。页面顶部的大图通常就是最大内容绘制（LCP）元素，它绝不应该延迟加载，而应尽早加载。
效果有多明显
一个放了十张手机原图的普通页面可能有 30 MB。调整到合理宽度并压缩后，同一个页面通常只有 2 MB 左右；再转换成 WebP，大约 1.4 MB。在移动网络下，这就是一秒内打开和让很多访客直接离开的区别。
检查优化效果
Google 的 PageSpeed Insights 和 Chrome 开发者工具中的 Lighthouse 面板，都会列出尺寸过大的图片、应该改用 WebP 的图片以及最大内容绘制元素。优化前后各运行一次，并优先处理流量最大的页面。