图片是互联网的重要组成部分，让网页变得丰富多彩。

1、<img>

img标签用于插入图片，单标签。 img标签是一个行内标签。 img标签可以被放在a标签内部。

• alt属性，设定图片的文字说明
• width和height属性，设定图片显示的宽度和高度（css设置）
• srcset，sizes
• referrerpolicy
• crossorigin属性，跨域请求下载图片
• loading属性，指定图片的懒加载:auto,lazy,eager

2、<figure>,<figcaption>

figure标签定义为一个图像区块，将图像和相关信息封装在一起。 figcaption标签为可选子元素，表示图像的文本描述，通常用于放置标题。 figure标签是将主体内容与附加信息封装在一起的语义容器。

3、响应式图像

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”。 img标签插入图像有弊端。

• 桌面端图像大尺寸，手机端只需要小尺寸。
• 桌面端一般为单倍像素密度，手机端往往是多倍像素密度，导致图像在桌面端很清晰，在手机端模糊。
• 桌面端可以图像可以容纳更多细节，手机端需要突出重点。 解决方案：
• srcset属性：指定多张图像，适应不同像素密度的屏幕。
• sizes属性：指定不同设备的图像显示宽度
• sizes属性必须与srcset属性搭配使用，单独使用sizes属性无效。

4、<picture>

picture标签是一个容器标签，内部使用source和img，指定不同情况下加载的图像。

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

picture标签还可以用来选择不同格式的图像。Webp格式或PNG图像。