头像高清适配应使用srcset+x描述符而非picture，因头像构图固定无需艺术方向切换；只需提供1x/2x两版图片并按顺序声明，配合src兜底和width/height防布局偏移，避免混用w/x、误加sizes或type不匹配。

标签在个人中心头像场景中并不推荐直接使用。它设计初衷是解决“艺术方向切换”（比如手机裁重点、桌面展全景），而头像通常构图固定、尺寸统一，强行套用反而容易出错，还增加维护成本。

头像高清适配真正该用的是 srcset + x 描述符
浏览器根据设备像素比（DPR）自动选图，逻辑清晰、兼容性好、写法简洁。只要准备 1x 和 2x 两版头像（如 avatar.jpg 和 avatar@2x.jpg），一行代码就能搞定：

<img 
  src="avatar.jpg" 
  srcset="avatar.jpg 1x, avatar@2x.jpg 2x" 
  alt="用户头像" 
  width="80" 
  height="80"
>

• 必须给 <img> 写 src，这是所有不支持 srcset 的旧浏览器的兜底
• srcset 中 1x 放前、2x 放后，顺序不能颠倒；3x 可加，但需确保文件存在且路径正确
• 不要混用 w 和 x，例如 avatar-80w.jpg 80w, avatar@2x.jpg 2x 是未定义行为，Chrome 可能整个忽略

如果还想进一步优化格式（比如优先用 WebP），可以搭配 <picture>，但仅限于格式降级兜底，不是分辨率切换：

<picture>
  <source type="image/webp" srcset="avatar.webp 1x, avatar@2x.webp 2x">
  <source type="image/jpeg" srcset="avatar.jpg 1x, avatar@2x.jpg 2x">
  <img src="avatar.jpg" srcset="avatar.jpg 1x, avatar@2x.jpg 2x" alt="用户头像">
</picture>

注意三点：

• 每个 <source> 都必须带 type，且服务器返回的 Content-Type 要严格匹配，否则 Network 面板会显示 blocked:mime-type
• <img> 仍需保留 src 和 srcset，它是最终 fallback，不是可选项
• <source> 不写 media，就表示无条件参与格式选择；写了 media 反而可能误触发屏幕尺寸逻辑，偏离头像需求

头像区域通常尺寸稳定（如 40px、64px、80px），不需要 sizes 属性。加了反而干扰浏览器判断，尤其当页面有 CSS 缩放或 flex 布局时，容易导致选图错误。

Html2md

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

下载

小屏设备加载高清图不会明显卡顿，现代 CDN 和 HTTP/2 能很好支撑；真正影响性能的是没压缩的大图，所以建议统一用工具生成 WebP + 2x 版本，并开启懒加载（loading="lazy"）即可。

立即学习“前端免费学习笔记（深入）”；