响应式图片必须用max-width: 100%; height: auto兜底，并结合srcset+sizes或<picture>实现资源适配与艺术方向切换，否则仅缩放导致模糊、带宽浪费和体验下降。
max-width: 100% 和 height: auto 是让单张图片“看起来响应式”的最低成本方案，但仅靠它无法解决模糊、带宽浪费或艺术方向切换问题。真正在生产环境可用的响应式图片，必须结合 srcset、sizes 或 <picture> ——否则你只是在缩放一张图，不是在适配设备。
为什么只写 width: 100% 就会出问题
很多人复制粘贴的第一行 CSS 是 img { width: 100%; height: auto; }，结果在大屏上图片被强制拉伸、边缘发虚，小屏加载了 2MB 的桌面图却只显示 320px 宽。
-
width: 100%强制图片撑满父容器，不管原始尺寸——超大图会被像素插值拉伸，失真明显 - 没设
max-width，图片在窄容器里可能溢出（比如嵌套在padding不足的卡片中） - 完全不控制资源选择：手机用户下载 1920w 图片，流量和解码压力白给
- 正确写法只有这一种基础兜底：
img { max-width: 100%; height: auto; }
srcset + sizes 怎么配才不白写
srcset 单独存在是无效的——浏览器不会主动猜你要在哪种宽度下用哪张图。必须搭配 sizes，告诉它“这张图在不同断点下实际占多宽”，它才能从 srcset 列表里挑最接近且不小于该宽度的源。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
sizes值必须是媒体条件 + 宽度，例如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset中只能用w描述符（按布局宽度选）或x描述符（按设备像素比选），二者不能混用在同一属性中 -
src属性不可省略，它是所有不支持srcset的旧浏览器（如 IE11）和解析失败时的保底图，建议填最小尺寸版本（如photo-400w.jpg） - 示例有效写法：
<img src="photo-400w.jpg" srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="产品图">
什么情况下必须用 <picture> 而不是 srcset
当你需要根据屏幕尺寸切换**完全不同构图**的图（比如移动端裁切人脸特写、桌面端展示全景），或者要按设备能力提供不同格式（WebP / AVIF 优先，JPEG 备用），<picture> 是唯一能干净实现的方案。
立即学习“前端免费学习笔记（深入）”；
- 每个
<source>可独立写media（如(max-width: 768px)）和srcset，浏览器按顺序匹配第一个满足条件的 - 必须以
<img>结尾，且它必须带src和alt——没有它，整个<picture>不渲染图片 - 支持
type属性做格式降级：<source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."> - 注意：
<source>不支持alt，所有可访问性信息必须放在结尾的<img>上
容易被忽略的性能与语义细节
写了 srcset 或 <picture> 不代表响应式就完成了。很多团队上线后才发现 Lighthouse 评分掉档、无障碍检测失败，问题往往出在这些“非核心但必填”的地方。
-
loading="lazy"应该加在所有非首屏<img>上，但不要加在<picture>内部的<source>标签上（无效） -
alt不是可选项——没有它的图片在屏幕阅读器里是“无描述图像”，SEO 也会降权；空alt=""仅适用于纯装饰图 - 如果图片用于关键内容（如商品主图、教程步骤图），避免用 CSS
background-image实现响应式——它无法被爬虫索引，也不支持alt和懒加载 -
sizes的计算依赖页面真实布局宽度，如果你用 JS 动态改了容器宽度（比如侧边栏展开），sizes不会自动重算，此时应考虑用<picture>或服务端适配
