Safari16图片损坏问题

一、 技术背景：
1、当前图片格式方案：我们提供原始图片，阿卡麦cdn根据用户浏览器支持情况，返给用户avif、webp、jpg、png图片。
2、WebP格式： WebP 则是一种现代的图片格式，它可以对网络上的图片进行更加高性能的无损和有损压缩。WebP 可以更显著地压缩网页上照片的大小，使网站加载速度比以前更快。同时WebP也支持透明图层和多图片动图，它是透明PNG图片和GIF动图绝佳的替代方案。
3、AVIF格式：AVIF (AV1 Image File Format，AV1图像文件格式)，在图片视觉效果一样的情况下，AVIF与WebP相比，提升了20%的压缩性能；WebP与JPEG相比，提升了27%的压缩性能。总的来说，AVIF比JPEG平均多压缩了41%的图片大小。

二、实验过程：
使用最简单html技术实验（排除next等技术影响），使用avif与webp格式图片，得出如下结果：
在特定系统macOS11.7.7浏览器Safari16.5.1，webp格式图片正常，最新avif格式图片出现损坏，公司内部2位测试反馈此问题，这两位同事反复刷新情况下，出现概率大约1%

 

 

三、大型网站对比
国外大型网站使用稳定的webp或jpg格式，未出现bug。国内淘宝天猫用avif格式，出现此bug
沃尔玛 https://www.walmart.com/
谷歌油管 https://www.youtube.com/
亚马逊 https://www.amazon.com/
易趣网 https://www.ebay.com/
宜家 https://www.ikea.com.hk/zh
梅西百货 https://www.macys.com/
苹果商店https://www.apple.com.cn/

 

四、解决方案：
1、 解决方案一：bug提交给阿卡麦，cdn只使用webp与jpeg格式。avif格比webp格式提升了20%的压缩性能，更加节省流量。
图形用户界面, 文本, 应用程序, 电子邮件

描述已自动生成

2、 解决方案二：属于苹果公司Safari渲染bug，如果用户反馈，请升级系统到macOS13，Safari到最新版本。
参考资料https://forums.macrumors.com/threads/update-to-12-6-5-and-or-safari-16-4-1-17615-causing-corrupted-jpegs-on-websites.2387412/

3、解决方案三：属于苹果公司Safari渲染bug，如果用户反馈，降级到Safari15，cdn服务器自动匹配webp格式图片。
参考资料：https://bbs.pcbeta.com/viewthread-1972006-1-1.html