网页中 picture 标签内 source 元素的 type 属性如何决定图片格式
浏览器会根据 source 元素的 type 属性检查支持的图片格式，不支持时跳过该元素并尝试下一个。
type 属性如何影响图片选择
picture 元素包含多个 source 子元素时，浏览器会逐一检查每个 source 的 type 属性。type 属性用于指定资源 URL 对应的 MIME 类型，例如 image/avif 或 image/webp。如果浏览器不支持该 MIME 类型，会跳过该 source 元素，继续评估下一个 source。只有当所有 source 的 type 条件都不满足时，才会回退到 img 标签的 src 属性。这种机制允许网页为不同浏览器或设备提供兼容的图片格式。
例如，当网页包含 AVIF 和 WebP 格式的 source 时，浏览器会先检查是否支持 AVIF。如果不支持，则跳过 AVIF 的 source，继续检查 WebP 的 source。如果 WebP 也不支持，则加载 img 标签指定的备用图片。这种顺序选择确保了在格式兼容性不佳的情况下，网页仍能显示图片。需要注意的是，type 属性仅影响格式兼容性，不涉及图片尺寸或设备像素比等其他条件。
type 属性与 srcset 属性的配合使用
type 属性通常与 srcset 属性一起使用，以指定不同格式的图片资源。srcset 属性列出了一组图片 URL 及其描述符，而 type 属性则限定了这些 URL 对应的格式。浏览器在解析 srcset 时，会结合 type 属性判断是否加载特定格式的图片。如果 type 属性与 srcset 中的 URL 不匹配，浏览器会忽略该条目。这种组合方式常用于提供现代格式（如 AVIF 或 WebP）的图片，同时保留传统格式（如 JPEG）作为备用。
例如，一个 picture 元素可能包含两个 source：一个用于 AVIF 格式，另一个用于 WebP 格式。srcset 属性分别指向对应的图片文件，而 type 属性则明确指定了格式。浏览器会根据支持的格式选择最合适的图片。如果浏览器同时支持 AVIF 和 WebP，通常会优先选择 AVIF，因为其压缩效率更高。这种策略有助于优化页面加载性能，同时确保兼容性。
如何验证 type 属性的效果
可以通过修改浏览器支持的图片格式来验证 type 属性的作用。例如，在 Chrome 中禁用 AVIF 支持，然后访问包含 AVIF source 的网页。此时，浏览器应跳过 AVIF 的 source，加载 WebP 或备用图片。同样，如果禁用 WebP 支持，浏览器会优先选择 AVIF 或备用图片。这种测试方法可以直观地看到 type 属性如何影响图片选择。
另一种验证方法是使用浏览器开发者工具检查网络请求。在加载包含 type 属性的网页时，开发者工具会显示实际加载的图片文件。如果浏览器跳过某个 source，对应的图片文件不会出现在请求列表中。通过对比不同格式支持的浏览器行为，可以确认 type 属性的正确性。需要注意的是，验证时应确保 img 标签的 src 属性指向一个兼容的备用图片，以避免图片无法显示。
type 属性的常见应用场景
type 属性常用于提供现代图片格式，以提升页面加载性能。例如，AVIF 和 WebP 格式通常比 JPEG 和 PNG 更高效，但并非所有浏览器都支持。通过在 picture 元素中使用 type 属性，网页可以为支持的浏览器加载高效格式，同时为不支持的浏览器提供传统格式。这种策略在移动设备上尤为重要，因为高效格式可以减少流量消耗。
另一个应用场景是针对特定设备的格式优化。例如，某些设备可能对 WebP 格式支持更好，而另一些设备可能更偏好 JPEG。通过在 source 元素中设置 type 属性，网页可以为不同设备提供最合适的图片格式。此外，type 属性还可以用于排除不支持的格式，避免浏览器尝试加载不兼容的图片资源。这种精细化的控制有助于提升用户体验和页面性能。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。