为什么WebP尺寸管理很重要

  • 即使编解码器效率很高,过大的 WebP 图片仍然会使页面变得臃肿。
  • 响应式 srcset 需要每个 WebP 资源具有多个尺寸变体。
  • Retina 显示屏需要 2 倍分辨率的 WebP 变体
  • CDN 缓存受益于一套规范的 WebP 尺寸。

WebP 调整大小最佳实践

  • 掌握你所需的最大尺寸——通常是英雄尺寸的两倍
  • 在标准断点(320、640、1024、1920)处生成源集变体
  • 用户界面使用 WebP 无损格式,摄影使用 WebP 有损格式——切勿混用。
  • 验证透明 WebP 素材调整大小后的 alpha 边缘。
  • 调整图像大小并协商格式(优先使用 AVIF,其次是 WebP,最后是 JPG)