做网页时，图片显示在大多数浏览器里正常，但一到某些老版本或特定浏览器就出问题，这种情况太常见了。比如你在 Chrome 上调试得好好的，客户用 IE 或 Safari 打开却发现图没了、变形了，甚至布局错乱。这背后往往就是图片显示的浏览器兼容问题。
常见的图片兼容问题场景
有次上线一个活动页，设计师用了 WebP 格式的图，视觉效果清晰又省流量。结果运营反馈说“部分用户看不到图”。一查才发现，老版本的 Safari 和 IE 根本不支持 WebP。这就是典型的格式兼容问题。
还有些时候，明明路径没错，<img src="logo.png"> 却显示空白。排查后发现是大小写敏感问题——Windows 系统对文件名不区分大小写，但 Linux 服务器和某些浏览器（如 Firefox 在 Linux 下）会严格区分。上传时是 Logo.png，代码写成 logo.png，页面就加载失败。
如何避免图片格式带来的兼容雷区
WebP 确实好，压缩率高，质量也不错，但不是所有浏览器都买账。如果你的用户群体中有不少人还在用旧版浏览器，直接上 WebP 就容易翻车。
可以用 <picture> 标签做降级处理：
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="示例图片">
</picture>这样支持 WebP 的浏览器会自动加载 WebP 图，不支持的就回退到 JPG，兼顾性能与兼容性。
CSS 中的背景图也得小心
有时候你用 CSS 设置了背景图：background-image: url('banner.avif');，但在 Edge 旧版或 Firefox 上就是不显示。AVIF 虽然更先进，但支持度还不够广。
可以配合特性检测使用：
.banner {
background-image: url('banner.jpg'); /* 兜底 */
}
@supports (background-image: url('test.avif')) {
.banner {
background-image: url('banner.avif');
}
}这样现代浏览器能享受更优格式，老浏览器也不至于白屏。
SVG 图标在 IE 中的坑
很多项目用 SVG 做图标，清晰又灵活。但如果你还得兼容 IE9-IE11，就得注意了。某些内联 SVG 属性在 IE 中解析异常，尤其是用 fill="currentColor" 控制颜色时，IE 可能无法正确继承文本颜色。
解决方案之一是避免依赖 currentColor，改用具体颜色值，或者用 JavaScript 动态注入样式补丁。
小建议：上线前做个简易兼容测试
别只盯着 Chrome 开发。花十分钟用 Safari、Firefox、Edge 打开看看，有条件的再拿手机测一下 iOS 和 Android 的默认浏览器。发现问题当场修，比上线后被用户投诉强得多。
还可以借助工具，比如 Can I Use 查格式支持情况，Webpack 配合 image-minimizer-webpack-plugin 自动生成多格式图片，提前规避风险。
图片看似简单，但一涉及跨浏览器，细节就多了起来。格式、路径、大小写、CSS 支持，每一环都可能出问题。平时多留个心眼，上线时就能少踩一个坑。