MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS 响应式图片srcset与sizes属性的使用场景

2023-10-222.9k 阅读

理解响应式图片的重要性

在当今多设备、多屏幕尺寸的时代，确保网站上的图片在各种设备上都能完美显示至关重要。从桌面电脑的大尺寸显示器到手机的小屏幕，图片需要自适应不同的分辨率和屏幕宽度，以提供最佳的用户体验。传统的<img>标签虽然简单易用，但在处理响应式图片方面存在局限性。而CSS的srcset与sizes属性为前端开发者提供了强大的工具，能够根据不同的设备条件加载合适的图片资源。

传统方法的局限

在没有srcset与sizes属性之前，开发者通常使用CSS的max - width属性来缩放图片以适应不同屏幕宽度。例如：

img {
    max - width: 100%;
    height: auto;
}

这种方法能使图片在不同屏幕宽度下按比例缩放，但存在两个主要问题：

  1. 图片质量与文件大小：无论屏幕分辨率如何，始终加载相同的图片文件。对于高分辨率屏幕，可能图片看起来模糊；而对于低分辨率屏幕，又会加载过大的图片，浪费用户流量和加载时间。
  2. 布局变化：当页面布局在不同屏幕宽度下发生变化时，单纯的缩放可能无法满足图片在新布局中的显示需求。

srcset属性的使用

srcset属性允许我们为<img>标签指定多个图像资源，浏览器会根据设备的像素密度和屏幕宽度等因素选择最合适的图片进行加载。

srcset的基本语法

srcset属性的值是一个以逗号分隔的列表，每个列表项包含图片的URL和一个描述符。描述符可以是以下两种类型之一：

  1. 宽度描述符：格式为[width]w，其中[width]是图片的宽度值，单位为像素。例如：
<img src="small.jpg"
     srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
     alt="示例图片">

在这个例子中，浏览器会根据自身的视口宽度和设备像素比来选择合适的图片。如果视口宽度较小，它可能会选择small.jpg；如果视口宽度较大且设备像素比支持，它可能会选择medium.jpg或large.jpg。 2. 像素密度描述符：格式为[dppx]x，其中[dppx]是设备像素比。例如：

<img src="standard.jpg"
     srcset="standard.jpg 1x, high - res.jpg 2x"
     alt="示例图片">

在这种情况下，对于普通屏幕（设备像素比为1），浏览器会加载standard.jpg；对于视网膜屏（设备像素比为2或更高），浏览器会加载high - res.jpg。

结合src属性

src属性仍然是必需的，它提供了一个基础的图片资源，作为不支持srcset属性的浏览器的备用选项。例如：

<img src="default.jpg"
     srcset="default.jpg 1x, high - res.jpg 2x"
     alt="示例图片">

在支持srcset的浏览器中，它会根据设备情况选择default.jpg或high - res.jpg；在不支持srcset的浏览器中，它会加载default.jpg。

sizes属性的使用

虽然srcset属性让浏览器能够根据设备像素比和图片宽度选择合适的图片，但在复杂的布局中，仅靠srcset还不够。sizes属性用于定义不同屏幕宽度下图片的布局宽度，从而帮助浏览器更准确地选择srcset中的图片。

sizes的基本语法

sizes属性的值也是一个以逗号分隔的列表，每个列表项包含一个媒体条件和一个宽度值。例如：

<img src="image.jpg"
     srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
     sizes="(max - width: 600px) 300px, 600px"
     alt="示例图片">

在这个例子中，当屏幕宽度小于或等于600像素时，图片的布局宽度为300像素；当屏幕宽度大于600像素时，图片的布局宽度为600像素。浏览器会根据这个布局宽度和srcset中的宽度描述符来选择最合适的图片。

媒体查询与动态布局

sizes属性可以与复杂的媒体查询结合，以适应各种动态布局场景。例如，在一个响应式布局中，图片在不同屏幕宽度下有不同的显示方式：

<img src="product - image.jpg"
     srcset="product - small.jpg 320w, product - medium.jpg 640w, product - large.jpg 1280w"
     sizes="(max - width: 480px) 100vw, (max - width: 768px) 50vw, 33vw"
     alt="产品图片">

在这个例子中：

  1. 当屏幕宽度小于或等于480像素时，图片宽度为视口宽度的100%（100vw）。
  2. 当屏幕宽度大于480像素且小于或等于768像素时，图片宽度为视口宽度的50%（50vw）。
  3. 当屏幕宽度大于768像素时，图片宽度为视口宽度的33%（33vw）。

浏览器会根据当前屏幕宽度和这些规则确定图片的布局宽度，然后从srcset中选择最合适的图片。

实际应用场景

响应式网页设计

在响应式网页设计中，srcset与sizes属性广泛应用于各种图片元素，如产品图片、文章配图、背景图片等。例如，一个电商网站的产品展示页面：

<div class="product - img - container">
    <img src="product - small.jpg"
         srcset="product - small.jpg 320w, product - medium.jpg 640w, product - large.jpg 1280w"
         sizes="(max - width: 600px) 300px, 600px"
         alt="产品图片">
</div>

在手机端浏览时，浏览器会加载product - small.jpg，以减少流量消耗和加快加载速度；在桌面端浏览时，浏览器会根据屏幕宽度加载product - medium.jpg或product - large.jpg，以提供更高质量的图片展示。

图像画廊

对于图像画廊，srcset与sizes属性同样重要。假设我们有一个图片画廊，图片在不同屏幕宽度下有不同的布局：

<ul class="gallery">
    <li>
        <img src="gallery - small.jpg"
             srcset="gallery - small.jpg 320w, gallery - medium.jpg 640w, gallery - large.jpg 1280w"
             sizes="(max - width: 480px) 100vw, (max - width: 768px) 50vw, 33vw"
             alt="画廊图片">
    </li>
    <!-- 其他图片项 -->
</ul>

在小屏幕设备上，图片会以全屏宽度显示；在中等屏幕设备上，图片会以视口宽度的50%显示；在大屏幕设备上，图片会以视口宽度的33%显示。浏览器会根据这些布局规则选择合适的图片尺寸。

自适应背景图片

虽然srcset和sizes属性主要用于<img>标签，但通过一些技巧，我们也可以将其应用于背景图片。例如，使用CSS的content属性和attr()函数：

<style>
    .bg - container {
        position: relative;
    }
    .bg - container::before {
        content: "";
        display: block;
        background - image: url(small - bg.jpg);
        @media (min - width: 600px) {
            background - image: url(medium - bg.jpg);
        }
        @media (min - width: 1200px) {
            background - image: url(large - bg.jpg);
        }
    }
</style>
<div class="bg - container"></div>

这种方法虽然没有直接使用srcset和sizes属性，但通过媒体查询实现了类似的自适应背景图片效果。如果要更直接地使用srcset和sizes属性，可以借助JavaScript来动态设置背景图片的URL。

优化与性能考虑

图片压缩

无论使用srcset和sizes属性加载何种尺寸的图片，都应该对图片进行适当的压缩。使用工具如ImageOptim、Compressor.io等，可以在不显著损失图片质量的前提下，大幅减小图片文件的大小，从而提高页面的加载速度。

预加载

对于关键图片，可以使用<link rel="preload">来提前告知浏览器加载图片资源，避免页面渲染时的延迟。例如：

<link rel="preload" href="large - image.jpg" as="image">

这样浏览器会在解析HTML时，提前开始加载large - image.jpg，当页面需要显示该图片时，能够更快地呈现。

懒加载

懒加载是一种优化页面性能的重要技术，特别是对于页面上有大量图片的情况。通过懒加载，图片在用户滚动到它们所在位置时才会加载，而不是在页面加载时全部加载。可以使用一些JavaScript库如LazyLoad、Intersection Observer API来实现图片的懒加载。例如，使用Intersection Observer API实现懒加载的代码如下：

<img data - src="image.jpg"
     data - srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
     data - sizes="(max - width: 600px) 300px, 600px"
     alt="示例图片"
     class="lazy - load">
<script>
    const lazyImages = document.querySelectorAll('.lazy - load');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.srcset = img.dataset.srcset;
                img.sizes = img.dataset.sizes;
                observer.unobserve(img);
            }
        });
    });
    lazyImages.forEach(image => {
        observer.observe(image);
    });
</script>

在这个例子中，图片的src、srcset和sizes属性初始时存储在data - *自定义属性中，当图片进入视口时，通过JavaScript将这些属性值设置到对应的属性上，实现图片的懒加载。

兼容性与解决方案

虽然srcset和sizes属性得到了现代浏览器的广泛支持，但在一些旧版本浏览器中可能不支持。为了确保在所有浏览器中都能正常显示图片，可以采用以下兼容方案：

  1. 提供备用图片：如前文所述，始终在<img>标签中设置src属性，作为不支持srcset和sizes属性的浏览器的备用选项。
  2. 使用JavaScript polyfill：有一些JavaScript库可以模拟srcset和sizes属性的功能，例如Picturefill。Picturefill通过检测浏览器是否支持原生的srcset和sizes，如果不支持，则使用JavaScript来实现类似的图片选择功能。使用Picturefill的基本步骤如下：
    • 引入Picturefill库：
<script src="picturefill.min.js"></script>

- 使用`<picture>`元素（Picturefill也支持`<img>`标签）：

<picture>
    <source srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w"
            sizes="(max - width: 600px) 300px, 600px">
    <img src="default.jpg" alt="示例图片">
</picture>

在支持srcset和sizes的浏览器中，<source>元素会正常工作；在不支持的浏览器中，Picturefill会通过JavaScript解析<source>元素的属性，并选择合适的图片。

高级应用与技巧

艺术指导

在某些情况下，我们可能希望根据不同的设备或屏幕宽度展示不同版本的图片，这不仅仅是图片尺寸的变化，还可能涉及图片内容的裁剪或调整。这种技术称为艺术指导。例如，对于一张产品图片，在手机端可能更关注产品的细节，而在桌面端可能需要展示产品的全貌。

<picture>
    <source media="(max - width: 480px)" srcset="product - detail.jpg">
    <source media="(min - width: 481px)" srcset="product - full.jpg">
    <img src="product - default.jpg" alt="产品图片">
</picture>

在这个例子中，当屏幕宽度小于或等于480像素时，浏览器会加载product - detail.jpg；当屏幕宽度大于480像素时，浏览器会加载product - full.jpg。通过结合picture元素和media查询，我们可以实现更灵活的艺术指导效果。

多分辨率视频背景

类似于图片，视频背景也可以通过srcset和sizes的概念来实现自适应。虽然HTML5的<video>标签没有直接的srcset和sizes属性，但可以通过<source>元素来模拟类似的功能。例如：

<video autoplay loop muted>
    <source media="(max - width: 600px)" src="video - small.mp4" type="video/mp4">
    <source media="(min - width: 601px)" src="video - large.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

在这个例子中，当屏幕宽度小于或等于600像素时，浏览器会加载video - small.mp4；当屏幕宽度大于600像素时，浏览器会加载video - large.mp4。这样可以确保在不同屏幕宽度下，视频背景既能提供合适的视觉效果，又能避免加载过大的视频文件。

结合WebP格式

WebP是一种现代的图像格式，它在提供与JPEG、PNG等传统格式相似视觉质量的同时，文件大小通常更小。可以在srcset中结合WebP格式，为支持WebP的浏览器提供更高效的图片资源。例如：

<picture>
    <source type="image/webp" srcset="image.webp 320w, image - large.webp 1280w"
            sizes="(max - width: 600px) 300px, 600px">
    <source type="image/jpeg" srcset="image.jpg 320w, image - large.jpg 1280w"
            sizes="(max - width: 600px) 300px, 600px">
    <img src="image.jpg" alt="示例图片">
</picture>

在这个例子中，支持WebP格式的浏览器会优先加载image.webp或image - large.webp；不支持WebP格式的浏览器会加载JPEG格式的图片。通过这种方式，可以充分利用WebP格式的优势，提高页面的加载性能。

动态生成srcset和sizes

在一些复杂的应用场景中，可能需要根据用户的操作或页面的动态数据来动态生成srcset和sizes的值。例如，一个图片编辑应用，用户可以选择不同的图片分辨率和布局方式，然后根据用户的选择动态更新<img>标签的srcset和sizes属性。这可以通过JavaScript来实现，以下是一个简单的示例：

<select id="resolution - select">
    <option value="320">320px</option>
    <option value="640">640px</option>
    <option value="1280">1280px</option>
</select>
<select id="layout - select">
    <option value="(max - width: 600px) 300px, 600px">窄布局</option>
    <option value="(max - width: 800px) 400px, 800px">宽布局</option>
</select>
<img id="dynamic - img" src="default.jpg" alt="动态图片">
<script>
    const resolutionSelect = document.getElementById('resolution - select');
    const layoutSelect = document.getElementById('layout - select');
    const dynamicImg = document.getElementById('dynamic - img');
    resolutionSelect.addEventListener('change', () => {
        const resolution = resolutionSelect.value;
        const srcset = `small - ${resolution}.jpg ${resolution}w, medium - ${resolution}.jpg ${resolution * 2}w, large - ${resolution}.jpg ${resolution * 4}w`;
        dynamicImg.srcset = srcset;
    });
    layoutSelect.addEventListener('change', () => {
        dynamicImg.sizes = layoutSelect.value;
    });
</script>

在这个例子中，当用户选择不同的分辨率选项时，JavaScript会根据所选的分辨率动态生成srcset的值；当用户选择不同的布局选项时，JavaScript会更新img标签的sizes属性。这样可以实现根据用户操作动态调整图片的加载和布局。

总结与最佳实践

  1. 始终提供备用选项：确保在<img>标签中设置src属性，作为不支持srcset和sizes属性的浏览器的备用图片。
  2. 合理设置图片尺寸：根据不同设备的常见分辨率和布局需求，合理设置srcset中的图片尺寸和sizes中的布局宽度，避免加载过大或过小的图片。
  3. 结合其他优化技术：如图片压缩、预加载、懒加载等，以提高页面的整体性能。
  4. 测试兼容性：在各种主流浏览器和设备上测试响应式图片的显示效果，确保在不同环境下都能正常工作。
  5. 考虑艺术指导：根据不同设备和屏幕宽度，思考是否需要展示不同版本的图片，以提供更好的用户体验。
  6. 动态生成（如有需要）：在复杂应用场景中，利用JavaScript动态生成srcset和sizes的值，以满足用户的个性化需求。

通过正确使用srcset和sizes属性，并结合其他优化技术和最佳实践，前端开发者能够为用户提供在各种设备上都能高效加载和完美显示的图片体验。无论是简单的响应式网页还是复杂的Web应用，这些技术都是提升用户体验和网站性能的重要手段。在实际开发中，不断探索和实践这些技术，将有助于打造更加优秀的前端产品。同时，随着浏览器技术的不断发展，我们也需要关注新的特性和规范，以进一步优化响应式图片的实现。例如，未来可能会出现更智能的图片选择算法，或者对更多图像格式的支持，这都将为前端开发者带来更多的优化空间。

在日常开发中，我们还可以建立自己的图片资源管理流程，根据不同的项目需求和目标设备，提前准备好合适尺寸和格式的图片，并合理命名，以便在srcset中清晰地引用。对于大型项目，使用自动化工具来生成srcset和sizes的值也是一个不错的选择，这样可以提高开发效率并减少错误。

此外，与团队成员进行有效的沟通和协作也非常重要。在设计阶段，与设计师共同探讨图片在不同设备上的展示效果和艺术指导需求；在开发阶段，与后端开发人员合作，确保图片资源的正确存储和快速访问。通过跨团队的协作，能够更好地实现响应式图片的优化，为用户提供一致且优质的体验。

同时，关注用户反馈和数据分析也是优化响应式图片的关键。通过分析用户在不同设备上的行为数据，如页面加载时间、图片加载成功率等，我们可以发现潜在的问题并及时进行调整。例如，如果发现某个特定设备上图片加载缓慢，可能需要进一步优化该设备对应的图片尺寸或格式。

总之，srcset和sizes属性为前端开发者提供了强大的工具来实现响应式图片，但要充分发挥它们的优势，需要综合考虑多方面的因素，并不断实践和优化。在这个多设备、多分辨率的时代，为用户提供出色的图片体验是提升网站竞争力的重要一环。