CSS 响应式图片与视频全攻略：从基础到进阶

在当今设备多样化的时代，网页内容不再只在桌面端展示，更多地出现在手机、平板、甚至电视屏幕上。这种变化对图片和视频的展示提出了新的要求：如何在不同尺寸、不同分辨率、不同网络环境下，提供清晰且高性能的媒体体验？答案就是响应式图片与视频技术。

一、为什么需要响应式图片？

设想一个场景：

• 用户用手机访问你的网站，你返回了一张 3000px 的高清大图；
• 然而用户的设备屏幕宽度可能只有 375px；
• 这不仅浪费流量，还严重拖慢了页面加载速度；
• 相反，如果桌面端看到的图片分辨率太低，又会模糊不清。

因此，响应式图片的目标就是：

根据用户设备特性（屏幕宽度、分辨率、网络状况等）提供合适的图片版本。

二、响应式图片基础方案：srcset 与 sizes

1. srcset：提供多图选项

<img 
  src="default.jpg" 
  srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
  alt="响应式图片示例">

• 480w：表示图片实际宽度为 480 像素；
• 浏览器会根据设备特性（如屏幕宽度、DPR）选择最合适的图片。

2. sizes：告诉浏览器图片将占据多大空间

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

解释：

• 视口 ≤ 600px：使用宽度 = 视口宽度（100vw）
• 视口 ≤ 1200px：使用宽度 = 视口宽度的 50%
• 其他情况：宽度为 800px

三、进阶方案：<picture> 元素

有些场景中，仅仅改变图片尺寸还不够，比如你想在横屏和竖屏时使用不同的裁剪图。这时候就要用 <picture>。

1. 基于媒体查询显示不同图像：

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="艺术指导示例">
</picture>

• <source>：多个条件判断；
• <img>：兜底选项，必须提供！

2. 提供下一代图片格式（WebP）：

<picture>
  <source type="image/webp" srcset="image.webp">
  <source type="image/jpeg" srcset="image.jpg">
  <img src="image.jpg" alt="格式优化示例">
</picture>

• 如果浏览器支持 WebP，会优先加载；
• 不支持则自动降级为 JPEG。

四、响应式视频方案

视频同样可以实现响应式处理：

1. 多版本视频源（media 属性）：

<video controls width="100%">
  <source src="video-large.mp4" media="(min-width: 1024px)">
  <source src="video-medium.mp4" media="(min-width: 768px)">
  <source src="video-small.mp4">
</video>

• 不同屏幕宽度加载不同视频文件；
• 注意顺序：从大到小排列。

2. 响应式封面图（使用 <picture>）：

<video controls width="100%" poster="">
  <picture>
    <source media="(min-width: 1024px)" srcset="poster-large.jpg">
    <source media="(min-width: 768px)" srcset="poster-medium.jpg">
    <img src="poster-small.jpg" alt="视频封面">
  </picture>
  <source src="video.mp4" type="video/mp4">
</video>

• <video> 的 poster 属性可以嵌入 <picture> 元素进行多版本处理；
• 浏览器会自动选取最合适的封面图。

五、实战建议与优化技巧

✅ 必须包含 <img> 默认项

无论是否使用 <picture>，最终 <img> 是兜底项，一定要写！

✅ 合理设置断点

不要盲目套用框架的断点，比如 Bootstrap 的 768px/992px/1200px。应根据实际图片和内容展示逻辑设置。

✅ 多环境测试

• 不同设备尺寸（手机、平板、桌面）；
• 不同像素密度（1x / 2x / 3x）；
• 网络慢速环境下观察加载行为。

✅ 使用工具生成多版本图片

• 本地自动化：image-webpack-loader、sharp、gulp-responsive；
• 在线工具：如 Squoosh.app 可快速压缩与导出多尺寸格式。

✅ 图片懒加载

对于非首屏内容，使用原生懒加载：

<img src="lazy.jpg" loading="lazy" alt="延迟加载图像">

结语

响应式图片与视频并不只是“炫技”，而是现代前端性能优化和用户体验的关键一环。合理利用 srcset、sizes、<picture> 和媒体查询，可以大大提升你网页的加载速度与视觉表现，为用户呈现最优的内容体验。