响应式图像解决方案HTML方式，浏览器原生支持

网页在不同尺寸的设备上都有良好的显示效果，称为“响应式网页设计”。

响应式设计的网页图像是“响应式图像”。

响应式图像的解决方案有很多，JavaScript和CSS都可以实现。本文介绍一种最简单、最语义化的 HTML 方法，浏览器原生支持这种方法。

1。问题由来

我们知道标签是用来插入网页图片的。在所有情况下，默认情况下都会插入相同的图像。

<img >

以上代码在桌面和移动设备上插入图像文件foo.jpg。

这种加工方法简单，但有三大缺点。

(1) 大小

一般情况下，桌面显示的图片较大，文件也较大。手机屏幕较小，只需要较小的图像，可以节省带宽并加快网页的渲染速度。

(2) 像素密度

桌面显示器一般具有单一像素密度，而手机显示器往往具有多像素密度，即多个像素组合成一个像素，称为Retina显示器。图像文件在桌面上可能会非常清晰，但在手机上会有点模糊，因为像素较大。

(3) 视觉风格

桌面显示器表面积更大，图像容纳更多细节。手机屏幕小，很多细节看不清楚，所以要强调最重要的一点。

上面两张照片之后，下面的手机照片经过了裁剪，突出了图像的关键点，效果明显更好。

2。像素密度选择：srcset属性

为了解决上一节中的这些问题，HTML语言提供了完整的解决方案。首先，标签引入属性srcset。

srcset属性用于指定多个图像并将其缩放到具有不同像素密度的屏幕。它的值是一个以逗号分隔的字符串，其中每个部分都是图像的 URL，后跟一个空格，然后是像素密度的描述符。请参阅下面的示例。

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     >
 

在上面的代码中，属性srcset返回三种不同像素密度的三个图像URL。

图像URL后的像素密度描述符，格式为多个像素密度+字母x。 1x表示一个像素点的密度，可以省略。浏览器根据当前设备的像素密度选择要加载的图像。

如果srcset属性不满足条件，则加载src属性指定的默认图像。

3。图片尺寸选择： srcset属性 + sizes属性

像素密度的适配仅适用于与显示区域大小相同的图片。如果希望不同尺寸的屏幕显示不同尺寸的图片，仅使用srcset属性是不够的，必须与sizes属性相匹配。

第一步，srcset属性列出所有可用图像。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     >

在上面的代码中，srcset属性列出了四个可用图像。每个图像的 URL 后面跟着一个空格和一个宽度描述符。

宽度描述符是图像的原始宽度加上字符w。上例中四张图像的原始宽度分别为160像素、320像素、640像素和1280像素。

第二步，sizes属性列出了不同设备的图像显示宽度。

sizes 属性的值是一个以逗号分隔的字符串。除了最后一部分之外，前面的每一部分都是放在括号中的媒体查询表达式，后面跟一个空格，加上图像的显示。宽度。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     >

上面代码中，sizes属性给出了三种屏幕条件以及对应的图像显示宽度。对于宽度不超过440像素的设备，图像显示宽度为100%；对于宽度为441像素至900像素的设备，图像显示宽度为33%；对于宽度为 900 像素或以上的设备，图像显示宽度为254px。

第三步，浏览器根据当前设备的宽度，从sizes属性中获取图片的显示宽度，然后从中找到与宽度最接近的图片srcset属性，并执行加载。

假设当前设备的屏幕宽度为480px，浏览器通过sizes属性查询获取。图片的显示宽度为 33vw（即33%），等于160px。在srcset属性中，恰好有一张宽度等于160px的图片，所以加载了foo-160.jpg。

请注意，sizes属性必须与srcset属性一起使用。单独使用 sizes 属性是无效的。

四、标签、标签

上面两节分别解决了像素密度和屏幕尺寸的调整，但如果你想在同时对于不同像素密度、不同尺寸的屏幕我们该怎么办？

此时您应该使用标签。它是一个容器标签，内部使用 和 来指定在不同条件下加载的图像。

<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img  alt="cat">
</picture>

上述代码中，标签中有2个标签和1个标签。

标签的media属性给出媒体查询表达式，srcset属性是 标签。 srcset 属性，生成加载的图像文件。此处可以使用属性 sizes，但由于属性 media，这不是必需的。

浏览器按照标签出现的顺序判断当前设备是否匹配media属性的媒体查询表达式。如果是这样，则加载 srcset。 属性指定的图像文件以及以下标签和标签将不再输出。标签

是默认加载的图片，以满足上述所有不匹配的情况。

上例中，如果设备宽度不大于500px，则加载竖屏截图，否则加载横屏截图。

下面给出一个示例，考虑到屏幕尺寸和像素密度调整。

<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

上述代码中，标签的media属性指定了屏幕尺寸调整的条件。每个条件都使用属性 srcset，然后返回两个像素密度的图像 URL。

5。 标签 type属性

除了响应式图片之外，还可以使用标签。选择不同的图像尺寸。例如，如果当前浏览器支持Webp格式，则加载该格式的图片，否则加载PNG图片。

<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img  alt="ACME Corp">
</picture>

上述代码中，标签的type属性表示图片的MIME类型，srcset就是对应的图片 -网址。

浏览器按照标签出现的顺序检查是否支持由type属性指定的图像格式。如果支持此功能，它将加载图像而不检查下一个标记的 。在上例中，加载图像的优先级是SVG格式、WebP格式和PNG格式。