Picture标签本身不裁剪图片，而是通过media属性按断点选择预裁剪的不同构图源图实现艺术指导；必须为桌面、平板、手机分别准备语义明确的裁剪图，<source>顺序须从宽到窄，<img>为必需兜底项。
Picture 标签本身不直接裁剪图像，而是通过配合 srcset、sizes 和 media 属性，为不同屏幕条件提供「已预先裁剪好」的焦点图版本，从而实现艺术指导（Art Direction）。 关键在于：你不是让浏览器动态裁剪原图，而是提前准备好多张针对不同视口、不同焦点区域的图片，再由 <picture> 精准选择加载哪一张。
准备语义化、焦点明确的多尺寸图源
艺术指导的核心是“人为控制构图”，不是响应式缩放。例如横幅图在桌面端展示全身，在手机端只保留人物面部：
- 桌面版（1200px 宽）：裁剪为宽幅构图，突出环境与人物关系
- 平板版（768px 宽）：中景，聚焦上半身和表情
- 手机版（375px 宽）：特写，仅保留眼睛与嘴部区域，确保信息不丢失
每张图都应独立导出——用 Photoshop、Figma 或自动化工具（如 ImageMagick、Cloudinary）按需裁剪并优化，而非依赖 CSS object-fit 拉伸或遮盖。
用 <source> 的 media 属性匹配断点
每个 <source> 标签通过 media 属性声明适用的视口条件，浏览器按顺序匹配首个满足的源：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<picture>
<source
media="(min-width: 1024px)"
srcset="hero-desktop.jpg"
width="1920" height="600">
<source
media="(min-width: 768px)"
srcset="hero-tablet.jpg"
width="1024" height="500">
<source
media="(max-width: 767px)"
srcset="hero-mobile.jpg"
width="375" height="667">
<img src="hero-fallback.jpg" alt="活动主视觉" width="375" height="667">
</picture>
注意：media 值必须是有效的媒体查询；<img> 是必需的兜底项，不可省略；width/height 推荐设置，有助于避免布局偏移（CLS）。
结合 sizes 属性提升加载精准度（可选但推荐）
当页面布局复杂（如图片宽度随容器变化），可用 sizes 告诉浏览器“这张图在不同断点下大概占多宽”，辅助 srcset 中的 x/w 描述符做更优选择：
<picture>
<source
media="(min-width: 1024px)"
srcset="hero-1920w.jpg 1920w,
hero-1200w.jpg 1200w"
sizes="100vw">
<source
media="(min-width: 768px)"
srcset="hero-1024w.jpg 1024w,
hero-768w.jpg 768w"
sizes="90vw">
<source
media="(max-width: 767px)"
srcset="hero-375w.jpg 375w,
hero-480w.jpg 480w"
sizes="100vw">
<img src="hero-fallback.jpg" alt="活动主视觉">
</picture>
这里 sizes 不决定裁剪，只影响浏览器对「所需像素宽度」的判断，从而从 srcset 列表中选出最接近的资源。
验证与渐进增强注意事项
实际部署前需检查：
- 各
<source>的media条件无重叠或遗漏（可用浏览器 DevTools 的响应式模式逐个测试） - 所有图片格式一致（推荐 WebP/AVIF，同时提供 JPEG 备用）
- 使用
<img>的alt文本保持语义统一，不因裁剪而丢失关键信息 - 禁用 JavaScript 时仍能正常显示，因为
<picture>是纯 HTML/CSS 特性
不复杂但容易忽略：艺术指导成败不在代码，而在前期对用户场景、内容重点和设备行为的理解——裁哪？为什么裁？比怎么写标签更重要。
