什么是 IMG 标签中的 srcset 属性以及如何使用它？

Question

我想知道如何开始在我的移动应用程序中使用 HTML srcset img 属性。或者有没有其他 jQuery 插件可以帮助我解决图像分辨率问题。

<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />

Answer 1

简而言之，Srcset 是一个新属性，它允许您为不同的屏幕尺寸/方向/显示类型指定不同类型的图像。用法非常简单，您只需提供许多不同的图像，用逗号分隔它们：<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">。这是一个例子：srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

---

这是一个更长的答案，可以更详细地解释事情。

srcset 和图片的区别。 srcset 和 picture 做的事情大致相同，但有一个细微的差别：picture 规定浏览器应该使用什么图像，而srcset 给浏览器一个选择。很多东西都可以用来选择这个选项，比如视口大小、用户偏好、网络状况等等。对srcset 的支持还不错，almost all current browsers 或多或少都支持。带有picture 元素的情况是little bit worse。

描述符只是显示隐藏在资源后面的图像类型的一种方式。描述符有很多种：

• 密度描述符。 srcset="image.jpg, image-2X.jpg 2x" 显示密度值（1x、2x 等）称为显示密度描述符。如果未提供显示密度描述符，则假定为 1x。针对视网膜显示器的良好变体。
• 宽度描述符。 srcset="image-240.jpg 240w, image-640.jpg 640w"。我相信这是不言自明的。唯一的问题是宽度描述符本身并没有真正的帮助。 Why? read here
• 大小描述符，仅在使用宽度描述符时才有意义。 srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">。浏览器的指令如下所示：(max-width: 480px) 100vw — 如果视口宽度为 480 像素或更小，则图像将为视口宽度的 100%。 (max-width: 900px) 33vw — 如果视口宽度为 480 像素或更小，则由于之前的媒体条件，将永远无法达到此规则。而 254px 是当没有列出媒体条件时，假定长度是在其他媒体条件都不满足时使用的默认值。

为了完整起见，这里将添加一个 image-set() 属性用于 CSS 中的背景图像和一些其他有用的链接 here

Answer 2

这是detailed guide on srcset 以及代码示例。

srcset 允许您定义不同图像资源的列表以及尺寸信息，以便浏览器可以根据实际设备的分辨率选择最合适的图像。

srcset 中的每个逗号分隔项都有：

1. 图片网址，例如http://ik.imagekit.io/demo/default-image.jpg 或相对路径 /demo/default-image.jpg
2. 一片空白
3. 图像的实际宽度或显示密度：
   • 使用显示密度描述符，例如1.5x、2x 等。
   • 或者，使用宽度描述符，例如，450w。这是图像的宽度（以像素为单位）。

使用显示密度描述符

显示密度描述符的语法很简单。 srcset 提供以逗号分隔的图像资源列表以及应使用的显示密度，例如1x、2x 等。

<img src="image.jpg" 
     srcset="image.jpg,
             image_2x.jpg 2x"
/>

现场演示 - https://imagekitio.github.io/responsive-images-guide/srcset-density.html。

使用宽度描述符

语法类似于显示密度描述符，但我们提供图像的实际宽度而不是显示密度值。

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

这可以让浏览器选择最佳图像

使用宽度描述符允许浏览器根据在运行时在特定显示器上呈现该图像所需的实际宽度从srcset 中挑选最佳候选者。

请注意，在计算所需宽度时，浏览器也会考虑显示像素密度。 ?

例如，假设图像占据了整个视口宽度 - 在 300 像素宽的屏幕上使用 DPR 2，浏览器将选择 medium.jpg，因为它需要 300x2=600 像素宽的图像。在 DPR 值为 3 的 300px 宽屏幕上，浏览器将选择 large.jpg，因为它需要 300x3=900px 宽的图像。

演示 - 带有宽度描述符的 srcset

让我们通过现场演示来看看这一点 - https://imagekitio.github.io/responsive-images-guide/srcset-width.html。

Answer 3

Here is a good article 上的srcset 属性以及如何使用它。 srcet 允许您声明一组图像以显示在不同的视口大小上。您只需要以不同的分辨率保存和图像，例如banner-phone-HD.jpeg 将是最高分辨率。

示例：

<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

以上内容将为视口宽度低于 640 像素的设备提供banner-phone.jpeg，为小屏幕高 DPI 设备提供banner-phone-HD.jpeg，为屏幕大于 640 像素的高 DPI 设备提供banner-HD.jpeg，以及banner.jpeg 到其他所有内容。

您还可以使用其他方法（例如 CSS 媒体查询）来产生相同的效果。

我不知道有任何 JQuery 插件可以对此有所帮助。