safari图片显示异常大概率是webp兼容性问题，因其直到macos sonoma 14.2和ios 17.2才有限支持；可通过开发者工具检查content-type是否为image/webp并验证.webp链接是否白屏来确认；前端用标签降级、后端用nginx按accept头重写或阿里云oss加参数转码均可解决。
当你在 Safari 浏览器中打开网页，发现部分图片显示为空白、红叉或无限转圈，而同一页面在 Chrome 或 Firefox 中完全正常，问题大概率出在 WebP 图片格式与 Safari 的兼容性断层上——Safari 直到 macOS Sonoma 14.2 和 iOS 17.2 才开始有限支持 WebP，且不支持带 AVIF 回退逻辑的现代
确认是否为 WebP 格式导致的问题
第一步：在 Safari 中打开目标网页 → 按 Option + Command + I 打开开发者工具 → 切换到“网络”标签页 → 刷新页面 → 在过滤框输入 .webp 或点击任意未显示的图片资源。
第二步：查看右侧“标头”中的 Content-Type 字段。若显示 【image/webp】，且状态码为 200，则锁定为 WebP 兼容性问题。
第三步：右键该图片 → 选择“在新标签页中打开图像”。若地址栏 URL 以 .webp 结尾，且新标签页白屏或提示“无法打开”，即可排除 CDN 阻断、路径错误等干扰因素。
注意：不要依赖网页源码里写的 <img src="xxx.webp"> 来判断——很多站点通过服务端逻辑动态返回格式，源码只是占位符。
前端快速兜底：用 标签强制降级
方法一：基础双格式切换（适合静态页面或少量图片）
将原 <img src="logo.webp"> 替换为：
<picture><source srcset="logo.webp" type="image/webp"><img src="logo.png" alt="logo"></source></picture>
浏览器会优先尝试加载 <source></source> 中声明的 WebP；若不支持（如 Safari），则自动回退到 <img> 里的 PNG/JPG。
【必须确保 logo.png 文件真实存在且与 WebP 内容像素级一致】，否则视觉错位无法避免。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
后端适配：Nginx 自动识别并重写请求
适用于自建服务器，无需修改业务代码，对用户透明。
在对应 server 块中加入：
map $http_accept $webp_suffix {<br> ~*webp ".webp";<br> default "";<br>}
location ~* \.(png|jpe?g)$ {<br> add_header Vary Accept;<br> try_files $uri$webp_suffix $uri =404;<br>}
原理：当请求 icon.png 时，Nginx 检查请求头 Accept: image/webp 是否存在。Chrome/Edge 等浏览器会携带该头，Nginx 就尝试找 icon.png.webp；Safari 不带该头，永远走原图路径，自然绕过兼容性问题。
阿里云 OSS 快速降级（零配置）
方法一：URL 参数强制转码
对所有 WebP 图片 URL 末尾追加参数：?x-oss-process=image/format,jpg。
例如原链接：https://bucket.oss-cn-hangzhou.aliyuncs.com/photo.webp
改为：https://bucket.oss-cn-hangzhou.aliyuncs.com/photo.webp?x-oss-process=image/format,jpg
这一步操作起来很简单，直接把参数拼上去就行。OSS 会在边缘节点实时将 WebP 解码再转为 JPG 输出，Safari 收到的是标准 JPEG 流，100% 兼容。
