[英]What is an srcset attribute in IMG tag and how to use it?
I want to know how could I start using the HTML srcset
img attribute in my mobile apps.我想知道如何开始在我的移动应用程序中使用 HTML
srcset
img 属性。 Or Is there any other jQuery plugin which helps me to solve image resolution problem.或者有没有其他 jQuery 插件可以帮助我解决图像分辨率问题。
<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
In short, Srcset
is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types.简而言之,
Srcset
是一个新属性,它允许您为不同的屏幕尺寸/方向/显示类型指定不同类型的图像。 The usage is really simple, you just provide a lot of different images separating them with a comma like this: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">
.用法非常简单,您只需提供许多不同的图像,用逗号分隔它们,如下所示:
<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">
。 Here is an example: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
这是一个例子:
srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
This is a longer answer which explains things in more details.这是一个更长的答案,它更详细地解释了事情。
Difference between srcset and picture . srcset 和 picture 之间的区别。 Both
srcset
and picture
does approximately the same things, but there is a subtle difference: picture
dictates what image the browser should use, whereas srcset
gives the browser a choice. srcset
和picture
做的事情大致相同,但有一个细微的区别: picture
指示浏览器应该使用什么图像,而srcset
给浏览器一个选择。 A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on.很多东西都可以用来选择这个选项,比如视口大小、用户偏好、网络条件等。 The support for
srcset
is pretty good and almost all current browsers more or less support it.对
srcset
的支持非常好,几乎所有当前的浏览器或多或少都支持它。 Situation with a picture
element is a little bit worse .形势与
picture
元素是有点差。
Descriptors are just a way to show what kind of image is hidden behind the resource.描述符只是显示隐藏在资源后面的图像类型的一种方式。 There are various kinds of descriptors:
有多种描述符:
srcset="image.jpg, image-2X.jpg 2x"
The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. srcset="image.jpg, image-2X.jpg 2x"
显示密度值srcset="image.jpg, image-2X.jpg 2x"
、2x 等——被称为显示密度描述符。 If a display density descriptor isn't provided, it is assumed to be 1x.srcset="image-240.jpg 240w, image-640.jpg 640w"
. srcset="image-240.jpg 240w, image-640.jpg 640w"
。 I am sure this is self explanatory.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">
. 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">
。 The instructions for the browser would look like this: (max-width: 480px) 100vw
— if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width.(max-width: 480px) 100vw
— 如果视口(max-width: 480px) 100vw
为 480 像素或更小,则图像将是视口宽度的 100%。 (max-width: 900px) 33vw
— if the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. (max-width: 900px) 33vw
— 如果视口(max-width: 900px) 33vw
为 480 像素或更小,由于先前的媒体条件,将永远不会达到此规则。 And 254px is when there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met. Just for completeness will add here that there is an image-set() attribute for a background image in CSS and some other helpful link here只是为了完整性将增加在这里,有一个图像组()属性在CSS背景图像和其他一些有用的链接在这里
Here is a detailed guide on srcset along with code samples.这是关于 srcset的详细指南以及代码示例。
srcset
allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device's resolution. srcset
允许您定义不同图像资源的列表以及大小信息,以便浏览器可以根据实际设备的分辨率选择最合适的图像。
Each comma-separated item in srcset
has: srcset
每个逗号分隔项都有:
http://ik.imagekit.io/demo/default-image.jpg
or relative path /demo/default-image.jpg
http://ik.imagekit.io/demo/default-image.jpg
或相对路径/demo/default-image.jpg
1.5x
, 2x
etc.1.5x
、 2x
等。450w
.450w
。 This is the width of the image in pixels.The syntax for display density descriptors is straightforward.显示密度描述符的语法很简单。
srcset
provides a comma-separated list of image resources along with display density it should be used, for example 1x
, 2x
etc. srcset
提供了一个逗号分隔的图像资源列表以及它应该使用的显示密度,例如1x
、 2x
等。
<img src="image.jpg"
srcset="image.jpg,
image_2x.jpg 2x"
/>
Live demo - https://imagekitio.github.io/responsive-images-guide/srcset-density.html .现场演示 - https://imagekitio.github.io/responsive-images-guide/srcset-density.html 。
The syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.语法类似于显示密度描述符,但我们提供图像的实际宽度而不是显示密度值。
<img src="image.jpg"
srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 900w"
/>
This lets the browser pick the best image这让浏览器选择最佳图像
Using width descriptor allows the browser to pick the best candidate from srcset
based on the actual width needed to render that image on that particular display at runtime.使用宽度描述符允许浏览器根据运行时在特定显示器上呈现该图像所需的实际宽度从
srcset
选择最佳候选。
Note that display pixel density is also taken into account by the browser while calculating the required width.请注意,浏览器在计算所需宽度时也会考虑显示像素密度。 😎
😎
For example, assuming an image takes up the whole viewport width - On a 300px wide screen with DPR 2, the browser will pick medium.jpg
because it needs a 300x2=600px wide image.例如,假设图像占据整个视口宽度 - 在 DPR 2 的
medium.jpg
宽屏幕上,浏览器将选择medium.jpg
因为它需要 300x2=600 像素宽的图像。 On a 300px wide screen with DPR value 3, the browser will select large.jpg
because it needs a 300x3=900px wide image.在 DPR 值为 3 的 300px 宽屏幕上,浏览器将选择
large.jpg
因为它需要一个 300x3=900px 宽的图像。
Demo - srcset with width descriptor演示 - 带有宽度描述符的 srcset
Let see this in action with a live demo - https://imagekitio.github.io/responsive-images-guide/srcset-width.html .让我们通过现场演示来看看这个 - https://imagekitio.github.io/responsive-images-guide/srcset-width.html 。
Here is a good article on the srcset
attribute and how to use it.这是一篇关于
srcset
属性以及如何使用它的好文章。 srcet
allows you to declare a set of images to be displayed on different viewport sizes. srcet
允许您声明一组要在不同视口大小上显示的图像。 You just have to save and image at different resolutions eg banner-phone-HD.jpeg would be the highest resolution.您只需要以不同的分辨率保存和图像,例如banner-phone-HD.jpeg 将是最高分辨率。
Exmaple:例子:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
The above would serve banner-phone.jpeg to devices with viewport width under 640px, banner-phone-HD.jpeg to small screen high DPI devices, banner-HD.jpeg to high DPI devices with screens greater than 640px, and banner.jpeg to everything else.以上将提供banner-phone.jpeg 到视口宽度低于640px 的设备,banner-phone-HD.jpeg 到小屏幕高DPI 设备,banner-HD.jpeg 到屏幕大于640px 的高DPI 设备,以及banner.jpeg到其他一切。
There are also other methods like CSS media queries you can use to produce the same effect.您还可以使用其他方法(例如 CSS 媒体查询)来产生相同的效果。
I am not aware of any JQuery plugins which would help with this.我不知道有任何 JQuery 插件可以帮助解决这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.