curl -sI https://cdn.example.com/a.webp | grep -i content-type # 期望 image/webp
同一批图在 Chrome 正常,Safari 里部分图显示成破图,响应头 Content-Type 是 image/jpeg,文件实际是 WebP。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:转换后文件扩展名改了,源站的 MIME 映射没更新,按旧后缀返回了 JPEG 类型。Safari 遇到类型和内容不一致就直接不渲染。
「图片 MIME 错误」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。监控和日志的时间要对上,时区不一致会多绕很大一圈。
临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
处理上按这个顺序:检查服务器的 mime.types 里 webp 是否映射到 image/webp;源站和 CDN 都对 .webp 返回正确类型;刷新这批地址的缓存头,再用 curl 核对。
确认没问题再收工,Safari 里这批图正常显示,响应头是 image/webp。
