一、图片优化为什么如此重要？
在网站速度优化中，图片优化是投入产出比最高的优化项。一张未经压缩的高清照片可能高达数MB，而经过合理优化后可以压缩到几十KB，体积减少90%以上，肉眼几乎无法分辨画质差异。对于以图片为主的网站（如摄影作品集、电商网站），图片优化甚至可以决定网站的生死。
此外，图片优化不仅关乎加载速度，还直接影响SEO。搜索引擎通过Alt标签理解图片内容，优质的图片优化能带来图片搜索流量，这是很多站长容易忽视的流量来源。
图片优化三大收益
- 加载速度提升：减少页面总大小，降低带宽消耗，提升Core Web Vitals评分。
- SEO价值：Alt标签让搜索引擎理解图片内容，带来图片搜索流量。
- 用户体验：快速加载的图片让浏览体验更流畅，降低跳出率。
二、Alt标签优化：被忽视的SEO利器
Alt标签（替代文本）是图片HTML标签中的一个属性，用于描述图片内容。它在以下场景发挥重要作用：
- 搜索引擎理解图片：爬虫无法"看懂"图片，只能通过Alt标签了解图片内容。
- 无障碍访问：屏幕阅读器会朗读Alt标签内容，帮助视障用户理解图片。
- 图片加载失败时显示：当图片因网络问题无法加载时，Alt标签文字会替代显示。
Alt标签优化原则
- 准确描述内容：用简洁的语言描述图片中实际展示的内容，而不是堆砌关键词。
- 自然融入关键词：在描述中自然融入目标关键词，但不要生硬插入。
- 保持简洁：控制在125个字符以内，屏幕阅读器通常会在125字符后截断。
- 装饰性图片留空：纯装饰性图片使用空Alt标签（alt=""），让屏幕阅读器跳过。
- 每张图片都要有Alt：即使是简单的图标，也应该有描述性的Alt文字。
三、图片压缩：在质量与体积之间找到平衡
选择合适的图片格式
不同格式适用于不同场景：JPEG适合照片和复杂色彩的图片，支持有损压缩；PNG适合需要透明背景的图片和简单图形，支持无损压缩；WebP是Google推出的新一代格式，在相同画质下比JPEG小25%-35%，比PNG小26%；AVIF是最新的格式，压缩率比WebP更高，但浏览器兼容性尚在建设中。
对于国内网站，建议优先使用WebP格式，配合JPEG/PNG作为降级方案。可以使用picture标签实现格式自动选择。
压缩工具推荐
- 在线工具：TinyPNG、Squoosh（Google出品）、Compress JPEG
- 桌面端：ImageOptim（Mac）、RIOT（Windows）
- 命令行：ImageMagick、pngquant、cwebp
- WordPress插件：Smush、Imagify、ShortPixel
压缩目标
一般内容图片控制在100KB以内，轮播图/Banner控制在200KB以内，产品详情大图控制在300KB以内。对于需要展示高清细节的图片（如摄影作品），可以适当放宽，但建议使用渐进式加载或缩略图预览。
四、懒加载：让图片在需要时才加载
懒加载（Lazy Loading）是一种延迟加载技术，图片只在即将进入用户视野时才加载，而不是页面打开时一次性加载所有图片。这能显著减少首屏加载时间，节省服务器带宽，提升用户体验。
实现方式
- HTML原生懒加载：在img标签中添加loading="lazy"属性即可，这是最简单的方式，主流浏览器均已支持。
- JavaScript方案：使用Intersection Observer API实现更精确的懒加载控制，支持自定义加载时机和占位图。
- WordPress插件：WP Rocket、LiteSpeed Cache等缓存插件都内置了懒加载功能。
需要注意的是，首屏的图片（如Logo、首屏Banner）不应该使用懒加载，否则会影响LCP指标。只对首屏以下的图片启用懒加载。
五、响应式图片
响应式图片根据设备屏幕宽度提供不同尺寸的图片，避免移动端用户加载桌面端的大图。实现方式主要有两种：使用srcset属性提供多分辨率图片；使用picture标签提供不同格式和裁剪的图片。配合CSS的max-width: 100%确保图片不会超出容器宽度。
图片优化是一项需要持续关注的工作。建议在网站建设的每个阶段都考虑图片优化：上传前进行压缩、选择合适的格式、配置好Alt标签、启用懒加载和响应式图片。这些优化叠加起来，能让网站速度提升一个量级。