标签本身不裁剪图片，仅按的media条件选择预裁剪源图；常见失效原因包括media写错位置、顺序未从宽到窄、漏掉必需的兜底，且所有srcset路径须真实存在。
为什么移动端总是加载错图
这不是浏览器不支持，而是匹配逻辑被破坏了：media写错位置、<source></source>顺序颠倒、或漏掉强制存在的<img>都会导致移动端 fallback 到桌面图甚至空白。
-
media属性必须写在<source></source>上，写在<picture></picture>上会被完全忽略 -
<source></source>必须从宽到窄排列，比如min-width: 1200px→min-width: 768px→max-width: 767px；如果把max-width: 767px放最前，所有设备都走这条 -
<img>不是可选的——它必须存在、带src和alt，否则不匹配任何<source></source>时页面就是空的
移动端专用<source></source>怎么写才有效
关键不是“适配小屏”，而是明确告诉浏览器：“这个宽度区间，就该用这张裁切过的图”。
- 断点别卡整数：用
max-width: 767px而不是max-width: 768px，避免和桌面规则重叠 - 移动端
srcset里只放一个路径就够了，比如hero-mobile-crop.jpg；加400w或2x是分辨率适配的事，和艺术指导无关 - 不要用
orientation: portrait——iOS Safari 对它的支持不稳定，容易失效 - 所有
<source></source>和<img>的宽高比尽量一致，否则object-fit: cover会拉伸或裁切失真
type="image/webp"为什么没生效
不是浏览器不支持 WebP，而是 MIME 类型声明和服务端响应头对不上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type值必须是完整合法的 MIME 类型，比如image/webp，webp或image/jpg都会被静默丢弃 - 服务器返回的
Content-Type响应头必须严格匹配，大小写、拼写、空格都不能错 - Network 面板看到
blocked: mime-type或404，基本就是type和服务配置不一致 - 推荐三层 fallback：
<source type="image/avif"></source>→<source type="image/webp"></source>→<source type="image/jpeg"></source>→<img src="fallback.jpg">
什么情况下其实不该用<picture></picture>
90% 的“响应式图片”需求根本不需要<picture></picture>——比如只是让同一张图在手机上显示小一点、在桌面显示大一点，用<img srcset="" sizes="">更轻量、兼容性更好。
-
<picture></picture>真正的价值只在 art direction 场景：移动端裁人脸、桌面展全景，内容语义变了 - 如果只是缩放，
sizes="(max-width: 767px) 100vw, 50vw"配合srcset="small.jpg 400w, large.jpg 1200w"就能让浏览器自己算出最优尺寸 - 现代项目中，优先考虑 image CDN 自动生成多尺寸+多格式资源，而不是手写一长串
<source></source>
最容易被忽略的一点：所有srcset路径必须真实存在且可访问；404 不报错，只会静默 fallback 到下一条，调试时得清缓存后看 Network 面板实际加载了哪条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
