HTML中可以使用<img>标签来展示图片，而通过使用srcset和sizes属性，可以实现响应式的展示图片，以适应不同设备的屏幕大小和分辨率。
srcset属性可以指定不同分辨率的图片，并根据设备的分辨率来选择最适合的图片进行展示。其中，每个图片都需要指定一个分辨率描述符，如以下代码所示：
<img src="example.jpg"
srcset="example-480w.jpg 480w,
example-800w.jpg 800w,
example-1200w.jpg 1200w"
alt="Example Image">在上面的代码中，srcset属性包含了三个不同分辨率的图片，分别是480w、800w和1200w，表示图片的宽度分别为480像素、800像素和1200像素。当设备的屏幕宽度小于480像素时，会选择example-480w.jpg进行展示；当设备的屏幕宽度在480像素和800像素之间时，会选择example-800w.jpg进行展示；当设备的屏幕宽度大于800像素时，会选择example-1200w.jpg进行展示。
sizes属性可以指定图片在不同屏幕宽度下的展示大小，以便浏览器在选择图片时做出更准确的决策。其语法如下：
<img src="example.jpg"
srcset="example-480w.jpg 480w,
example-800w.jpg 800w,
example-1200w.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 800px) 50vw,
1200px"
alt="Example Image">在上面的代码中，sizes属性包含了三个不同屏幕宽度下的展示大小，分别是(max-width: 480px) 100vw、(max-width: 800px) 50vw和1200px，表示当屏幕宽度小于等于480像素时，图片展示的大小为整个屏幕的宽度；当屏幕宽度在480像素和800像素之间时，图片展示的大小为屏幕宽度的一半；当屏幕宽度大于800像素时，图片展示的大小为固定的1200像素宽度。
通过使用srcset和sizes属性，可以让浏览器根据设备的分辨率和屏幕宽度选择最适合的图片进行展示，从而提高页面加载速度和用户体验。
