网页图片优化：像素、格式与加载速度的关系
区分图片尺寸与文件体积，理解响应式图片、布局稳定性和替代文字，为网站准备合适的配图。
说明示例，用于理解规则；不是去水印效果或性能实测。
| 显示宽度 | 1倍像素密度示例 | 2倍像素密度示例 |
|---|---|---|
| 400 CSS px | 400 px | 800 px |
| 800 CSS px | 800 px | 1600 px |
| 1200 CSS px | 1200 px | 2400 px |
从实际展示位置开始
一张只显示为小卡片的照片通常不需要以相机原始尺寸发送。先测量页面中的显示宽度，再考虑高像素密度屏幕的需要。例如宽 600 CSS 像素的容器可比较 600 和 1200 像素素材，但不能只因屏幕较清晰就无限增加尺寸。本站压缩可选择最长边预设等比缩小；需要其他精确像素规格时，应先用对应尺寸工具准备。
比较格式，不套用固定结论
WebP 对许多网页照片有帮助，但某张已经优化的 JPEG 仍可能更小。透明素材还需要保留 alpha 通道；转 JPEG 会失去透明度。准备候选后记录文件体积，并在实际浏览器中检查呈现。格式选择也应遵守内容管理系统与目标客户端的支持范围。
文件以外，还有页面的加载方式
网站开发者可以使用 srcset 与 sizes 按展示宽度选择资源，并设置 width 和 height 或 aspect-ratio 预留布局空间。首屏关键图片与页面下方配图的加载优先级不同，不能把所有图片都延迟加载。压缩工具只提供文件，无法替你修改页面 HTML、缓存策略或服务器响应。
图片 SEO 不只是文件名
使用能说明内容的文件名，并为承载信息的图片编写准确的替代文字；纯装饰图片可使用空 alt。不要把关键词重复塞进 alt。优化后用浏览器网络面板检查实际传输大小，再测量页面表现；图片变小不保证某个性能分数、搜索排名或收录时间。
检查清单
- 按展示尺寸准备素材，区分 CSS 像素和源图像素
- 保留布局空间，并检查实际请求的图片版本
- 写准确的替代文字，实测性能而非承诺排名
把方法用到你的图片上
选择图片工具还需要调整其他地方？保存结果后，再打开对应工具。