网页图像优化：完整指南
2026-05-09
调整图像大小
页面加载缓慢会导致转化。研究表明，40% 的用户会放弃访问时间超过 3 秒的网站。最大的原因是什么？未优化的图像。即使在快速连接的情况下，主页上的单张 5 MB 照片也会导致加载时间激增。
图像优化清单
- 正确尺寸 - 不要在显示 800 像素的地方发送 4000 像素的图像
- 正确格式 — 现代 WebP/AVIF，后备 JPG/PNG
- 正确压缩 - 照片质量为 75–85%，图形无损
- 正确交付 — 延迟加载、响应式 srcset
2026 年建议尺寸
- 英雄图片：最大 1920×1080（全高清）或 2560×1440 (2K)
- 博客文章英雄：1200×675 (16:9)
- 产品照片：1500×1500，支持缩放，默认显示 800×800
- 头像：256×256（缩略图将缩小）
- 开放图谱（社交分享）：1200×630
- 网站图标：32×32、192×192、512×512 PNG
上传前使用我们的图像调整大小工具将照片调整为这些尺寸。
格式：何时使用什么
- WebP： 95% 的网络图像的默认设置。同等质量下比 JPG 小 25–35%。通用浏览器支持。
- AVIF：甚至更小（比 JPG 小 50%）。用于英雄图像。较新的浏览器支持它。
- JPG：不透明的照片。出色的兼容性。
- PNG：徽标、屏幕截图、任何具有透明度的内容。无损。
- SVG：矢量图形、图标、简单插图。文件很小，无限缩放。
使用 PDF7 图像转换在这些格式之间进行转换。
压缩：多激进才算太激进？
对于照片：从 85% 质量开始。对于带宽关键型页面，下降至 75%。低于 70%，伪影变得可见。使用我们的图像压缩工具找到合适的平衡点。
带有 srcset 的响应式图像
不要向手机提供 2K 图像。使用 HTML 的 srcset 属性：
浏览器会选择适合的最小图像。每张图片需要 3 种尺寸。
延迟加载
将 loading="lazy" 添加到首屏下方的所有图像。现代浏览器只有在用户滚动到附近时才会加载它们，从而在每次页面加载时节省带宽。
100KB 规则
目标是 100KB 以下的单个图像。英雄图像可以扩展到 200KB。如果单张照片超过 500KB，那么您就搞砸了 - 重新调整大小并重新压缩。