HTML响应式图片的代码重构与优化-html教程-PHP中文网

必须配sizes才能让srcset的w单位生效，否则浏览器按100vw回退加载大图；sizes需用媒体查询匹配真实css布局宽度，如(max-width: 479px) 100vw, (max-width: 767px) 50vw, 33vw。

html响应式图片的代码重构与优化

img 标签的 srcset 和 sizes 属性怎么配才不白写

只加 srcset 不配 sizes，浏览器大概率会忽略你写的高分辨率图——它不知道这些图对应多宽的容器，只能退回到 src。必须同时声明 sizes，告诉浏览器“在不同视口宽度下，这张图会占多少 CSS 像素宽”。

常见错误是把 sizes 写成固定值，比如 sizes="300px"。这会让所有设备都按 300px 计算，失去响应意义。正确做法是用媒体条件匹配布局断点：

@@##@@

(max-width: 479px) 100vw：小屏下图片撑满视口
(max-width: 767px) 50vw：中屏下占一半视口宽（注意断点要和 CSS 布局一致）
33vw：大屏默认值，对应三栏布局中每张图约三分之一视口宽

picture 元素里 source 的 media 和 type 属性谁先生效

media 匹配优先级高于 type。浏览器从上到下逐个检查 <source></source>，第一个 media 为真且资源可加载的，就停住，不再往后看。哪怕后面有更匹配的 type，也不会触发。

所以顺序不能错：宽屏条件放前面，窄屏放后面；同一尺寸下，优先放 WebP，再 fallback 到 JPEG。

<picture><source media="(min-width: 768px)" type="image/webp" srcset="hero-large.webp 1x, hero-large-2x.webp 2x"><source media="(min-width: 768px)" type="image/jpeg" srcset="hero-large.jpg 1x, hero-large-2x.jpg 2x"><source media="(max-width: 767px)" type="image/webp" srcset="hero-small.webp 1x, hero-small-2x.webp 2x">
  @@##@@
</source></source></source></picture>

如果把 JPEG 的 <source></source> 放 WebP 前面，即使浏览器支持 WebP，也会直接选 JPEG
<img src="photo-small.jpg" srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w" sizes="(max-width: 479px) 100vw, (max-width: 767px) 50vw, 33vw"> 是最终 fallback，必须保留，且其 src 应该是广泛兼容的格式（如 JPEG/PNG）
media 中的断点需与 CSS 媒体查询严格对齐，否则会出现“CSS 显示为两栏，但图片仍按一栏加载”的错位

为什么 lazy loading + srcset 组合后首屏图片不显示

Chrome 和 Edge 对 loading="lazy" 的实现有个隐性规则：当 img 没有明确的 width 和 height，且又用了 srcset，浏览器可能无法及时计算占位高度，导致懒加载机制误判图片已在视口外，从而跳过加载。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

这不是 bug，而是性能权衡——没有尺寸信息时，浏览器不敢预留空间，干脆延迟直到滚动触达。

给 img 加内联 width 和 height（推荐使用 HTML 属性，不是 CSS）
或者用 aspect-ratio CSS 属性配合 width: 100%，但注意 Safari 15.4+ 才稳定支持
首屏关键图片建议显式设置 loading="eager"，别依赖自动判断
不要在 <picture></picture> 外层加 loading，只作用于内部 <img src="hero-small.jpg" alt="hero">