Web 架构之图片与静态资源优化全攻略

思维导图

Web 架构图片与静态资源优化

图片优化

静态资源优化

图片格式选择

图片压缩

响应式图片

图片懒加载

JPEG

PNG

WebP

无损压缩

有损压缩

文件压缩

缓存策略

CDN 加速

Gzip

Brotli

强缓存

协商缓存

一、图片优化

1. 图片格式选择

• JPEG
  • 特点：有损压缩格式，适合色彩丰富的照片类图片。它可以通过调整压缩比来平衡文件大小和图像质量。
  • 适用场景：风景照片、人物照片等。
• PNG
  • 特点：分为 PNG - 8 和 PNG - 24，PNG - 8 是索引色图像，支持透明，文件较小；PNG - 24 是真彩色图像，支持透明，文件相对较大。
  • 适用场景：PNG - 8 适用于简单图形、图标；PNG - 24 适用于需要高质量透明效果的图片。
• WebP
  • 特点：由 Google 开发的一种现代图像格式，同时支持有损和无损压缩，在相同质量下，WebP 格式的文件大小比 JPEG 和 PNG 更小。
  • 适用场景：所有类型的图片，尤其是对性能要求较高的网站。

2. 图片压缩

• 无损压缩
  • 原理：在不损失图像质量的前提下，减少图片文件的大小。通过去除图片中的冗余数据，如元数据、未使用的颜色表等。
  • 工具：TinyPNG、ImageOptim 等。
• 有损压缩
  • 原理：通过牺牲一定的图像质量来大幅减小文件大小。例如，减少图像的色彩深度、降低图像的分辨率等。
  • 工具：JPEGmini、Kraken.io 等。

3. 响应式图片

• 原理：根据设备的屏幕尺寸、分辨率和像素密度，为不同的设备提供合适的图片。
• 实现方式
  • 元素：可以根据不同的媒体查询条件，指定不同的图片源。

  <picture>
      <source media="(min - width: 1200px)" srcset="large.jpg">
      <source media="(min - width: 768px)" srcset="medium.jpg">
      <img src="small.jpg" alt="Responsive Image">
  picture>
  

  • srcset 和 sizes 属性：srcset 用于指定不同分辨率的图片，sizes 用于指定不同屏幕宽度下图片的显示宽度。

  <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
       sizes="(max - width: 500px) 100vw, (max - width: 1000px) 50vw, 33vw"
       src="medium.jpg" alt="Responsive Image">
  

4. 图片懒加载

• 原理：当图片进入浏览器的可视区域时，再加载图片，而不是在页面加载时一次性加载所有图片。这样可以减少首屏加载时间，提高页面的响应速度。
• 实现方式
  • 原生 loading="lazy" 属性：现代浏览器支持在 标签中使用 loading="lazy" 属性来实现图片懒加载。

  <img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">
  

  • JavaScript 库：Intersection Observer API 可以检测元素是否进入可视区域，结合 JavaScript 实现图片懒加载。

二、静态资源优化

1. 文件压缩

• Gzip
  • 原理：一种广泛使用的文件压缩算法，通过对文件进行压缩，减少文件的传输大小。服务器在发送文件之前，先对文件进行 Gzip 压缩，浏览器在接收到文件后再进行解压缩。
  • 配置：在服务器端（如 Nginx、Apache）进行配置，开启 Gzip 压缩功能。

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

• Brotli
  • 原理：一种新的压缩算法，比 Gzip 具有更好的压缩比。Brotli 可以在相同的压缩质量下，生成更小的文件。
  • 配置：同样在服务器端进行配置，开启 Brotli 压缩功能。

brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

2. 缓存策略

• 强缓存
  • 原理：浏览器直接从本地缓存中读取资源，而不需要向服务器发送请求。通过设置 Cache - Control 和 Expires 头信息来控制强缓存。
  • 设置：

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 30d;
    add_header Cache - Control "public, max - age=2592000";
}

• 协商缓存
  • 原理：当强缓存失效时，浏览器会向服务器发送一个请求，询问服务器该资源是否有更新。如果资源没有更新，服务器返回 304 状态码，浏览器从本地缓存中读取资源；如果资源有更新，服务器返回 200 状态码和新的资源。
  • 设置：通过设置 ETag 和 Last - Modified 头信息来实现协商缓存。

3. CDN 加速

• 原理：CDN（Content Delivery Network）即内容分发网络，通过在多个地理位置分布的服务器节点上缓存网站的静态资源，将用户的请求引导到离用户最近的节点上获取资源，从而提高资源的加载速度。
• 使用方法：将静态资源（如图片、CSS、JavaScript 文件）上传到 CDN 服务商提供的存储空间，并在网站中使用 CDN 的 URL 来引用这些资源。

总结

图片和静态资源的优化是 Web 架构中至关重要的一环，直接影响着网站的性能和用户体验。通过合理选择图片格式、进行图片压缩、实现响应式图片和图片懒加载，可以有效减少图片的文件大小，提高图片的加载速度。同时，对静态资源进行文件压缩、设置合理的缓存策略和使用 CDN 加速，可以进一步提升网站的整体性能。在实际应用中，需要根据网站的具体需求和用户群体，综合运用这些优化策略，以达到最佳的性能优化效果。