响应式图片中的srcset和sizes是HTML中<img>标签的属性，用于定义多个图像源和对应的尺寸规则，以实现根据设备特征加载适当的图像。

srcset属性允许您指定一组备选图像，每个图像都有相应的分辨率描述符。浏览器将根据设备的像素密度选择最合适的图像进行加载。例如：

<img src=" *** all.jpg" srcset="medium.jpg 2x, large.jpg 3x" alt="响应式图片srcset和sizes">

在上面的示例中，srcset属性指定了三个备选图像，分别对应不同的像素密度。2x表示适合高像素密度（如Retina）屏幕的图像，3x表示更高的像素密度屏幕的图像。如果设备的像素密度为2x，则会加载medium.jpg；如果像素密度为3x，则会加载large.jpg。

sizes属性用于指定图像在不同视口宽度下的显示规则。它接受一个或多个尺寸描述符，并可以结合CSS媒体查询来定义不同的图像尺寸。例如：

<img src=" *** all.jpg" srcset="medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1600px) 50vw, 33vw" alt="响应式图片srcset和sizes">

在上面的示例中，sizes属性根据不同的视口宽度定义了三个规则。当视口宽度小于或等于600px时，图像宽度将等于视口宽度（100vw）；当视口宽度在600px和1600px之间时，图像宽度为视口宽度的一半（50vw）；当视口宽度大于1600px时，图像宽度为视口宽度的三分之一（33vw）。这些规则会帮助浏览器确定加载适合当前视口尺寸的图像。

再来个示例解释：

<img src="image.jpg"
     srcset="image- *** all.jpg 500w,
             image-medium.jpg 1000w,
             image-large.jpg 2000w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="响应式图片srcset和sizes">

在上面的示例中，我们定义了一个 <img> 元素，并设置了以下属性：

src：指定默认的图像路径为 "image.jpg"。
srcset：定义了一系列图像和各自的描述符。在这里，我们设置了三个图像：
    image- *** all.jpg，宽度为 500 像素。
    image-medium.jpg，宽度为 1000 像素。
    image-large.jpg，宽度为 2000 像素。
sizes：定义了图像在不同视口宽度下的相对尺寸。在这里，我们设置了三个媒体查询：
    当窗口宽度小于等于 600 像素时，图像将占据整个视口宽度（100vw）。
    当窗口宽度小于等于 1200 像素时，图像将占据视口宽度的一半（50vw）。
    默认情况下，图像将占据视口宽度的三分之一（33vw）。

当浏览器解析这个 <img> 元素时，它会根据当前设备的屏幕尺寸和窗口大小选择合适的图像。例如，如果窗口宽度是 400 像素，则浏览器会选择 image- *** all.jpg 这个较小的图像，以加快页面加载速度和减少带宽占用。

如果是在富文本里面使用这个，会变得有些复杂，不但要将图片保存为多种尺寸的版本，还要在<img>标签中设置不同的属性，这些操作比较适合建站人员使用。