网站上超过一半的下载体积通常来自图片。处理好图片，速度和观感能同时改善——这是性价比最高的一项优化。
一、尺寸怎么定
图片的显示尺寸由 CSS 决定，所以上传尺寸按显示尺寸的 2 倍准备就够（适配高分屏）。
| 位置 | 显示宽度（参考） | 建议上传宽度 |
|---|---|---|
| 首屏大图 | 1200px | 2400px |
| 栏目头图 | 1200px | 1600～2400px |
| 列表缩略图 | 400px | 800px |
| 产品详情图 | 800px | 1600px |
| 页脚 logo | 150px | 300px |
二、格式怎么选
- 照片、实景图 → JPEG 或 WebP，两者都是压缩比高的位图格式
- 图标、logo、线框图 → PNG 或 SVG。SVG 是矢量，放大不糊，体积还小
- 需要透明背景 → PNG 或 WebP（JPEG 不支持透明）
- 动图 → 小尺寸用 WebP，大尺寸考虑用视频代替 GIF
提醒：WebP 的体积通常比同画质的 JPEG 小 25%～35%，主流浏览器都支持。如果网站可以自由上传，优先用 WebP。
三、压缩压到什么程度
压缩就是拿画质换体积。经验值：照片类压到质量 75%～85%，肉眼基本看不出差别；带文字的截图压得太狠会发虚，这类图应改用 PNG 或直接做成文字。
- 照片压到 80% 左右，体积通常能降到原来的 40%～60%
- 对比压缩前后各放大看一次，确认文字和边缘没有明显发虚
- 不要反复压缩同一张图：每次都会有损失，要从原图重压
- 保留一份原图归档，改版时重新生成尺寸
四、几个容易忽略的细节
- 图片要有 alt 文字：既是无障碍要求，也是搜索能读到的信息
- 懒加载：首屏之外的图片延迟加载，首屏会明显更快
- 长图不要当正文用：把文字印在图里，改一个字就要重做图，而且搜索读不到
- 统一尺寸比例：列表里图片高矮不一会让页面显得杂乱
五、批量处理的做法
几十张图不要一张张改。常见的图像处理工具都支持批量：统一缩放到指定宽度 + 指定格式 + 指定质量。一次设置好，之后每批新图都照这个来。