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

Question

我想知道如何srcset在移动应用中使用HTML 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非常好,几乎所有当前的浏览器都或多或少支持它.形势与picture元素是有点差.

描述符只是一种显示资源背后隐藏着什么类型图像的方法.有各种描述符:

• 密度描述符.srcset="image.jpg, image-2X.jpg 2x" 显示密度值-1x,2x等被称为显示密度描述符.如果未提供显示密度描述符,则假定为1x.目标视网膜显示的好变种.
• 宽度描述符.srcset="image-240.jpg 240w, image-640.jpg 640w".我确信这是自我解释的.唯一的问题是宽度描述符本身并没有真正帮助.为什么？在这里阅读
• 大小描述符,只有在使用宽度描述符时才有意义.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是在没有列出媒体条件的情况下,假设长度是在没有满足其他媒体条件时使用的默认值.

只是为了完整性将增加在这里,有一个图像组()属性在CSS背景图像和其他一些有用的链接在这里

Answer 2

这是关于 srcset的详细指南以及代码示例。

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

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

1. 图像 URL，例如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根据在运行时在特定显示器上呈现该图像所需的实际宽度来选择最佳候选者。

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

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

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

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

Answer 3

这是一篇关于该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，以及向屏幕大于 640 像素的高 DPI 设备提供 Banner-phone-HD.jpeg。到其他一切。

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

我不知道有任何 JQuery 插件可以帮助解决这个问题。