hidden 和 block 不能直接做响应式图片切换，因为它们只控制显示/隐藏，不阻止图片预加载；浏览器会提前下载所有 img 的 src，导致带宽浪费。
为什么 hidden 和 block 不能直接做响应式图片切换
因为它们只是控制元素是否渲染，不解决图片资源加载问题。浏览器在 DOM 渲染前就会预加载 src，即使加了 hidden，小图大图全会下载，浪费带宽。
真正要切换的是「加载哪张图」，不是「显示哪张图」。
- 用
hidden+ 多个 - 用
srcset+sizes：浏览器按视口自主选择，只加载匹配的那张 - 用
picture元素：可精确控制不同条件下的资源（如 DPR、格式、媒体查询）
用 srcset 和 sizes 实现轻量响应式切换
这是最推荐的做法，无需 JS，不增加 DOM 节点，Tailwind 完全兼容。
关键在写对 sizes——它告诉浏览器“这张图在不同断点下大概占多宽”，浏览器才敢选合适的 srcset 项。
-
sizes="(min-width: 1024px) 50vw, 100vw"表示：桌面端占视口一半宽，移动端占满 -
srcset中的宽度描述（如800w）必须和实际图片真实像素一致 - Tailwind 的
max-w-full、w-full等类依然生效，不影响响应逻辑
@@##@@
什么时候必须用
当你要按媒体查询切换图片格式（如 WebP）、或完全不同的构图（如裁剪版 vs 宽幅版）、或需要 media 精确控制时。
注意：media 是从上到下匹配，第一个命中就停，
- WebP 回退：现代浏览器用
image/webp，老浏览器 fallback 到jpeg - 艺术指导（art direction）：小屏用特写头像，大屏用全身照，
srcset - 别把
hidden替代品——里面所有src都可能被加载（尤其 Safari）
<picture><source media="(min-width: 1024px)" srcset="hero-wide.webp" type="image/webp"><source media="(min-width: 1024px)" srcset="hero-wide.jpg"><source srcset="hero-mobile.webp" type="image/webp"> @@##@@ </source></source></source></picture>
别踩这些 Tailwind 常见坑
Tailwind 自身不干预图片加载逻辑，但某些组合会干扰响应行为。
- 给
hidden同时又写src：图片仍会加载，只是不可见 - 用
md:hidden lg:block控制两个
- 忘记设
height或aspect-ratio：图片加载时布局抖动，尤其在慢网下明显 -
object-fit类（如object-cover）只影响渲染，不影响加载，放心用
复杂场景（比如懒加载+响应式+格式降级）建议用 loading="lazy" + srcset + picture 组合，而不是靠类名切 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
