核心是使用srcset和sizes属性或<picture>元素实现响应式图片。srcset提供不同尺寸或格式的图片源，sizes根据视口宽度定义图片显示尺寸，浏览器据此选择最佳资源，避免流量浪费和模糊问题。传统<img>仅靠src无法适配多设备，而max-width: 100%只解决视觉缩放，不减少加载体积。srcset与sizes协同工作：sizes计算图片在当前布局的显示宽度，srcset按宽度或像素密度提供候选，浏览器结合DPR、网络状况等选择最优图片。例如视口375px且DPR=2时，需750px有效像素，浏览器从srcset中选最接近的800w图片。当需不同构图（如移动端特写）或支持现代格式（如WebP、AVIF）时，<picture>更适用，其<source>可设媒体查询或类型，实现艺术方向与格式降级。总之，<img>+srcset/sizes适用于分辨率适配，<picture>适用于内容裁剪与格式控制。
在HTML中设置图片响应式，核心在于让浏览器根据用户设备的屏幕尺寸、分辨率和网络状况，自动选择加载最合适的图片资源。这通常通过
<img>标签的
srcset和
sizes属性，或者更高级的
<picture>元素来实现。说白了，就是避免在小屏幕上加载超大图片浪费流量，同时保证在大屏幕或高分屏上图片依然清晰。
解决方案
要实现图片响应式，最常用也最推荐的方法是结合使用
<img>标签的
srcset和
sizes属性。
srcset允许你定义一系列不同尺寸或像素密度的图片源，而
sizes则告诉浏览器在不同视口宽度下图片将占据的实际显示宽度。浏览器会根据这些信息，结合设备的DPR（设备像素比）和网络情况，智能地选择最佳图片。
例如，一个基本的
srcset用法可能看起来像这样：
<img srcset="image-small.jpg 480w,
image-medium.jpg 800w,
image-large.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
src="image-fallback.jpg"
alt="响应式图片示例">这里，
srcset提供了三个不同宽度的图片版本（480w, 800w, 1200w）。
sizes则是一个媒体查询列表，告诉浏览器：
立即学习“前端免费学习笔记（深入）”；
- 当视口宽度小于或等于600px时，图片将占据100%的视口宽度（
100vw
）。 - 当视口宽度在601px到1200px之间时，图片将占据50%的视口宽度（
50vw
）。 - 当视口宽度大于1200px时，图片将固定为800px宽。
浏览器会根据
sizes计算出图片在当前视口下的渲染宽度，然后从
srcset中选择一个最接近且稍大于这个宽度的图片。
src属性作为兼容性回退，在不支持
srcset的浏览器中会加载。
为什么传统的 <img>
标签在响应式设计中会遇到瓶颈？
我记得刚开始做网页的时候，图片处理真是个头疼的问题。一张图，PC上看着挺好，手机上一缩就模糊，或者加载半天。那时候大家就用
max-width: 100%; height: auto;这种CSS方法让图片“看起来”响应式，但那只是视觉上的适配，文件大小可没变。一张2MB的PC端大图，在手机上依然会完整下载下来，用户流量哗哗地跑，加载速度也慢得让人抓狂。
传统的
<img>标签只通过
src属性指定一个图片源，它无法根据设备的屏幕尺寸、分辨率（比如Retina屏）或者网络带宽来智能地选择不同大小或清晰度的图片。这就导致了几个明显的问题：
-
带宽浪费和加载速度慢： 在移动设备上，用户可能只需要一张几百KB的图片，但如果
src
指定的是一张几MB的高清大图，那就会白白消耗用户的流量和等待时间。这在网络环境不佳时尤其明显，用户体验直线下降。 - 图片模糊或像素化： 反过来，如果你为了移动端体验，一开始就只提供一张小图，那在高分辨率的桌面显示器或者Retina屏幕上，这张小图会被浏览器放大，结果就是图片看起来模糊、细节丢失，影响视觉效果。
-
缺乏灵活性： 传统的
<img>
无法应对“艺术方向”的需求，比如在不同设备上展示同一内容的裁剪版本，或者针对特定设备提供不同格式的图片（如WebP）。
所以，
max-width: 100%只是个“面子工程”，它让图片在视觉上适应了布局，但背后的资源浪费和性能问题并没有解决。我们需要更智能的方案，让浏览器自己决定加载哪张图，而
srcset和
sizes正是为此而生。
srcset
和 sizes
属性到底是怎么协同工作的？
理解
srcset和
sizes的协同工作，是掌握响应式图片的关键。这俩兄弟，一个负责提供“食材清单”，另一个负责告诉“厨师”需要多大份的菜。
-
srcset
（食材清单）： 它提供了一个逗号分隔的图片URL列表，每个URL后面跟着一个描述符。描述符可以是：-
宽度描述符（
w
）： 比如image-small.jpg 480w
，表示image-small.jpg
这张图片的固有宽度是480像素。这是最常用也最推荐的方式，因为它让浏览器基于图片的实际宽度来做决策。 -
像素密度描述符（
x
）： 比如image@2x.jpg 2x
，表示image@2x.jpg
是针对2倍像素密度屏幕设计的图片。这种方式适用于你只想为不同DPR提供图片，而不考虑实际布局宽度的情况。 浏览器会从srcset
中选择一个最合适的图片，但它需要知道图片最终会在屏幕上显示多大。
-
宽度描述符（
-
sizes
（需求量）： 这就是sizes
的作用。它是一个媒体条件（media condition）列表，告诉浏览器在不同视口宽度下，<img>
标签会占据多少空间。例如：(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px
。100vw
表示图片会占据视口宽度的100%。50vw
表示图片会占据视口宽度的50%。800px
表示图片会固定占据800像素宽。 注意，sizes
描述的是图片在布局中的“显示宽度”，而不是图片的固有宽度。
协同工作流程：
-
浏览器解析
sizes
： 在加载图片之前，浏览器会先读取sizes
属性，根据当前的视口宽度和媒体条件，计算出图片在当前布局下大概会显示多宽（这个值被称为“有效像素宽度”）。 -
浏览器解析
srcset
： 接着，浏览器会查看srcset
中提供的所有图片源及其宽度描述符。 -
智能选择： 浏览器会综合考虑以下因素来做出最终决定：
- 计算出的有效像素宽度： 浏览器会尽量选择一个固有宽度与有效像素宽度接近的图片。
- 设备的像素密度（DPR）： 如果是Retina屏幕（DPR=2），浏览器可能会倾向于选择一张固有宽度是有效像素宽度两倍的图片，以保证清晰度。
- 网络条件： 有些浏览器甚至会根据用户的网络速度，在性能和质量之间做出权衡，比如在慢速网络下优先加载小一点的图片。
举个例子，假设你的设备是DPR为2的手机，视口宽度是375px，
sizes声明图片会占据
100vw。那么浏览器计算出图片需要显示
375 * 2 = 750有效像素。它就会去
srcset里找一个最接近750w的图片，比如
image-medium.jpg 800w，来加载。如果只有
image-small.jpg 480w和
image-large.jpg 1200w，它可能会选择
image-large.jpg 1200w，因为它比
image-small.jpg 480w更接近750w，并且能提供更好的视觉效果。
所以，
sizes是告诉浏览器“我需要多大”，
srcset是告诉浏览器“我有哪些选择”。两者缺一不可，尤其当
srcset使用
w描述符时，
sizes是必不可少的，否则浏览器会默认
sizes="100vw"，这往往不是你想要的。
<picture>
元素在哪些场景下比 <img>
配合 srcset
更适用？
虽然
<img>结合
srcset和
sizes已经非常强大，足以应对大多数响应式图片的需求，但在某些特定场景下，
<picture>元素会是更优甚至唯一的选择。这主要体现在“艺术方向”和“格式兼容性”这两个方面。
1. 艺术方向 (Art Direction)
这是
<picture>最主要的应用场景。当你的需求不仅仅是根据屏幕大小提供不同分辨率的同一张图片，而是要展示同一内容的不同裁剪版本、不同构图、甚至完全不同的图片时，
<picture>就派上用场了。
举个例子，你可能有一张风景横幅图，在桌面端它看起来很宏伟。但到了手机上，如果只是简单地缩小，可能就看不清重点了。这时候，你可能希望在手机上展示这张图的某个局部特写，或者完全不同的竖版构图。
srcset无法做到这一点，因为它只能提供同一张图片的缩放版本。
<picture> <source media="(min-width: 900px)" srcset="landscape-full.jpg"> <source media="(min-width: 600px)" srcset="landscape-cropped-mid.jpg"> <img src="landscape-mobile-focus.jpg" alt="风景图"> </picture>
在这个例子中：
- 当视口宽度大于900px时，浏览器会加载
landscape-full.jpg
（全景图）。 - 当视口宽度在600px到900px之间时，加载
landscape-cropped-mid.jpg
（中间部分裁剪图）。 - 在更小的屏幕上，或者浏览器不支持
<picture>
时，会加载landscape-mobile-focus.jpg
（移动端特写图）。
这样，你就能根据不同的屏幕尺寸，为用户提供最合适的视觉内容，而不是简单地缩放。
2. 格式兼容性 (Format Support)
随着WebP、AVIF等更高效的图片格式的出现，我们希望在支持这些格式的浏览器上优先使用它们，以获得更小的文件体积和更快的加载速度，同时又能为不支持的浏览器提供传统的JPEG或PNG格式作为回退。
<picture>元素通过
<source type="...">属性完美解决了这个问题。
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="示例图片"> </picture>
浏览器会从上到下检查
<source>标签。如果它支持
image/avif格式，就会加载
image.avif。否则，它会检查
image/webp。如果也不支持，或者所有
<source>标签都不匹配，它最终会加载
<img src="image.jpg">作为回退。这种方式实现了渐进增强，既能利用新技术的优势，又保证了广泛的兼容性。
总结来说，当你需要对图片进行内容或构图上的调整（艺术方向），或者需要根据浏览器对图片格式的支持情况提供不同文件时，
<picture>元素是比
<img>结合
srcset更强大、更灵活的选择。它让你能对图片的呈现方式拥有更细粒度的控制。
