响应式图片需兼顾显示效果与加载性能，通过srcset和sizes属性可让浏览器根据屏幕尺寸自动选择最优分辨率图片；响应式排版则需确保文字在不同设备上的可读性，避免过大或过小。

案例5-3：根据屏幕尺寸加载不同分辨率图片
为同一图片提供低、中、高三种分辨率版本，浏览器根据屏幕宽度选择合适图片。核心代码如下：

<img src="image-small.jpg"
srcset="image-small.jpg 400w,
image-medium.jpg 800w,
image-large.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
800px"
alt="响应式图片示例">

参数配合：

• srcset定义图片源及宽度（400w表示图片实际宽度400px）
• sizes定义图片在不同屏幕下的显示宽度（100vw为屏幕宽度100%）
• 浏览器通过计算"显示宽度/设备像素比"选择最优图片