根据设备的尺寸加载不同的图片

使用 srcset 和 sizes 属性

<img> 标签的 srcset 和 sizes 属性允许浏览器根据屏幕尺寸和分辨率选择最合适的图片。

<img 
  src="images/banner-small.jpg" 
  srcset="images/banner-small.jpg 480w, images/banner-medium.jpg 768w, images/banner-large.jpg 1024w"
  sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"
  alt="Responsive Banner"
>

src：默认图片，当浏览器不支持 srcset 时使用。
srcset：列出不同尺寸的图片及其宽度（以像素为单位）。
sizes：定义不同媒体查询条件下的图片宽度。例如，当屏幕宽度小于等于480px时，使用480px宽的图片。

使用 <picture> 元素

<picture> 元素提供了更灵活的方式来定义不同条件下的图片源。

<picture>
  <source media="(max-width: 480px)" srcset="images/banner-small.jpg">
  <source media="(max-width: 768px)" srcset="images/banner-medium.jpg">
  <img src="images/banner-large.jpg" alt="Responsive Banner">
</picture>

<source>：定义不同媒体查询条件下的图片源。
<img>：默认图片，当没有匹配的 时使用。