一、为什么需要移动端图片检查清单
移动端用户对页面加载速度和视觉体验要求更高。一张未优化的图片可能导致页面变慢、布局错乱，甚至影响用户留存。因此，制作一份移动端图片检查清单，能够帮助网站制作和维护人员在日常工作中系统地检查图片问题，减少遗漏。
二、检查清单的核心维度
1. 图片尺寸与分辨率
- 检查图片最大宽度是否适配移动屏幕（通常不超过750px）。
- 避免使用过大的原始图片直接显示在移动端，应使用响应式图片或按需裁剪。
- 确认图片在Retina屏幕上不模糊（可考虑2x或3x图，但需注意文件大小）。
2. 图片格式选择
- 优先使用WebP格式（兼容性较好，文件小），同时提供JPEG/PNG作为回退。
- 图标和简单图形建议使用SVG，避免失真。
- 照片类图片使用JPEG，透明背景用PNG或WebP。
3. 压缩与文件大小
- 每张图片文件大小建议控制在200KB以内，首屏关键图片更小。
- 使用工具（如TinyPNG、ImageOptim）进行无损压缩。
- 检查是否有未压缩的原始大图被直接引用。
4. 加载速度与懒加载
- 确认所有非首屏图片使用了懒加载（loading="lazy"）。
- 检查图片是否阻塞页面渲染，可通过Lighthouse测试。
- 考虑使用CDN加速图片分发。
5. 适配与布局
- 图片是否采用弹性布局（如max-width: 100%），避免溢出或出现滚动条。
- 在常见手机尺寸（iPhone、安卓主流机型）上测试显示效果。
- 检查图片在横竖屏切换时的表现。
6. 可访问性与SEO
- 每张图片是否添加了描述性alt属性，帮助搜索引擎和读屏软件理解。
- 图片文件名是否使用英文描述，避免中文乱码或无意义字符。
- 检查图片是否被搜索引擎索引（可查看Robots.txt或meta标签）。
三、清单制作方法
将上述维度整理成表格或列表形式，每条检查项留出“通过/不通过/备注”列。建议使用在线文档或项目管理工具，方便团队协作和更新。每次网站改版或新增图片时，按清单逐项核对。
四、注意事项
检查清单不是一次性工作，应随着移动设备和浏览器更新而调整。例如，新格式AVIF出现后，可评估是否加入清单。同时，不要为了追求文件大小过度压缩导致画质损失，需在质量和速度之间找到平衡。
五、总结
制作移动端图片检查清单，核心是围绕尺寸、格式、压缩、加载、适配、可访问性六大方面。通过系统化检查，能有效减少移动端图片问题，提升网站整体体验。建议定期回顾清单内容，结合用户反馈和性能数据持续优化。
