关于前端:HTML-里-img-元素的-src-和-srcset-属性有何区别

在 HTML 中，img 元素通常用于在网页中插入图片。img 元素有两个相干的属性：src 和 srcset。

src 属性指定图像的 URL，它是必须的。浏览器将应用该 URL 加载图像并将其显示在页面上。

srcset 属性容许您指定一系列不同大小或分辨率的图像文件，以便浏览器能够依据设施的像素密度和屏幕大小抉择最合适的图像。srcset 属性的值是一个逗号分隔的列表，其中每个我的项目都有一个图像文件的 URL，后跟一个空格和一个分辨率描述符。描述符指定图像的分辨率，并通知浏览器如何抉择最合适的图像。通常应用像素密度（如“1x”或“2x”）或图像宽度（如“320w”或“640w”）作为描述符。

在应用 srcset 属性时，能够抉择一个默认的图像文件，将其 URL 放在 img 元素的 src 属性中。如果浏览器不反对 srcset 属性或无奈抉择最合适的图像，则将加载默认的图像文件。

总的来说，src 属性用于指定图像的 URL，而 srcset 属性用于指定一系列不同大小或分辨率的图像文件，以便浏览器能够抉择最合适的图像来适应不同的设施和屏幕大小。

上面是一个具体的例子。

src 里的 NmOQ 是默认值，类型为 zoom：

在古代浏览器中，当浏览器遇到一个带有 srcset 属性的 img 标签时，它将依据以下步骤来渲染图片：

1. 首先，浏览器会依据 devicePixelRatio（设施像素比）确定屏幕的理论像素密度。例如，Retina 显示屏幕的 devicePixelRatio 为 2。
2. 接下来，浏览器会将 srcset 属性的值解析为一组可用的图片资源和它们的尺寸。每个图片资源都蕴含了一个图片 URL 和一个形容该图片的宽度，例如：https://example.com/image-1000w.jpg 1000w。
3. 浏览器依据屏幕的宽度和每张图片的宽度来计算出最佳的图片大小，这个大小就是要显示的图片的理论像素尺寸。例如，如果设施的宽度为 500px，浏览器会抉择一个最靠近 500px 的图片资源，例如图片宽度为 600px 的那张图片。
4. 最初，浏览器将选中的图片资源的 URL 赋给 img 元素的 src 属性，而后加载并显示该图片。

总之，浏览器会依据设施像素比、可用图片资源和设施宽度来主动抉择和加载最佳的图片，从而实现高清晰度和响应式图片的成果。