浏览器未加载高清图导致模糊，主因是srcset/sizes配置错误或未验证实际请求；必须用合法sizes配合x/w描述符、避免混用、确保高DPR图存在且路径正确，并通过DevTools Network面板确认真实加载的图片。

标签本身不提高画质，它只决定“加载哪张图”——画质是否提升，取决于你提供的源文件本身是否更高清、是否匹配设备能力。用错配置，反而会让高分辨率设备加载小图，画质直接掉档。

为什么写了 还是模糊？

最常见原因是浏览器根本没选到你准备的高清图，静默回退到 或低分辨率 。典型表现：Retina 屏上图片发虚、放大后锯齿明显、Network 面板里只看到 400w 图被请求，哪怕你放了 2560w 的源。

• media 值缺括号，比如写成 media="max-width: 768px" → 浏览器直接忽略整条 <source>
• sizes 没写或写错单位，比如 sizes="50%" 或 sizes="300px" → 浏览器按默认 100vw 估算，结果在 1440px 宽视口下仍拉 800w 图
• srcset 里混用 w 和 x 描述符，比如 "photo-800w.jpg 800w, photo@2x.jpg 2x" → Safari 可能跳过整条，降级到 <img>
• 没提供高 DPR 版本：只放了 photo-1200w.jpg，但没配 photo@2x.jpg 2x → DPR=2 的 iPhone 就只能拉 1200w 图再缩放渲染，等效画质≈600w

怎么让高分屏真正加载高清图

靠 srcset + sizes 组合，不是靠 media。后者切构图，前者才管分辨率适配。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 在 <img> 上写 srcset，用 x 描述符：例如 srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
• sizes 必须存在且合法：例如 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" —— 这个值要和你 CSS 里图片实际占位宽度一致
• 把 3x 图放在 srcset 最右边：浏览器从左到右匹配，DPR=3 设备会跳过 1x 和 2x，命中 3x；如果 1x 在最后，它永远不被选
• <img> 的 src 必须指向一张可用的 1x 图：它是所有不支持 srcset 的老浏览器唯一入口，也是 DPR=1 时的保底

WebP/AVIF 真的能提画质吗？

不能直接提画质，但能让你在同等文件体积下塞进更高分辨率、更少压缩伪影的图——间接实现“更清晰”。前提是服务端返回的 Content-Type 和 type 属性严格一致。

• 写 type="image/webp"，但 Nginx 返回 Content-Type: image/jpg（拼写错或大小写错）→ Chrome 标记为 blocked:mime-type，跳过该源
• WebP/AVIF 源必须放在 JPEG/PNG 之前：浏览器顺序匹配，第一个格式支持+条件满足就停
• 别只换格式不重压：把原 1200w JPEG 直接转 WebP 不压缩，文件可能更大，得用 Squoosh 或 cwebp 调参
• AVIF 支持度仍有限（Safari 16.4+ 才稳定），type="image/avif" 建议放在 WebP 之前、JPEG 之后，形成 avif → webp → jpg 三级降级

关键点不在标签怎么写，而在你是否验证过：Network 面板里真实发出的请求，是不是你预期的那张高清图。没验证过的 配置，大概率只是看起来很美。