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是在没有列出媒体条件的情况下，假设长度是在没有满足其他媒体条件时使用的默认值。

为了完整起见，我们会在此处添加CSS中的背景图片的image-set()属性以及其他一些有用的链接here

Answer 2

这里是detailed guide on srcset和代码示例。

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

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

图片网址，例如http://ik.imagekit.io/demo/default-image.jpg或相对路径/demo/default-image.jpg
空白空间
图像的实际宽度或显示密度：
- 使用显示密度描述符，例如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 2的300px宽屏幕上，浏览器将选择medium.jpg，因为它需要300x2 = 600px宽的图像。在DPR值为3的300px宽屏幕上，浏览器将选择large.jpg，因为它需要300x3 = 900px宽的图像。

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

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

Answer 3

srcset属性上的

Here is a good article以及如何使用它。 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">

以上内容将banner-phone.jpeg提供给视口宽度低于640px的设备，banner-phone-HD.jpeg设置为小屏幕高DPI设备，banner-HD.jpeg设置为屏幕高于640px的高DPI设备，以及banner.jpeg到其他一切。

还有其他一些方法，比如可以用来产生相同效果的CSS媒体查询。

我不知道任何有助于此的JQuery插件。

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

3 个答案:

使用显示密度描述符

使用宽度描述符