网页中 source 元素的 type 属性如何指定图片 MIME 类型
浏览器会根据 source 元素的 type 属性指定的 MIME 类型来决定是否加载该图片资源。
type 属性如何指定图片的 MIME 类型
source 元素的 type 属性用于声明其 srcset 属性中图片资源的 MIME 类型。浏览器在处理 picture 元素时，会先检查每个 source 元素的 type 属性。如果浏览器不支持该 MIME 类型，则会跳过该 source 元素，继续检查后续元素。只有当 type 属性指定的类型被浏览器支持时，浏览器才会进一步评估该 source 的 srcset 属性。这种机制允许网页根据浏览器的支持情况提供不同格式的图片，例如优先使用 AVIF 或 WebP 等现代格式。
在编写代码时，type 属性的值应与图片文件的扩展名对应。例如，对于 AVIF 格式的图片，type 属性应设置为 image/avif；对于 WebP 格式，则设置为 image/webp。如果 type 属性的值与实际文件格式不符，浏览器可能会错误地跳过该资源。此外，type 属性仅影响图片的选择，不影响图片在页面上的显示尺寸或位置。图片的最终显示效果仍由 img 标签的属性或 CSS 样式控制。
如何编写 type 属性实现格式筛选
编写 type 属性时，应遵循标准的 MIME 类型命名规则，并确保其与图片文件的实际格式一致。例如，可以使用以下代码结构来优先加载 AVIF 格式，回退到 WebP，最后使用 JPG 作为兜底：html<picture> <source srcset='photo.avif' type='image/avif' /> <source srcset='photo.webp' type='image/webp' /> <img src='photo.jpg' alt='photo' /> </picture>。这种结构确保了浏览器会按照顺序尝试加载支持的格式，直到找到第一个可用的资源。
在设置 type 属性时，应避免混用不相关的类型或使用过时的格式声明。例如，不应将 type 属性设置为 image/png 来引用 WebP 文件，因为浏览器会认为该资源不可用。正确的做法是根据目标格式选择对应的 MIME 类型。此外，type 属性可以与 srcset 属性结合使用，以提供更灵活的图片加载策略。例如，可以为同一图片提供不同分辨率或格式的描述符，同时通过 type 属性限制浏览器仅加载支持的格式。
检查 MIME 类型筛选是否生效的方法
可以通过浏览器开发者工具的“网络”面板来验证 type 属性的筛选效果。在页面加载时，观察“网络”面板中请求的图片文件及其状态码。如果浏览器成功加载了 AVIF 格式的图片，说明 type='image/avif' 生效；如果加载了 WebP 格式，则说明 AVIF 不被支持，浏览器跳转到了下一个 source 元素。如果所有 source 元素都被跳过，则浏览器会加载 img 标签的 src 属性指定的图片。
若筛选逻辑未生效，需检查 type 属性的值是否正确且与文件格式匹配。例如，确保 type='image/avif' 对应的文件确实是 .avif 格式。同时，确认浏览器是否支持该 MIME 类型，可以通过查阅浏览器兼容性列表或尝试在支持该格式的浏览器中测试。如果所有条件均不满足，浏览器将回退到 img 标签的默认图片。这种回退机制确保了即使所有 source 元素都被跳过，页面仍能显示有效的图片资源。
注意事项与常见问题
type 属性仅用于告知浏览器图片的 MIME 类型，不会影响图片的显示尺寸或布局。图片的实际大小仍由 img 标签的 width、height 属性或 CSS 样式控制。此外，type 属性仅对 source 元素有效，img 标签的 src 属性不需要指定 MIME 类型。对于不支持 picture 元素的旧浏览器，type 属性不会生效，浏览器将直接加载 img 标签的 src 属性指定的图片。
避免在 type 属性中混用不相关的属性或格式。例如，不应将 type 属性与 media 属性结合使用来筛选格式，因为 media 属性用于筛选显示条件而非文件格式。如果仅针对图片格式，应明确使用 type 属性。此外，type 属性的值应保持简洁和准确，避免使用冗长的描述符。正确的设置不仅能提升图片加载的兼容性，还能优化页面的性能和用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。