【性能优化】使用 webp 的格式加载图片

兼容性

webp 自适应方案是通过 CDN 平台智能判断浏览器是否支持 Webp 解码， 如果支持返回 webp 的格式，不支持，返回原有来的图片格式，现代浏览器大部分支持 webp 的格式，支持率达 96.82%

智能格式加响应式交付

1、客户端检测方案

使用 <picture> 标签构建多格式源

<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg"> 
<img src="image.jpg" alt="fallback"> </picture>
</picture>

2、 服务端动态转换

• Nginx 配置示例

map $http_accept $webp_suffix {
  default ""; "~*webp" ".webp"; 
} 
 
server {
  location /images { 
    add_header Vary Accept; 
    try_files $uri$webp_suffix $uri =404; 
   } 
}

• 动态技术转换栈
  • Node.js + Sharp： 实时转换并缓存
  • 在 CDN 边缘节点进行格式转换

CDN 边缘节点 格式转换

又拍云一键开启

阿里云

# 阿里云 DCDN 配置示例 
location ~* \.(jpg|png)$ {
 proxy_set_header Accept $http_accept;
 proxy_pass http://origin/$uri.webp; # 优先返回 WebP 
 error_page 404 = @fallback; 
} 

location @fallback { 
  rewrite ^(.*)\.webp$ $1 last; # 回退到原始格式 
}

更多参考 deepSeek 的回答