H5响应式图片应使用srcset（w描述符）+sizes（真实渲染宽度）+src（中间档降级），禁用混用2x、避免sizes写死，通过Network面板验证实际加载。
在 H5 页面中，用 srcset 和 sizes 实现响应式图片，核心是让浏览器根据视口宽度、设备像素比（DPR）和 CSS 布局宽度，自动选最合适的图——不靠 JS，不靠框架，原生高效。
srcset 必须用 w 描述符，对应图片固有宽度
srcset 中的 480w、768w 指的是这张图原始文件的 CSS 像素宽度，不是显示尺寸，也不是设备倍率。它告诉浏览器：“我准备了这些不同宽度的源图”。
- 写
srcset="a.jpg 480w, b.jpg 768w, c.jpg 1200w"是正确做法 - 避免混用：
srcset="a.jpg 480w, b.jpg 2x"会导致整个srcset失效，回退到src - 不要只写
2x：没配sizes时，2x只在图片占满视口时才可靠；H5 布局常由 flex/grid 控制，2x很容易误加载
sizes 要真实反映图片在页面中的渲染宽度
sizes 不是“最大允许宽度”，而是告诉浏览器：“这张图在当前布局下会占多少 CSS 像素宽”。浏览器用这个值 × DPR，再从 srcset 中挑最接近且不小于它的 w 图。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 常见写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 400px" - 如果 H5 在小屏上全宽显示，大屏上固定 400px 宽，就别写死
sizes="400px"，否则小屏也会去加载 1200w 图 - 单位必须合法：用
vw、px或calc()，不能用%、rem、em
务必设置合理的 src 作为降级 fallback
src 属性不可省略，它是所有不支持 srcset 的老浏览器（极少见）或解析失败时的兜底，也影响预加载行为。
- 不要指向最大图（如
src="1920.jpg"），否则低版本 WebView 或网络异常时直接卡顿 - 推荐指向一个体积适中、清晰度够用的中间档，比如
src="800.jpg"（对应 800w） - 确保
src图片本身能清晰展示在多数设备上，避免文字/图标模糊
验证是否生效，只看 Network 面板的实际请求
别信“看起来清楚”，也别靠拖动 DevTools 缩放判断——浏览器不会因缩放重新请求图片。
- 打开 Chrome 无痕窗口，F12 → Network → 勾选 Disable cache
- 用 Device Toolbar 切换 iPhone SE（375px）、iPad（768px）、桌面（1200px）等典型宽度
- 每次切换后刷新页面，观察 img 请求的 URL 和 Response Headers 中的
Content-Length - 右键图片 → “Open image in new tab” 可快速确认当前生效的是哪张图
