网站上线前图片压缩检查清单

网站上线前，图片压缩是提升加载速度和用户体验的关键步骤。未经压缩的图片会导致页面卡顿、跳出率升高，甚至影响搜索引擎对网站的评价。本清单梳理了图片压缩的核心检查项，帮助你在上线前逐一核对，确保每一张图片都“轻装上阵”。

1. 确认图片格式是否合理

不同的图片格式适用于不同场景。通常，照片和复杂渐变图使用JPEG，图标、logo和简单图形使用PNG-8或SVG，需要动画或透明背景但文件较小时考虑WebP。避免使用BMP或TIFF这类未压缩格式。检查清单：

• 照片类图片是否已转为JPEG或WebP？
• 图标和装饰性元素是否用了SVG（可缩放矢量图形）？
• PNG图片是否检查过色彩深度（8位/24位）？
• 是否考虑使用WebP格式（现代浏览器支持）？

2. 控制图片原始尺寸

上传的图片尺寸应与实际显示尺寸匹配，而不是依赖HTML或CSS缩小。例如，展示区宽度为800px，就无需上传4000px宽的图片。检查清单：

• 每张图片的最大宽度是否不超过布局容器的宽度？
• 图片高度是否自适应或固定，避免拉伸变形？
• 是否使用了响应式图片（srcset属性）为不同设备提供合适尺寸？

3. 选择合适的压缩工具

压缩工具分为有损和无损两种。有损压缩（如TinyPNG）可大幅减小文件大小，但肉眼几乎看不出差异；无损压缩（如ImageOptim）不损失画质，但压缩率较低。建议先尝试75%-85%质量的有损压缩，若效果不明显再切换。常用的工具有：

• 在线工具：TinyPNG、Compressor.io、Squoosh
• 本地软件：ImageOptim、RIOT、Photoshop“存储为Web所用格式”
• 构建工具：imagemin（配合Webpack等）

4. 保持画质与文件大小的平衡

压缩过度会出现锯齿、色块或模糊，影响品牌形象。建议在压缩后通过预览对比原图和压缩图，重点检查文字、边缘和渐变区域。一般情况下，JPEG质量设置在70%-85%之间，WebP质量设置在80%左右，PNG-8保持256色以内。检查清单：

• 关键图片（如产品主图）是否单独检查画质？
• 压缩后文件大小是否控制在合理范围（通常200KB以内，装饰图更小）？
• 是否存在明显压缩痕迹？

5. 批量处理与命名规范

如果网站图片数量较多，不要手动一张张压缩，应使用批量处理功能或自动化脚本。同时，图片文件名应包含描述性关键词（如“blue-tshirt-front.jpg”），而非“IMG_001.jpg”。这有助于搜索引擎理解图片内容。检查清单：

• 是否使用批量压缩（如TinyPNG同时上传多张图片）？
• 图片文件名是否已统一规范（小写字母、连词号分隔、含关键词）？
• 是否已生成不同分辨率的备选图片（用于Retina屏幕）？

6. 验证压缩后的加载速度

压缩完成后，建议在测试环境使用工具（如Google PageSpeed Insights、GTmetrix）检查图片加载情况。重点关注“避免未压缩的图片”和“使用适当格式的图片”等建议。检查清单：

• 图片加载是否占用了页面总大小的比例过高？
• 是否有图片未启用懒加载（延迟加载）？
• 移动端图片的尺寸是否已适配？