前端 HTML 面试题, HTML 中,img 标签 srcset 属性的作用是什么?

Step 1

Q:: HTML 中，img 标签 srcset 属性的作用是什么？

A:: srcset 属性允许开发者为 img 标签指定多个图像资源，以及浏览器在不同条件下选择使用的图像。它是响应式图片的重要组成部分，可以根据屏幕的分辨率、设备像素比或浏览器窗口的大小，选择最适合的图片资源。这在优化性能和提高用户体验方面非常重要。

Step 2

Q:: 如何使用 srcset 属性？

A:: 在 img 标签中，使用 srcset 属性提供一组以逗号分隔的图像资源和可选的宽度描述符或像素密度描述符。例如：<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="Responsive image">。这里，浏览器会根据设备的宽度选择合适的图片。

Step 3

Q:: sizes 属性与 srcset 的关系是什么？

A:: sizes 属性用于定义当一个特定的媒体条件匹配时，浏览器的视口宽度应该使用哪一个 srcset 中的图像。它告诉浏览器如何在不同的视口宽度下选择合适的图片。例如：<img src="example.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(max-width: 600px) 480px, 800px" alt="Responsive image">。

Step 4

Q:: srcset 属性与 picture 标签的区别是什么？

A:: srcset 属性允许根据设备的分辨率选择不同的图片，而 picture 标签则提供了更复杂的选择条件，可以根据媒体查询来选择不同的图片。picture 标签可以包含多个 source 元素，每个 source 元素可以有自己的 srcset 和 media 属性，从而实现更细粒度的控制。

Step 5

Q:: 为什么使用 srcset 可以提高性能？

A:: 使用 srcset 能够确保设备只加载需要的图片大小，避免加载不必要的大图片，从而减少带宽消耗和提高页面加载速度。这对于移动设备尤其重要，因为它们的网络速度通常较慢，屏幕分辨率多样性也更大。