多图站点的性能优化

提高网站性能的一项重要指标是提高访问速度。
图像通常比其他资源占用更多带宽。最常见的问题是图片加载慢。
对应的优化策略包括：

1. 图片优化：进行图片压缩/缩放和选择正确的图片格式。
2. 传输优化：使用 HTTP/2 和 CDN 服务。
3. 加载优化：按需使用懒加载、预加载，响应式图片加载等策略。

一、图片优化

• 选择合适的格式
  在没有透明和动画需求的情况下，JPEG 格式图片胜任大部分场景。
  如果对图片的展示质量有较高要求时，可使用 PNG 格式图片。
  绘制 LOGO、ICON 等非照片的图片内容时，一般使用 SVG 格式。
  比如 iconfont 等矢量图标管理平台中大量使用 SVG 格式。
• 压缩和缩放处理
  由于实际应用场景的差异，对图片的大小以及细节要求各有不同，未经压缩或缩放调整的图片会使网页加载许多不必要的字节，且对用户的视觉效果没有太大的提升。
  前端常见的压缩和缩放的处理方案包括：
  • 利用Canvas API 进行图片缩放和有损压缩。
  • 根据用户端的显示需求（如头像、商品缩略图），利用CDN进行压缩或缩放，使用处理后返回的的图片。

二、传输优化

• 利用http缓存机制
• 使用精灵图 / 雪碧图(sprite)，减少 HTTP 请求。
• 10kb 大小以内的图片资源使用 base64 编码，减少 HTTP 请求数。
• 用户请求图片资源时,可就近获取 CDN 节点上已缓存的资源，提高访问速度。CDN还可做压缩、缩放处理。

三、加载优化

• 图片懒加载
  在 img 标签上添加自定义属性存放图片链接，而 src 属性不被设置或设置为占位图链接。
  通过scroll API 检测离屏图片是否滚动到预期位置，如果是则将自定义属性的值赋给 src 属性，达到懒加载的目的。
  还可以直接设置loading属性：
  <img src="xx" loading="lazy" alt="…" width="200" height="200" />
• 图片预加载