1) 理解图像压缩
图像压缩减小文件大小以加快加载速度并节省存储空间。有两种类型:有损(丢弃数据)和无损(保留所有数据)。
2) 有损压缩
有损压缩通过删除人眼难以察觉的数据来减小大小。JPEG和WebP(有损模式)使用此方法。质量设置控制压缩级别。
3) 无损压缩
无损压缩减小大小而不会丢失任何数据。PNG和WebP(无损模式)支持此功能。适合需要精确像素的图像,如徽标和图表。
4) 选择正确的格式
照片:JPEG或WebP(有损)。需要透明度的图形:PNG或WebP(无损)。徽标:SVG或PNG。
5) 质量设置
JPEG:75-90%获得良好平衡。WebP:75-85%提供出色的结果。PNG:使用压缩级别6-9。
6) 优化工具
在线工具:Orqui优化器、TinyPNG、Squoosh。离线工具:ImageOptim、GIMP、Photoshop。命令行:ImageMagick、cwebp、pngquant。
7) 优化技术
- 在上传前调整图像大小以匹配显示尺寸
- 删除EXIF元数据
- 使用渐进式JPEG进行大图像
- 为现代浏览器提供WebP
- 为旧浏览器实现后备
8) 测量结果
使用Lighthouse、PageSpeed Insights或WebPageTest测试页面性能。目标:LCP < 2.5s,图像大小减少50-70%。