程序猿指南
Search K

Appearance

10.4 响应式图像 ​

关键词: 响应式图像, picture元素, srcset属性, sizes属性, 图像优化, 自适应图像, 分辨率适配, WebP格式

学习目标 ​

  • 掌握响应式图像的各种实现技术
  • 深入理解picture元素的使用方法
  • 学会正确使用srcset和sizes属性
  • 掌握图像优化的最佳实践
  • 了解现代图像格式的应用

10.4.1 响应式图像技术 ​

基础响应式图像 ​

最简单的响应式图像实现是使用CSS控制图像尺寸：

html
<!-- 基础响应式图像 -->
<div class="basic-responsive-image">
    <img src="landscape.jpg" alt="美丽的风景" class="responsive-img">
</div>

<style>
    .basic-responsive-image {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .responsive-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
</style>

响应式图像的问题 ​

传统的响应式图像方法存在以下问题：

  1. 带宽浪费：小屏幕设备加载大图片
  2. 加载缓慢：高分辨率图片文件过大
  3. 用户体验差：图片加载时间过长

现代响应式图像解决方案 ​

html
<!-- 现代响应式图像解决方案 -->
<div class="modern-responsive-images">
    <!-- 基于分辨率的响应式图像 -->
    <div class="image-container">
        <img src="photo-800w.jpg"
             srcset="photo-400w.jpg 400w,
                     photo-800w.jpg 800w,
                     photo-1200w.jpg 1200w,
                     photo-1600w.jpg 1600w"
             sizes="(max-width: 480px) 100vw,
                    (max-width: 768px) 80vw,
                    (max-width: 1024px) 60vw,
                    50vw"
             alt="响应式图像示例"
             class="modern-img">
    </div>
    
    <!-- 基于像素密度的响应式图像 -->
    <div class="image-container">
        <img src="icon-1x.png"
             srcset="icon-1x.png 1x,
                     icon-2x.png 2x,
                     icon-3x.png 3x"
             alt="高清图标"
             class="pixel-density-img">
    </div>
</div>

<style>
    .modern-responsive-images {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .image-container {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .modern-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }
    
    .modern-img:hover {
        transform: scale(1.02);
    }
    
    .pixel-density-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
</style>

10.4.2 picture元素 ​

picture元素基础 ​

picture元素提供了一种声明式的方式来指定多个图像源：

html
<!-- picture元素基础示例 -->
<div class="picture-examples">
    <picture class="art-direction-example">
        <source media="(min-width: 1024px)" srcset="desktop-banner.jpg">
        <source media="(min-width: 768px)" srcset="tablet-banner.jpg">
        <img src="mobile-banner.jpg" alt="横幅图片" class="picture-img">
    </picture>
</div>

<style>
    .picture-examples {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .art-direction-example {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }
    
    .picture-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
</style>

艺术方向（Art Direction） ​

不同屏幕尺寸使用不同构图的图像：

html
<!-- 艺术方向示例 -->
<div class="art-direction-demo">
    <h3>产品展示</h3>
    <picture>
        <!-- 桌面端：横向展示，显示完整场景 -->
        <source media="(min-width: 1024px)" 
                srcset="product-desktop.jpg">
        
        <!-- 平板端：正方形构图，聚焦产品 -->
        <source media="(min-width: 768px)" 
                srcset="product-tablet.jpg">
        
        <!-- 移动端：竖向构图，产品特写 -->
        <img src="product-mobile.jpg" 
             alt="产品展示图" 
             class="art-direction-img">
    </picture>
    
    <div class="product-info">
        <h4>智能手机</h4>
        <p>最新款智能手机，为不同设备优化了展示效果。</p>
    </div>
</div>

<style>
    .art-direction-demo {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .art-direction-demo h3 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
    }
    
    .art-direction-img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .product-info {
        text-align: center;
    }
    
    .product-info h4 {
        color: #007bff;
        margin-bottom: 10px;
    }
    
    .product-info p {
        color: #666;
        line-height: 1.6;
    }
</style>

格式选择 ​

为不同浏览器提供不同格式的图像：

html
<!-- 格式选择示例 -->
<div class="format-selection">
    <h3>现代图像格式</h3>
    <div class="format-examples">
        <div class="format-item">
            <picture>
                <source srcset="image.avif" type="image/avif">
                <source srcset="image.webp" type="image/webp">
                <img src="image.jpg" alt="优化图像" class="format-img">
            </picture>
            <p>AVIF → WebP → JPEG</p>
        </div>
        
        <div class="format-item">
            <picture>
                <source srcset="vector.svg" type="image/svg+xml">
                <img src="vector.png" alt="矢量图像" class="format-img">
            </picture>
            <p>SVG → PNG</p>
        </div>
    </div>
</div>

<style>
    .format-selection {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .format-selection h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .format-examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }
    
    .format-item {
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .format-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .format-item p {
        color: #666;
        font-weight: 500;
        margin: 0;
    }
</style>

10.4.3 srcset属性 ​

基于宽度的srcset ​

html
<!-- 基于宽度的srcset示例 -->
<div class="width-based-srcset">
    <h3>基于宽度的图像选择</h3>
    <img src="gallery-800w.jpg"
         srcset="gallery-320w.jpg 320w,
                 gallery-480w.jpg 480w,
                 gallery-800w.jpg 800w,
                 gallery-1200w.jpg 1200w,
                 gallery-1600w.jpg 1600w,
                 gallery-2000w.jpg 2000w"
         sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                (max-width: 800px) 760px,
                (max-width: 1200px) 1160px,
                1600px"
         alt="画廊图片"
         class="width-based-img">
    
    <div class="info-box">
        <h4>智能图像选择</h4>
        <p>浏览器会根据设备特性和视口大小自动选择最适合的图像。</p>
    </div>
</div>

<style>
    .width-based-srcset {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .width-based-srcset h3 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    
    .width-based-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        margin-bottom: 20px;
    }
    
    .info-box {
        background: #e3f2fd;
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid #2196F3;
    }
    
    .info-box h4 {
        color: #1976D2;
        margin: 0 0 10px 0;
    }
    
    .info-box p {
        color: #333;
        margin: 0;
        line-height: 1.6;
    }
</style>

基于像素密度的srcset ​

html
<!-- 基于像素密度的srcset示例 -->
<div class="pixel-density-srcset">
    <h3>高清显示屏适配</h3>
    <div class="density-examples">
        <div class="density-item">
            <img src="logo-1x.png"
                 srcset="logo-1x.png 1x,
                         logo-2x.png 2x,
                         logo-3x.png 3x"
                 alt="公司Logo"
                 class="density-img">
            <p>自适应分辨率Logo</p>
        </div>
        
        <div class="density-item">
            <img src="icon-1x.png"
                 srcset="icon-1x.png 1x,
                         icon-2x.png 2x,
                         icon-3x.png 3x"
                 alt="应用图标"
                 class="density-img">
            <p>高清应用图标</p>
        </div>
        
        <div class="density-item">
            <img src="photo-1x.jpg"
                 srcset="photo-1x.jpg 1x,
                         photo-2x.jpg 2x"
                 alt="产品照片"
                 class="density-img">
            <p>产品高清照片</p>
        </div>
    </div>
</div>

<style>
    .pixel-density-srcset {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .pixel-density-srcset h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .density-examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }
    
    .density-item {
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease;
    }
    
    .density-item:hover {
        transform: translateY(-5px);
    }
    
    .density-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .density-item p {
        color: #666;
        font-weight: 500;
        margin: 0;
    }
</style>

10.4.4 sizes属性 ​

sizes属性详解 ​

sizes属性告诉浏览器图像在不同视口大小下的实际显示尺寸：

html
<!-- sizes属性详解 -->
<div class="sizes-explanation">
    <h3>sizes属性使用示例</h3>
    
    <!-- 复杂的sizes示例 -->
    <div class="complex-sizes">
        <img src="hero-800w.jpg"
             srcset="hero-400w.jpg 400w,
                     hero-800w.jpg 800w,
                     hero-1200w.jpg 1200w,
                     hero-1600w.jpg 1600w,
                     hero-2000w.jpg 2000w"
             sizes="(max-width: 480px) 100vw,
                    (max-width: 768px) 90vw,
                    (max-width: 1024px) 80vw,
                    (max-width: 1200px) 70vw,
                    1200px"
             alt="英雄横幅图片"
             class="complex-sizes-img">
    </div>
    
    <!-- 网格布局中的sizes -->
    <div class="grid-sizes">
        <div class="grid-item">
            <img src="card-400w.jpg"
                 srcset="card-200w.jpg 200w,
                         card-400w.jpg 400w,
                         card-600w.jpg 600w"
                 sizes="(max-width: 768px) 100vw,
                        (max-width: 1024px) 50vw,
                        33vw"
                 alt="卡片图片1"
                 class="grid-img">
        </div>
        <div class="grid-item">
            <img src="card-400w.jpg"
                 srcset="card-200w.jpg 200w,
                         card-400w.jpg 400w,
                         card-600w.jpg 600w"
                 sizes="(max-width: 768px) 100vw,
                        (max-width: 1024px) 50vw,
                        33vw"
                 alt="卡片图片2"
                 class="grid-img">
        </div>
        <div class="grid-item">
            <img src="card-400w.jpg"
                 srcset="card-200w.jpg 200w,
                         card-400w.jpg 400w,
                         card-600w.jpg 600w"
                 sizes="(max-width: 768px) 100vw,
                        (max-width: 1024px) 50vw,
                        33vw"
                 alt="卡片图片3"
                 class="grid-img">
        </div>
    </div>
</div>

<style>
    .sizes-explanation {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .sizes-explanation h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .complex-sizes {
        margin-bottom: 40px;
    }
    
    .complex-sizes-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    
    .grid-sizes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .grid-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .grid-item:hover {
        transform: translateY(-5px);
    }
    
    .grid-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }
    
    @media (max-width: 768px) {
        .grid-sizes {
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 1024px) and (min-width: 769px) {
        .grid-sizes {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

10.4.5 图像优化 ​

图像压缩和格式选择 ​

html
<!-- 图像优化示例 -->
<div class="image-optimization">
    <h3>图像优化对比</h3>
    
    <div class="optimization-comparison">
        <div class="comparison-item">
            <h4>传统方式</h4>
            <img src="large-image.jpg" alt="未优化图像" class="comparison-img">
            <div class="file-info">
                <p>格式：JPEG</p>
                <p>大小：~500KB</p>
                <p>加载时间：慢</p>
            </div>
        </div>
        
        <div class="comparison-item">
            <h4>现代优化</h4>
            <picture>
                <source srcset="optimized-image.avif" type="image/avif">
                <source srcset="optimized-image.webp" type="image/webp">
                <img src="optimized-image.jpg" alt="优化图像" class="comparison-img">
            </picture>
            <div class="file-info">
                <p>格式：AVIF/WebP/JPEG</p>
                <p>大小：~100KB</p>
                <p>加载时间：快</p>
            </div>
        </div>
    </div>
    
    <!-- 渐进式加载示例 -->
    <div class="progressive-loading">
        <h4>渐进式加载</h4>
        <div class="progressive-container">
            <img src="placeholder.svg" 
                 data-src="full-image.jpg"
                 data-srcset="full-image-400w.jpg 400w,
                              full-image-800w.jpg 800w,
                              full-image-1200w.jpg 1200w"
                 alt="渐进式加载图像"
                 class="progressive-img">
        </div>
    </div>
</div>

<style>
    .image-optimization {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .image-optimization h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .optimization-comparison {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
        margin-bottom: 40px;
    }
    
    .comparison-item {
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .comparison-item h4 {
        color: #333;
        margin-bottom: 15px;
    }
    
    .comparison-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .file-info {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        text-align: left;
    }
    
    .file-info p {
        margin: 5px 0;
        color: #666;
    }
    
    .progressive-loading {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 12px;
    }
    
    .progressive-loading h4 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    
    .progressive-container {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    
    .progressive-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        transition: opacity 0.3s ease;
    }
    
    .progressive-img[data-src] {
        filter: blur(2px);
        opacity: 0.7;
    }
    
    .progressive-img.loaded {
        filter: none;
        opacity: 1;
    }
</style>

<script>
// 渐进式加载实现
document.addEventListener('DOMContentLoaded', function() {
    const progressiveImages = document.querySelectorAll('.progressive-img');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                const src = img.getAttribute('data-src');
                const srcset = img.getAttribute('data-srcset');
                
                if (src) {
                    img.src = src;
                    img.removeAttribute('data-src');
                }
                
                if (srcset) {
                    img.srcset = srcset;
                    img.removeAttribute('data-srcset');
                }
                
                img.addEventListener('load', () => {
                    img.classList.add('loaded');
                });
                
                observer.unobserve(img);
            }
        });
    });
    
    progressiveImages.forEach(img => {
        imageObserver.observe(img);
    });
});
</script>

图像懒加载 ​

html
<!-- 图像懒加载示例 -->
<div class="lazy-loading-demo">
    <h3>图像懒加载</h3>
    <div class="image-gallery">
        <div class="gallery-item">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23666'%3E加载中...%3C/text%3E%3C/svg%3E"
                 data-src="gallery-1.jpg"
                 data-srcset="gallery-1-400w.jpg 400w,
                              gallery-1-800w.jpg 800w"
                 alt="画廊图片1"
                 class="lazy-img">
        </div>
        
        <div class="gallery-item">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23666'%3E加载中...%3C/text%3E%3C/svg%3E"
                 data-src="gallery-2.jpg"
                 data-srcset="gallery-2-400w.jpg 400w,
                              gallery-2-800w.jpg 800w"
                 alt="画廊图片2"
                 class="lazy-img">
        </div>
        
        <div class="gallery-item">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23666'%3E加载中...%3C/text%3E%3C/svg%3E"
                 data-src="gallery-3.jpg"
                 data-srcset="gallery-3-400w.jpg 400w,
                              gallery-3-800w.jpg 800w"
                 alt="画廊图片3"
                 class="lazy-img">
        </div>
    </div>
</div>

<style>
    .lazy-loading-demo {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .lazy-loading-demo h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .image-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 20px;
    }
    
    .gallery-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover {
        transform: translateY(-5px);
    }
    
    .lazy-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: opacity 0.3s ease;
    }
    
    .lazy-img[data-src] {
        opacity: 0.7;
    }
    
    .lazy-img.loaded {
        opacity: 1;
    }
</style>

现代图像格式 ​

html
<!-- 现代图像格式示例 -->
<div class="modern-formats">
    <h3>现代图像格式对比</h3>
    <div class="format-comparison">
        <div class="format-card">
            <picture>
                <source srcset="sample.avif" type="image/avif">
                <source srcset="sample.webp" type="image/webp">
                <img src="sample.jpg" alt="AVIF格式" class="format-img">
            </picture>
            <div class="format-info">
                <h4>AVIF</h4>
                <p>最新格式，压缩率最高</p>
                <ul>
                    <li>比JPEG小50%</li>
                    <li>支持透明度</li>
                    <li>支持动画</li>
                </ul>
            </div>
        </div>
        
        <div class="format-card">
            <picture>
                <source srcset="sample.webp" type="image/webp">
                <img src="sample.jpg" alt="WebP格式" class="format-img">
            </picture>
            <div class="format-info">
                <h4>WebP</h4>
                <p>广泛支持的现代格式</p>
                <ul>
                    <li>比JPEG小25-30%</li>
                    <li>广泛的浏览器支持</li>
                    <li>支持透明度和动画</li>
                </ul>
            </div>
        </div>
        
        <div class="format-card">
            <img src="sample.jpg" alt="JPEG格式" class="format-img">
            <div class="format-info">
                <h4>JPEG</h4>
                <p>传统格式，兼容性最好</p>
                <ul>
                    <li>所有浏览器支持</li>
                    <li>文件较大</li>
                    <li>不支持透明度</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    .modern-formats {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .modern-formats h3 {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
    }
    
    .format-comparison {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
    }
    
    .format-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .format-card:hover {
        transform: translateY(-5px);
    }
    
    .format-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .format-info {
        padding: 20px;
    }
    
    .format-info h4 {
        color: #007bff;
        margin: 0 0 10px 0;
    }
    
    .format-info p {
        color: #666;
        margin-bottom: 15px;
    }
    
    .format-info ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .format-info li {
        color: #333;
        margin-bottom: 5px;
        padding-left: 20px;
        position: relative;
    }
    
    .format-info li:before {
        content: "✓";
        color: #28a745;
        position: absolute;
        left: 0;
    }
</style>

本节要点回顾 ​

  • 响应式图像技术：使用srcset、sizes和picture元素实现智能图像加载
  • picture元素：为不同场景提供不同图像，支持艺术方向和格式选择
  • srcset属性：基于宽度或像素密度提供多个图像版本
  • sizes属性：告诉浏览器图像的实际显示尺寸，帮助选择合适的图像
  • 图像优化：使用现代格式、压缩技术和懒加载提升性能

相关学习资源 ​

常见问题FAQ ​

Q: 什么时候使用srcset，什么时候使用picture？ ​

A: srcset适用于同一图像的不同尺寸版本；picture适用于需要艺术方向（不同构图）或格式选择的情况。

Q: sizes属性是必需的吗？ ​

A: 当使用基于宽度描述符的srcset时，sizes属性是必需的。它帮助浏览器计算图像的实际显示尺寸。

Q: 如何为老旧浏览器提供后备支持？ ​

A: 始终在picture元素中提供img标签作为后备，在srcset中提供默认的src属性。老旧浏览器会忽略不支持的属性。

Q: 现代图像格式如何选择？ ​

A: 优先使用AVIF（最小文件），然后是WebP（广泛支持），最后是JPEG/PNG（完全兼容）。使用picture元素提供多种格式。

Q: 如何测试响应式图像的效果？ ​

A: 使用浏览器开发者工具的网络面板查看实际加载的图像，使用设备模拟器测试不同屏幕尺寸，检查图像的文件大小和加载时间。

第十章总结：我们已经完成了HTML5响应式设计的全部内容，从基础概念到高级技术，涵盖了移动优先设计、弹性布局、现代CSS技术和图像优化等关键主题。这些知识将帮助您创建出色的响应式网页应用。