img标签里的srcset和sizes是什么

发表于 分类于

在使用 img 标签时，有几个 Emmet 带的扩展

里面有两个属性srcset和sizes，很惭愧这么久都没有怎么了解过它们，今天就来好好看看。

定义

简单来说这两个属性用于制作“响应式图像”，srcset属性用于适配屏幕不同的像素密度，sizes属性根据srcset来指定不同的图片尺寸。

srcset

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

  1. 图像的 URL。
  2. 可选地，空格后跟以下规则的其中之一：
    • 一个宽度描述符，是一个正整数，后面跟 w符号。该整数宽度除以sizes属性给出的图像大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
    • 一个像素密度描述符，这是一个正浮点数，后面紧跟 x 符号。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的srcset属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。

重复的描述符（比如，两个源 在相同的srcset两个源都是2x）也是无效的。

sizes

表示图像大小的以逗号隔开的一个或多个字符串。每一个资源大小包括：

  1. 媒体查询。最后一项不能有，用作 fallback。
  2. 一个图像尺寸的值。(可以是px,em或者vw,但不能是百分比噢)

资源尺寸的值被用来指定图像的预期尺寸。当srcset使用w描述符时，用户代理使用当前图像大小来选择srcset中合适的一个图像 URL。 被选中的尺寸影响图像的显示大小（如果没有 CSS 样式被应用的话）。如果没有srcset，或者没值，那么这个sizes属性将不起作用。

用法

试验之前说一句，由于 Chrome 会优先选择缓存图片而不是恰好适配的那个，所以推荐用火狐，可以实时预览变化。

话不多说直接看写法,

srcset 属性格式：图片地址 宽度描述 w 像素密度描述 x，多个资源之间用逗号分隔。

下面是使用像素密度描述x的例子，浏览器根据当前设备的像素密度来选择相应的图片加载。

1
<img srcset="320.png, 480.png 2x, 640.png 3x" src="640.png" />

下面是使用宽度描述w的例子，当浏览器宽度超过 320px 时加载 320.png，宽度超过 480px 时加载 480.png，宽度超过 640px 时加载 640.png。

1
<img srcset="320.png 320w, 480.png 480w, 640.png 640w" src="640.png" />

以上用法图片所占的区域大小是固定的，适合显示所占区域一样大小的图片。
那么如果需要在不同屏幕大小下使用不同尺寸的图片，就需要配合sizes属性来使用。

sizes 属性格式：媒体查询 宽度描述（支持 px），多条规则用逗号分隔。
下面例子浏览器宽度小于 320px 时图片宽度为 100vw，浏览器宽度小于 480px 时图片宽度为 50vw，其他情况图片宽度为 20vw

1
2
3
4
5
<img
  srcset="320.png 320w, 480.png 480w, 640.png 640w"
  sizes="(max-width: 320px) 100vw,(max-width: 480px) 50vw, 20vw"
  src="640.png"
/>

要注意，sizes属性必须与srcset属性搭配使用，单独使用无效。