HeZulong

:

优化浏览器图片资源

项目开发过程中，图片资源往往是影响页面加载速度、用户体验及系统性能的关键因素。针对图片过多问题，我们可以从三大维度进行合理优化。

资源选择 ​

图片优化核心前提是「源头把控」— 在图片生成、上传阶段做出合理选择，从根本上减少冗余资源，避免后续加载与处理的额外消耗。

关于格式 ​

图片格式的选择直接决定了文件体积与显示效果，需根据项目目标浏览器范围、画质需求灵活选择，同时做好兼容兜底。

  • 首选格式：WebP：若目标用户群体以现代浏览器为主，WebP 是最优选择。其在压缩率与兼容性之间实现了极佳平衡，同等画质下，文件体积较 JPEG 等位图小 25%~35%，且支持透明通道，适配绝大多数现代浏览器。

  • 极致压缩：AVIF：若追求更高性价比和压缩比，且可以接受部分浏览器的兼容性限制。

通过 picture 标签可以实现优雅的降级方案，通过它包裹多种格式的图片资源，浏览器会自上而下检测并加载自身支持的格式，无需额外编写兼容性判断代码。

html
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="兜底图片">
</picture>

关于内容 ​

根据图片内容类型选择合适的格式，避免“一刀切”使用位图，最大化压缩体积并保证显示效果。

对于非写实、颜色单一图形（如图标、LOGO、简单插画），优先使用 SVG 格式。它是矢量图，支持无限缩放不失真，文件体积极小，且可通过 CSS 直接修改颜色、尺寸，无需额外生成多版本图片。

对于照片、复杂写实图片等，根据画质需求选择 WebP/AVIF/JPEG 等格式；避免使用 PNG 格式存储大尺寸照片（PNG 压缩效率低于 WebP，仅适合小尺寸透明图）。

加载策略 ​

核心原则就是在正确的时间加载正确的内容，减少非必要图片的提前加载，核心依赖「响应式图片」与「懒加载」两大技术。

响应式图片 ​

不同设备（手机、平板、PC）的屏幕尺寸、分辨率差异较大，为所有设备提供同一尺寸图片会造成资源浪费（小屏设备加载大屏图片）或显示模糊（大屏设备加载小屏图片）。通过 img 标签的 srcset 与 sizes 属性，可实现“设备适配”的图片加载。

  • srcset：提供一组不同尺寸、格式的图片清单，指定每张图片的宽度（或分辨率），供浏览器选择。

  • sizes：告诉浏览器当前设备下图片的显示宽度，帮助浏览器从 srcset 中选择最合适的图片加载。

html
<img 
  src="image-480.webp" 
  srcset="image-480.webp 480w, image-720.webp 720w, image-1080.webp 1080w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="响应式图片示例"
>

懒加载 ​

对于首屏以外的图片（如页面底部、滚动后才可见的图片），采用懒加载策略，延迟其加载时机，减少首屏加载压力，提升页面加载速度。

  • 原生方案：loading="lazy"：直接为 img 标签添加 loading="lazy" 属性，浏览器原生支持延迟加载非视口内的图片，无需额外引入 JS，兼容性覆盖绝大多数现代浏览器，实现成本极低。

  • 精细化方案：IntersectionObserver：对于需要自定义占位符、加载动画、加载时机（如滚动到距离视口一定距离时加载）的场景，可使用 IntersectionObserver API 监听图片元素是否进入视口，手动触发图片加载，灵活控制加载逻辑。

分发链路 ​

当项目规模较大、用户遍布全国（或全球）时，仅靠前端代码优化已不足以满足性能需求，需从架构层面优化图片分发链路，核心依赖 CDN（内容分发网络）。

CDN 核心价值 ​

将图片资源部署到 CDN 后，CDN 会将资源缓存到全国（或全球）的边缘节点。用户请求图片时，会从物理距离最近的边缘节点获取资源，大幅降低网络传输延迟，解决跨地域加载慢的问题。

CDN 进阶能力 ​

现代 CDN 不仅是“缓存服务器”，还提供强大的图片实时处理能力，可彻底剥离业务代码中图片处理的复杂性，提升开发效率：

  • 动态处理：仅需上传一张最高清的原图，请求图片时通过 URL 参数即可动态实现裁剪、缩放、添加水印、格式转换（如 JPEG 转 WebP/AVIF）等操作。

  • 前端减负：前端无需关心图片的多版本（不同尺寸、格式），仅需根据场景拼接 URL 参数，即可获取所需规格的图片，减少开发工作量与资源维护成本。

示例：请求一张 400px 宽、WebP 格式的图片（CDN 自动处理）：

https://cdn.example.com/image.jpg?w=400&format=webp

传统方案 ​

CSS 雪碧图(Sprite)通过将多个小图片（如图标）合并为一张图片，减少 HTTP 请求次数，在 HTTP/1.1 时代是重要的优化手段。但在 HTTP/2 多路复用普及后，其必要性大幅下降（多路复用可并行处理多个请求，减少请求排队时间）。

所以当项目需要加载大量小图标（如项目图标库）时，雪碧图仍是一个不错的方案。

总结 ​

图片优化需要遵循「源头把控-过程优化-链路升级」的逻辑，优先从资源选择（格式、内容）入手，再通过加载策略（响应式、懒加载）减少冗余加载，最后借助 CDN 提升分发效率。

© HeZulong.