一张未优化的主图可能比整个网页的HTML、CSS和JavaScript加起来还重。图片占平均网页总字节数的约50%，是你改善性能的最大杠杆。然而图片优化仍然是网页开发和内容创作中最被误解的方面之一。
影响远不止加载速度。图片大小影响你的搜索排名、托管费用、用户的数据套餐，甚至转化率。
性能关联：Core Web Vitals与LCP
Google的Core Web Vitals是直接影响搜索排名的一组指标。其中**最大内容绘制（LCP）**衡量屏幕上最大可见元素渲染所需的时间。大多数情况下，该元素是一张图片。
Google认为2.5秒以下的LCP为"良好"。2.5至4秒为"需要改进"。4秒以上为"差"。在标准连接上，3MB的主图很容易将LCP推过4秒阈值，把整个页面拖入"差"类别。
后果是实实在在的：
- SEO排名下降 — Core Web Vitals是排名信号；慢页面失去位置
- 更高的跳出率 — 53%的移动访客在页面加载超过3秒时离开
- 更低的转化率 — 加载时间每增加1秒，转化率大约降低7%
100KB经验法则 网页内容图片应以每张100KB以下为目标。全宽主图应控制在200KB以下。使用现代格式和适当压缩，这些目标无需任何可见质量损失即可实现。
有损与无损：理解权衡
所有图片压缩分为两类，选错会导致文件臃肿。
无损压缩通过找到更高效的方式编码相同数据来减小文件大小。每个像素都被精确保留。减少幅度适中——通常10-30%。PNG使用无损压缩。
有损压缩丢弃人眼不太可能注意到的信息。渐变中的色彩精度、精细纹理细节和微妙的色调变化被简化。减少幅度显著——通常70-90%。JPEG和WebP（有损模式）使用这种方法。
关键洞察是：质量80-85%的有损压缩对于照片来说与原图在视觉上无法区分。感知差异基本为零，但文件大小差异巨大。
| 方法 | 大小减少 | 质量损失 | 最佳用途 |
|---|---|---|---|
| 无损（PNG） | 10-30% | 无 | 标志、截图、文字密集的图形 |
| 有损85%（JPEG/WebP） | 70-85% | 不可感知 | 照片、插图、背景 |
| 有损60%（JPEG/WebP） | 85-95% | 近看可察觉 | 缩略图、装饰性图片 |
许多人犯的错误是对照片内容使用无损压缩，或对重要视觉素材使用质量过低的有损压缩。理解哪些图片需要哪种处理是有效优化的关键。
格式很重要：同一张图片，截然不同的大小
图片格式的选择与压缩级别一样重要。以PNG保存的照片可能比以85%质量JPEG保存的同一图片大5到10倍——没有可感知的差别。
JPEG仍然是照片的通用标准。到处都支持，对照片内容提供出色的有损压缩。
WebP在同等视觉质量下提供比JPEG小25-35%的文件，还额外支持透明度。所有现代浏览器都支持它。是当今网络最佳的通用格式。
AVIF是最新的竞争者，提供比WebP更好的压缩（约小20%），但浏览器支持和编码速度仍在追赶中。
PNG仅在需要精确像素再现的图片中是正确选择——标志、图标、包含文字的截图，或WebP不可用时需要透明度的图片。
带宽和存储：隐藏成本
对于个人博客和小型网站，带宽成本可能看似微不足道。但它会快速增长：
- 一个包含2MB图片的页面每月浏览10,000次，每月传输20GB图片数据
- 将图片优化到总共400KB，则只传输4GB——减少80%
- 对于按量计费的托管，这直接转化为更低的账单
存储也会累积。一个有5,000个产品、每个4张未优化图片（每张2MB）的电商网站，仅产品照片就使用40GB。优化到每张200KB后降至4GB。
响应式图片和设备问题
在375像素宽的手机屏幕上显示1920像素宽的图片，浪费了超过96%的像素。浏览器下载完整图片，然后丢弃大部分数据以适应屏幕。
解决方案是响应式图片——向不同设备提供不同大小的图片。移动访客接收400px宽的图片；桌面访客接收1200px宽的版本。
懒加载：不要下载看不见的内容
首屏以下的图片——不滚动就看不到的图片——不需要立即加载。懒加载将它们的下载延迟到用户滚动到附近时。
现代浏览器用单个HTML属性就能支持原生懒加载。这是最简单、最有效的优化之一。
CDN：从边缘提供图片
内容分发网络将图片副本存储在分布全球的服务器上。东京的访客从附近的服务器获取图片，而不是你在巴黎的源服务器。这降低了延迟、改善了加载时间，并减轻了基础设施的负载。
许多现代CDN还提供即时图片转换——自动转换为WebP、为不同设备调整大小、应用最优压缩，全部无需你触碰原始文件。
进一步了解
图片优化是一个小改进会累积成显著结果的领域。如果你想实验压缩级别并实时查看质量与大小的权衡，toolk.io提供了一个在浏览器中处理一切的图片压缩器。图片压缩和格式转换的教程也可在网站上找到。