响应式图片

#HTML #前端

图片响应式设计旨在根据不同设备和屏幕尺寸提供适合的图片资源，以提高页面加载速度和用户体验。

1. 背景和重要性

响应式图片技术通过提供不同尺寸和分辨率的图片，确保在各种设备上都能获得最佳的显示效果和性能。

2. 基本概念

响应式图片:
- 根据设备特性（如屏幕尺寸、分辨率等）动态选择和加载合适的图片。
视口（Viewport）:
- 用户设备的可视区域。
DPR（Device Pixel Ratio）:
- 设备像素比，表示设备物理像素与CSS像素的比例。

3. 实现方法

3.1. 使用 `srcset` 和 `sizes` 属性

srcset 和 sizes 属性是 HTML5 中引入的，用于指定不同分辨率和尺寸的图片资源。

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 100vw" 
     alt="Responsive Image">

srcset: 定义一组图片资源及其对应的宽度描述符（如 500w 表示 500像素宽）
sizes: 定义图片在不同视口宽度下的显示尺寸（如(max-width: 600px) 480px表示视口宽度小于600px时图片宽度为480px）。

浏览器会根据视口大小和设备像素比自动选择最合适的图片进行加载。

3.2. 使用 `<picture>` 元素

<picture> 元素提供了更强大的响应式图片支持，可以根据不同的媒体条件加载不同的图片资源。

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Responsive Image">
</picture>

<source>:
- 定义不同的媒体条件和对应的图片资源
<img>:
- 定义默认图片，当所有媒体条件都不满足时加载

4. 示例

4.1. 使用 `srcset` 和 `sizes`

<img src="images/default.jpg"
     srcset="images/small.jpg 480w, images/medium.jpg 800w, images/large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 100vw"
     alt="Example of responsive image">

4.2. 使用 `<picture>` 元素

<picture>
  <source media="(max-width: 600px)" srcset="images/small.jpg">
  <source media="(max-width: 1200px)" srcset="images/medium.jpg">
  <img src="images/large.jpg" alt="Example of responsive image">
</picture>