了解使用图片和HTML `img`标签的基本知识，以及如何使它们具有响应性
图片可以用img 标签来显示。
这个标签接受一个src 属性，我们用它来设置图像来源。
我们可以使用一组广泛的图像。最常见的是PNG、JPEG、GIF、SVG和最近的WebP。
HTML标准要求有一个alt 属性，以描述图像。这被屏幕阅读器和搜索引擎机器人所使用。
<img src="dog.png" alt="A picture of a dog" />
你可以设置width 和height 属性，以设置该元素将占用的空间，这样浏览器就可以考虑到这一点，并且在完全加载时不会改变布局。它需要一个数字值，以像素表示。
<img src="dog.png" alt="A picture of a dog" width="300" height="200" />
响应性图像使用srcset
srcset 属性允许你设置响应式图像，浏览器可以根据你的偏好，根据像素密度或窗口宽度来使用。通过这种方式，它可以只下载渲染页面所需的资源，如果是在移动设备上，例如，不需要下载更大的图像。
这里有一个例子，我们为4种不同的屏幕尺寸给出了4张额外的图片。
<img src="dog.png"
alt="A picture of a dog"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
在srcset ，我们使用w 措施来表示窗口宽度。
由于我们这样做，我们也需要使用sizes 属性。
<img src="dog.png"
alt="A picture of a dog"
sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
在这个例子中，sizes 属性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px 字符串描述了与视口有关的图像的大小，多个条件用逗号隔开。
媒体条件max-width: 500px 设置了与视口宽度相关的图像大小。简而言之，如果窗口大小<500px，它就以窗口大小的100%渲染图像。
如果窗口尺寸更大，但<900px ，它将以窗口尺寸的50%渲染图像。
如果再大一点，它就以800px的尺寸渲染图像。
vw 这个计量单位对你来说可能是新的，简而言之，我们可以说，1vw 是窗口宽度的1%，所以100vw 是窗口宽度的100%。
一个生成srcset 和逐渐变小的图像的有用网站是responsivebreakpoints.com/。
