📅 2026-06-03 · 阅读时间约 5 分钟
网站加载速度直接影响用户体验和搜索引擎排名。Google 数据显示，页面加载超过 3 秒会导致 53% 的移动用户放弃访问。而图片通常占网页总大小的 60%-80%，是优化加载速度最有效的突破口。
照片用 JPG、图标和截图用 PNG（或更好的 WebP）、简单图形用 SVG。错误选择格式可能让图片体积增加 5-10 倍——比如用 PNG 保存照片，一张 200KB 的 JPG 可能变成 2MB 的 PNG。这是因为 PNG 是无损压缩，而照片中大量的渐变色会让 PNG 体积暴增。
不要上传 4000px 宽的原始照片然后在 HTML 中缩小到 800px 显示。在上传前先用图片缩放工具将尺寸调整到实际显示尺寸。一张 4000×3000 的照片缩小到 800×600 后，体积可从 3MB 降到 150KB。响应式图片建议准备 3 个尺寸：480px（手机）、800px（平板）、1200px（桌面）。
JPG 质量设置在 70-85 时，肉眼基本看不出画质变化，但体积可减少 50%-70%。对于电商产品图（需要展示细节），可用 80-85；对于博客背景图（氛围装饰），降到 60-70 也完全 OK。建议用图片压缩工具对比压缩前后的效果再做决定。
WebP 是 Google 推出的现代图片格式，在同等画质下比 JPG 小 25%-35%、比 PNG 小 26%-50%。目前 Chrome、Firefox、Edge、Safari 均已支持。使用图片格式转换工具将存量图片批量转为 WebP，再配合 <picture> 标签为不支持的浏览器提供 fallback。
总结：优化完图片后，用浏览器开发者工具的 Network 标签查看加载时间对比，你会发现页面的 DOMContentLoaded 时间减少了 1-2 秒。