Picture 标签通过 <source> 的 media、srcset、sizes 和 type 属性，实现按视口宽度、设备像素比和格式支持的多维响应式图片适配，未匹配时回退至 <img>。

Picture 标签本身不直接识别“屏幕分辨率”，而是根据视口宽度（viewport width）、设备像素比（dpr）、图片格式支持等条件，由浏览器自主选择最合适的图片资源。关键在于用 <source> 提供多种候选，并通过 media、sizes 和 srcset 精准描述适用场景。

用 media 属性匹配视口宽度（最常用）

通过 media 属性指定 CSS 媒体查询条件，让不同宽度的屏幕加载对应尺寸的图片：

• media="(max-width: 480px)" → 小屏（如手机），加载窄图
• media="(min-width: 768px) and (max-width: 1023px)" → 平板，加载中等宽图
• media="(min-width: 1024px)" → 桌面，加载宽图或高清图

注意：<source> 按顺序匹配，第一个满足条件的生效；未匹配到时，回退到末尾的 <img>。

用 srcset + sizes 实现响应式密度切换（适配高 DPR 屏幕）

当同一视口下需为 Retina 屏提供 2x 图，普通屏用 1x 图，应结合 srcset（提供多密度源）和 sizes（告知浏览器图片在页面中的显示宽度）：

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

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• srcset="photo-400w.jpg 1x, photo-800w.jpg 2x"：告诉浏览器 1x 设备用 400w，2x 设备用 800w
• sizes="(max-width: 600px) 100vw, 50vw"：表示小屏占满视口宽，大屏占视口一半 —— 这帮助浏览器预估所需像素宽度，再结合 DPR 决定最终加载哪张

例如：在 400px 宽的 2x 屏上，浏览器计算需约 800px 宽的图，于是选 photo-800w.jpg。

优先使用 type 属性支持现代图片格式（如 WebP/AVIF）

用 type 声明图片 MIME 类型，浏览器会跳过不支持的格式，提升加载效率：

• <source srcset="photo.avif" type="image/avif">
• <source srcset="photo.webp" type="image/webp">
• <img src="photo.jpg" alt="描述"> → 作为所有不支持新格式浏览器的兜底

现代浏览器按 <source> 顺序检查 type，首个支持的即被采用，无需 JS 判断。

完整示例：兼顾宽度、密度与格式

以下代码实现三重适配：小屏用 WebP 小图，桌面用 AVIF 大图，Retina 屏自动加载双倍分辨率版本，不支持新格式则降级为 JPG：

<picture>
  <source media="(max-width: 480px)"
      srcset="photo-small.webp 1x, photo-small@2x.webp 2x"
      type="image/webp">
  <source media="(max-width: 480px)"
      srcset="photo-small.jpg 1x, photo-small@2x.jpg 2x">
  <source media="(min-width: 481px)"
      srcset="photo-large.avif 1x, photo-large@2x.avif 2x"
      type="image/avif">
  <source media="(min-width: 481px)"
      srcset="photo-large.webp 1x, photo-large@2x.webp 2x"
      type="image/webp">
  <img src="photo-large.jpg"
      srcset="photo-large.jpg 1x, photo-large@2x.jpg 2x"
      alt="风景照"
      sizes="(max-width: 480px) 100vw, 50vw">
</picture>