能否在img标签的srcset属性中混合使用不同格式的图片？

原生<img>标签的srcset属性本身仅支持根据视口宽度、屏幕像素密度选择对应分辨率的资源，不支持自动根据浏览器对图片格式的支持度做切换。
你当前的写法会存在两个问题：

• 即便浏览器支持WebP格式，当视口宽度计算后需要1080w规格的资源时，浏览器会直接选择JPG资源，不会主动找同尺寸的WebP
• 如果浏览器不支持WebP格式，当视口需要480w规格的资源时，会出现资源加载失败的问题

推荐使用<picture>标签实现格式优先级+响应式尺寸的双重匹配，这是HTML原生支持的标准实现，无需额外引入依赖：

<picture>
  <!-- 优先匹配WebP格式，按响应式规则选对应尺寸的WebP资源 -->
  <source 
    srcset="flower.webp 480w, flower-1080w.webp 1080w" 
    sizes="50vw"
    type="image/webp"
  >
  <!-- WebP不支持时降级到JPG格式，沿用相同的响应式规则 -->
  <img 
    src="flower.jpg" 
    srcset="flower-480w.jpg 480w, flower.jpg 1080w" 
    sizes="50vw"
    alt="花朵"
  >
</picture>

上述代码的运行逻辑：

1. 浏览器先校验自身是否支持image/webp格式，支持则直接使用<source>标签内的srcset规则，按当前视口尺寸选择对应大小的WebP资源
2. 若浏览器不支持WebP，会自动忽略<source>标签，直接使用<img>标签的配置加载JPG格式的资源

如果不想修改前端代码，也可以调整后端配置实现内容协商：在Nginx、Apache等服务端配置里根据请求头的Accept字段判断浏览器支持的格式，自动返回最优格式的图片，前端srcset只需要填写统一的无后缀资源路径即可，该方案对后端配置能力有一定要求，通用性不如<picture>标签。

• 测试时请打开浏览器开发者工具的「网络」面板，禁用缓存后刷新页面，即可直观看到实际加载的图片格式与尺寸
• 需保证所有列出的图片资源路径正确，避免出现404问题
• 必须给<img>标签补充alt属性，符合无障碍访问规范

内容的提问来源于stack exchange，提问作者Lokix