响应式图片与 Bootstrap 完美集成方案
2026-05-20 ·
响应式图片是提升页面加载性能的关键环节。本文将介绍在 Bootstrap 项目中实现响应式图片的完整方案，从基础类到高级优化技术。
1. 基础：Bootstrap 图片类
<!-- 响应式图片：跟随父容器缩放 -->
<img src="photo.jpg" class="img-fluid" alt="响应式图片">
<!-- 圆角图片 -->
<img src="avatar.jpg" class="rounded-circle" width="100" height="100" alt="头像">
<!-- 缩略图 -->
<img src="thumb.jpg" class="img-thumbnail" alt="缩略图">
2. srcset 与 sizes
使用 srcset 为不同屏幕宽度提供不同分辨率的图片：
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 576px) 100vw,
(max-width: 768px) 50vw,
33vw"
class="img-fluid"
alt="响应式 srcset 示例">
3. picture 元素与 WebP
使用 picture 元素支持多种格式，优先使用 WebP：
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.avif" type="image/avif">
<img src="photo.jpg" class="img-fluid" alt="回退到 JPG">
</picture>
4. 懒加载
Bootstrap 5 支持原生懒加载，无需额外 JavaScript：
<img src="large-photo.jpg" class="img-fluid" loading="lazy" alt="延迟加载图片">
添加 loading="lazy" 属性即可启用原生懒加载，浏览器会自动判断图片何时进入视口。对于首屏图片（above the fold）不要加 lazy 属性。
5. 图床/CDN 优化
使用现代图床服务（如 Cloudinary、Imgix）可实现实时图片处理：
<!-- 动态调整图片尺寸和质量 -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800,q_auto/photo.jpg"
class="img-fluid" alt="CDN 优化图片">