html5中display:none隐藏元素不会阻止资源加载，需用loading="lazy"+hidden或移除src再动态赋值；改格式必须用配合和fallback；“无损压缩”实指保留元数据与尺寸的编码器切换。
HTML5 中用 display: none 隐藏元素 ≠ 删除内容
很多人以为把图片或视频用 display: none 隐藏后，浏览器就不会加载它——这是错的。HTML5 的 <img alt="html5改格式隐藏法_无损压缩同时改格式诀窍【技巧】" >、<video></video>、<audio></audio> 标签一旦出现在 DOM 中，**默认就会触发资源加载**，无论是否可见。
真正“无损压缩同时改格式”的前提，是先阻止非必要资源加载，再按需替换。否则一边隐藏一边下载，既没省流量，也没提速。
- 想隐藏又不加载？得用
loading="lazy"+hidden属性组合，或干脆移除src再动态赋值 -
visibility: hidden和opacity: 0同样会加载资源，且占布局空间，更不推荐用于“隐藏+优化”场景 - 服务端改格式（如 WebP/AVIF）必须配合
<picture></picture>+<source></source>，仅靠 CSS 隐藏无法触发格式切换
<picture></picture> 是 HTML5 改格式的核心容器，不是可选项
单纯把 JPEG 替成 WebP 文件再改 src，老浏览器会直接挂掉。HTML5 的格式切换必须靠语义化标签兜底，否则“无损”就变成“不可用”。
正确写法要满足三个条件：有主 <img alt="html5改格式隐藏法_无损压缩同时改格式诀窍【技巧】" >（fallback）、至少一个 <source></source>（含 type 和 srcset）、type 值必须和 MIME 类型严格一致。
立即学习“前端免费学习笔记（深入）”；
<picture> <source type="image/webp" srcset="photo.webp"> <source type="image/avif" srcset="photo.avif"> @@##@@ </picture>
- 浏览器按
<source></source>顺序匹配，第一个支持的type就加载，不继续往下看 -
srcset可填多个分辨率版本（如"photo@2x.webp 2x"），但单图改格式时只需一个 URL - 别漏掉
<img src="photo.jpg" alt="描述">，它是所有不支持<picture></picture>的环境（如 IE、旧安卓 WebView）唯一能显示的内容
“无损压缩”在前端实际指：不重采样、不降色深、不丢元数据
前端谈“无损压缩”，通常不是指算法级的 PNG-LZ77 那种无损，而是业务层的“视觉无损 + 信息保留”。比如把 4000×3000 的 JPEG 转 WebP，若用 cwebp -q 80，它仍是“有损”，但人眼难辨；而用 cwebp -lossless 才真无损——但体积往往比原图还大。
所以实操中，“无损压缩同时改格式”的合理目标是：保持原始尺寸/ICC 色彩配置/EXIF 方向信息，仅换编码器。
- 命令行推荐：
cwebp -q 90 -metadata all -exact -resize 0 0 input.jpg -o output.webp（-resize 0 0 表示不缩放） - 在线工具若不提供“保留元数据”开关，大概率已丢 GPS、版权、拍摄时间等字段
- 用
exiftool output.webp可验证元数据是否还在；用file output.webp确认 MIME 类型是否正确
隐藏 + 改格式的临界点：JS 控制时机比 CSS 更关键
最常被忽略的是执行顺序：DOM 渲染、资源加载、JS 执行三者不同步。哪怕你写了 document.querySelector('img').style.display = 'none'，如果这行 JS 在 DOMContentLoaded 之后才跑，图片可能早已开始下载甚至完成。
真正可控的方式，是让资源加载行为本身可中断：
- 初始状态去掉
src，只留data-src和data-type，用 JS 判断支持性后再赋值src - 对
<picture></picture>，可在 JS 中动态插入<source></source>，避免不支持的格式提前被解析 - 需要监听
canplay或load事件再显示？那隐藏逻辑就得和事件绑定耦合，不能只靠 CSS 类名切换
复杂点在于：浏览器对 <source></source> 的预加载策略各不相同，Chrome 可能预取第一个 srcset，Safari 可能等到 load 才发起请求——这意味着“隐藏”动作必须覆盖从 DOM 插入到资源加载完成的整个链路，而不是某个瞬间的样式操作。
