WebP比PNG更适合轮播图因其体积小60%–80%、加载快，且现代浏览器全支持；JPEG是旧环境兜底首选；AVIF需配fallback但增复杂度；尺寸、元数据和加载控制比格式选择更关键。
没有硬性格式限制，但 WebP 和 JPEG 是实际项目中最稳妥的选择。
WebP 为什么比 PNG 更适合轮播图
WebP 在同等视觉质量下体积通常比 PNG 小 60%–80%，加载更快，尤其对多图轮播很关键。PNG 虽支持透明，但轮播图极少需要整图透明；若只是图标或 logo 叠加，应单独抽离处理，而不是让主图用 PNG 拖慢首屏。浏览器兼容性已不是问题：caniuse.com 显示所有现代浏览器（Chrome、Firefox、Safari 14+、Edge）均原生支持 WebP。
JPEG 仍是兜底首选，别盲目上 AVIF
当目标用户包含大量旧版 IE 或老安卓 WebView 时，JPEG 是唯一能 100% 兼容的有损格式。AVIF 虽更高效，但 Safari 16.4 才开始支持，且部分安卓低版本系统解码失败会导致图片空白——轮播图一旦某张图加载失败，slides[2] 就可能变成 undefined，后续 goToSlide(2) 直接报错中断。用 AVIF 前必须配 fallback：<picture><source type="image/avif" srcset="a.avif"><source type="image/webp" srcset="a.webp"><img src="a.jpg" alt="..."></source></source></picture>，但这样会显著增加 DOM 复杂度和 JS 切换逻辑负担。
尺寸和元数据比格式本身更容易出问题
常见错误不是选错格式，而是：
- 图片没设 width 和 height 属性或 CSS 尺寸，导致布局抖动甚至容器塌陷
- EXIF 方向信息未清除（尤其手机直出图），在部分浏览器中旋转 90° 显示
- 未压缩就直接上传，一张 5MB 的 JPEG 在 3G 网络下可能加载超时，触发 img.onerror 但 JS 未监听，轮播卡死在 loading 状态
- 使用 background-image 替代 <img alt="制作HTML轮播图对图片格式有要求吗？" > 标签，导致无法设置 alt、无法触发懒加载、无法被屏幕阅读器识别
真正影响轮播稳定性的，往往不是 .webp 还是 .jpg，而是图片是否带宽可控、尺寸可预测、加载可感知。
立即学习“前端免费学习笔记（深入）”；
