响应式图片

为什么要用响应式图片

<img
      srcset="/images/eval-fairy/elva-480w-close-portrait.png 480w, /images/eval-fairy/elva-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
         800px"
      src="/images/eval-fairy/elva-800w.jpg"
      alt="Elva dressed as a fairy"
    >

chatgpt: 这是使用srcset属性和sizes属性实现响应式图片的示例代码。srcset属性允许我们为不同分辨率的显示器选择不同大小的图片，并在图片源中提供适当的大小选项，以便浏览器可以选择最合适的图像进行加载。sizes属性告诉浏览器如何分配可用空间，从而在不同的屏幕尺寸下更好地放置图像。

具体来说，该示例代码中，图片有两个版本：一个480像素宽、纵向紧密剪裁的版本和一个800像素宽、水平展开的版本。srcset属性将这两个版本指定为备选选项，并告诉浏览器如果设备需要一个480像素宽或800像素宽的图片，哪个版本应该被使用。sizes属性告诉浏览器，如果设备宽度小于600像素，则取480像素的版本，否则取800像素的版本。如果设备支持srcset和sizes属性，那么浏览器会根据设备的屏幕大小和分辨率自动选择合适的图片，以便提高用户体验和网站性能。

最后，src属性提供了一个默认的图片版本，以防浏览器不支持srcset和sizes属性。alt属性提供了图片的替代文本，以便在图像无法显示时提供有用的信息。

chorme有bug, 最好在firefox上实验

https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working