为什么图像主导着页面体积
一个带 CSS 和 JavaScript 的典型 HTML 文档可能传输 200–500 KB。一张未优化的照片可以是 5–15 MB。在平均 10–20 Mbps 的移动连接上，一张 10 MB 的图像需要 4–8 秒下载。大多数访客不会等。
图像还影响 Core Web Vitals——Google 用于影响搜索排名的页面体验指标。Largest Contentful Paint（LCP）衡量最大的可见元素渲染所需的时间。如果那个元素是一张主图，它的下载时间就直接决定你的 LCP 分数。慢的 LCP 同时损害用户体验和搜索排名。
常见的嫌疑者，以及各自的解决
图像加载缓慢几乎总是归结到其中之一。每个都有一个快速的解决和有意义的回报：
| 原因 | 解决 | 典型节省 |
|---|---|---|
| 格式错误（PNG 照片） | 转换为 WebP 或 JPG | 80% 或更多 |
| 整分辨率上传 | 调整到约 2 倍的显示宽度 | 70–80% |
| 压缩薄弱或被跳过 | 以质量 75–85 导出 | 相对质量 95 为 3–5 倍 |
| 无延迟加载 | 在折叠以下添加 loading=lazy | 首次加载数据更少 |
| HEIC 未转换就提供 | 先转换为 WebP 或 JPG | 避免损坏的图像 |
内容类型用错了格式
给照片用 PNG 是网络上最常见的图像错误之一。PNG 是无损的并保留每个像素，这对标志和截图重要，但对照片不重要。一张存为 PNG 的照片可以是 15–25 MB。同一张照片存为高质量 JPEG 是 2–5 MB。存为 WebP 可以在相同可见质量下低于 2 MB。
反过来也是错误：给截图、图表或带文字的图像用 JPEG。JPEG 在硬边缘和平涂色区域引入可见伪影，需要高质量设置而产生大文件。PNG 或 WebP 把这类内容处理得更小更干净。
以完整相机分辨率上传图像
一张现代智能手机的照片是 12–50 兆像素、宽 3000–8000 像素。大多数网页以 600–1600 像素宽显示内容图像。当你把完整分辨率的相机文件上传到你的网站时，浏览器下载全部 8000 像素并把它缩放到 800 像素来显示。你传输的数据是所需的 10 倍。
在上传前把图像调整到它将被显示的最大宽度——高密度屏幕约为 CSS 显示宽度的两倍——往往是单独可用的最大的大小缩减。一张 4000 像素的图像调整到 1600 像素，通常在应用任何质量压缩之前就小 70–80%。
跳过压缩或使用错误的质量设置
许多内容管理系统在没有压缩的情况下接受并存储上传的图像。WordPress、Squarespace、Shopify 和类似平台可能默认施加一些压缩，但设置各异且往往保守。上传的原图可能远大于所需。
对 JPEG 和 WebP，质量 75–85 对大多数显示在网页上的照片是合适的。低于 75，压缩伪影变得可见。高于 85，文件大小显著增加而视觉改善递减。许多开发者默认用质量 95 或 100，这产生比质量 80 大 3–5 倍的文件，而在正常查看尺寸下没有可见差别。
折叠以下的图像没有延迟加载
默认情况下，浏览器会在初始渲染期间尝试加载页面上的所有图像，包括远在可见区域（折叠）以下的图像。对一个有 10 张图像的长文章页面，即使读者可能永远不会滚动到看见大多数，浏览器也会尝试同时下载全部 10 张。
<img> 标签上的 loading="lazy" 属性指示浏览器把图像的加载推迟到它即将进入视口，这显著减少首次页面加载所传输的数据。把它应用到第一个视口中不可见的所有图像。不要把它应用到主图或折叠以上的任何图像——那些需要为良好的 LCP 分数尽快加载。
尤其对主图，添加 fetchpriority="high" 让浏览器先于脚本和其他图像获取它。每页只在一张图像——LCP 元素——上使用它，其余保持默认。
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
缺少 width 和 height 属性
当浏览器开始渲染一个页面时，它还不知道尚未下载的图像的尺寸。HTML 中没有明确的 width 和 height 属性，浏览器就无法预留正确的空间，页面布局会在图像加载时移动——一种被称为 Cumulative Layout Shift（CLS）的刺眼的视觉跳动。添加明确的尺寸可防止布局移动，并让浏览器在不等待图像下载的情况下开始布局：
<img src="photo.webp" width="800" height="533" alt="description" />
直接上传 HEIC 或不寻常的格式
iPhone 默认以 HEIC 拍摄。如果 HEIC 文件被上传到网站并未经转换就提供，它们将在 Chrome、Firefox 和 Edge 中显示失败。Windows 和 Android 上的访客看到一个损坏图像图标。发布前务必把 HEIC 转换为 JPEG 或 WebP。
一份实用的优化清单
PhotoTools 在你的浏览器中处理格式转换、调整尺寸和压缩步骤，不向服务器上传任何东西。上传前先处理图像以保持你的页面快速，并过一遍这份清单：
- 照片和大多数网页图像用 WebP。带文字或透明的图形用 PNG。
- 把图像调整到它实际会显示的最大宽度——视网膜屏幕约为 CSS 显示宽度的 2 倍。
- 标准网页图像把 JPEG 和 WebP 以质量 75–85 压缩。
- 给折叠以下的所有图像添加 loading="lazy"。
- 给所有图像添加明确的 width 和 height 属性。
- 上传前把 HEIC 文件转换为 JPEG 或 WebP。
- 验证最终文件大小：以 800 CSS 像素宽显示的网页图像在大多数情况下应低于 200 KB。