如何使用img标签和picture标签的srcset/sizes属性

用响应式图片优化图片显示

响应式图片是一种 HTML 技术，它定义了如何在响应式网站上处理图片。通过使用 HTML 的“响应式图片”，您只需使用 HTML 标签即可提供针对查看设备定制的图片。
1.您可以仅使用 HTML 处理响应式图片，而无需使用 CSS 或 JavaScript。
2.根据设备的不同，图片可以以最佳“尺寸”显示。
3.您可以根据设备以最佳“外观”整理图片。

显示不同尺寸图片的问题

在响应式网站上显示图片时，您需要准备适合所有设备宽度和分辨率的图片，例如智能手机、平板电脑、笔记本电脑和台式电脑。如何创建不同尺寸的图片并显示不同的图片？

微信截图_20241204115018.png

响应式图像中的图像分离

要在响应式图像中执行上述图像排序过程，img请在 HTML 标记中写入三条信息。

图像文件路径
图像文件宽度
网页显示图片时的宽度

HTML 代码如下。需要注意的是img标签中指定的srcset属性和属性sizes。

<img srcset="images/small.jpg 320w,
          images/medium.jpg 640w,
          images/large.jpg 1280w"
     src="images/large.jpg"
     sizes="(max-width:1280px) 100vw, 1280px">

图片文件路径和宽度是srcset属性

图像文件的路径和宽度写入img标签属性中。请注意，“图像文件的宽度”不是“图像在网页上显示时的宽度” 。srcset

  srcset="images/small.jpg 320w,
        images/medium.jpg 640w,
        images/large.jpg 1280w"

在路径和宽度之间插入半角空格。宽度单位是（宽度描述符）px而不是w。这告诉浏览器small.jpg这是一个 320px 图像、medium.jpg一个 640px 图像和一个 1280px 图像。large.jpg

显示图像时的宽度是sizes一个属性

sizes属性中描述了要显示的图像的宽度。可以结合媒体查询指定多个宽度。如果要在显示器为 1280px 或以下时以屏幕宽度显示图像，否则以 1280px 显示图像，如下。

sizes="(max-width:1280px) 100vw, 1280px"
vw表示与视口宽度的比例。100vw表示 100% 的视口宽度。如果指定sizes该属性100vw，图像大小通常会根据窗口宽度的变化而变化。然而，100vw即使你只指定Safari，它也不会随着窗口宽度而改变。如果您想根据包括 Safari 在内的所有浏览器的窗口宽度更改图像大小，最好在 CSSwidth属性中指定它。%

浏览器将为您选择最好的图像

传统的图像响应能力，开发者需要根据环境来决定显示哪张图像，比如当屏幕宽度为1280px以上时large.jpg，以及当屏幕宽度小于1280px且设备像素比为2时对于响应式图像，由浏览器决定显示哪个图像。medium.jpg

根据“图像文件路径/宽度和所需图像宽度”信息，根据客户端环境显示最佳图像。开发人员不再需要担心哪个屏幕宽度应该显示哪个图像。

需要注意的是，“根据环境确定最佳图像”的机制因浏览器而异。例如，行为如下。

Chrome：如果缓存了大图片文件，即使屏幕宽度变窄也不会加载小图片。
Firefox：每次屏幕宽度发生变化时，加载适合屏幕宽度尺寸的图像。
Safari：根据首次打开屏幕的宽度缓存图像文件，即使屏幕宽度改变也不会重新加载图像。
当简单地使用不同尺寸的图像时，该方法没有任何特殊问题，但是当例如您想要为手机显示不同的裁剪图像时，则不能使用该方法。

控制图像显示方式的最佳视图

如果显示器足够宽，这就是最佳视图，但如果显示器很窄，则不是最佳视图。
160926_responsive_image_photoshop_no_artdirection__960.jpg

在像这样的主视觉中，主题是兔子的脸。对于窄显示屏，最好显示仅裁剪脸部的图像。
160926_responsive_image_photoshop_dist_artdirection__960.jpg

每个设备看起来不同的图像进行排序并选择最佳的图像呈现方式的方法。如上所述，单独使用srcset属性和属性sizes来强制显示每个设备宽度的图像是不可能的。picture元素可以作为在一定条件下强制切换图像的一种方法。

使用picture的元素标签展示最佳图片

picture使用元素，开发人员可以根据屏幕分辨率、屏幕宽度、图像格式等分发任意图像。

picture我将向您展示如何编写元素。

<picture>
  <source media="(max-width:400px)" srcset="sp.jpg 400w" sizes="100vw">
  <source media="(max-width:600px)" srcset="tab.jpg 600w" sizes="100vw">
  <img src="pc.jpg">
</picture>

picture标签由多个source标签和一个标签组成。为标签指定三个属性。imgsource

media属性（媒体查询）
srcset属性
sizes属性
浏览器评估每个source标签的属性，如果找到匹配项，则显示该属性指定的图像。如果未找到匹配项或浏览器不支持该元素，则显示标签图像。需要指定标签。media srcset picture img

picture示例

520px当图像小于屏幕宽度时cropped.jpg显示裁剪图像 ()。如果大于屏幕宽度，则将其重写为标签，520px同时重用之前的处理。

<picture>
  <source media="(max-width:520px)"
          srcset="images/cropped.jpg 640w"
          sizes="100vw">
  <source srcset="images/medium.jpg 640w,
                  images/large.jpg 1280w"
          sizes="(max-width:1280px) 100vw,
                    1280px">
  <img src="images/large.jpg"
       alt="">
</picture>