怎么用HTML的picture标签实现PC端和手机端图片分离-html教程-PHP中文网

标签需用按 media 互斥覆盖全区间（如 min-width:1200px/768px-1199px/max-width:767px），为必填兜底，srcset 中逗号分隔同尺寸不同 dpr 图，webp 应优先声明并确保服务器返回正确 mime 类型。

怎么用html的picture标签实现pc端和手机端图片分离

picture标签怎么写才能让PC和手机加载不同图片

直接用 <picture></picture> + <source></source> + <img> 三层结构，浏览器会按 <source></source> 的 media 或 srcset 条件匹配，只下载并渲染满足条件的那张图。关键不是“写几个图片”，而是让每个 <source></source> 有明确的触发边界。

常见错误是把 media 写成 (max-width: 768px) 却没设 min-width，结果在 320px 和 768px 之间匹配了，但在 414px（iPhone Pro）或 375px（iPhone）下又因 DPR 高而模糊——这不是标签问题，是响应逻辑没对齐设备能力。

<source></source> 必须写在 <img> 标签之前，顺序错会导致全部失效
所有 <source></source> 的 media 条件必须互斥且覆盖完整区间（比如从 min-width: 1200px 到 max-width: 767px），否则可能 fallback 到 <img>
<img> 的 src 是兜底项，必须存在，且不能留空；它的 srcset 和 sizes 可以补充高 DPR 场景

PC端用大图、手机端用小图的典型写法

下面这个例子适配主流断点：桌面 ≥1200px、平板 768–1199px、手机 ≤767px，并兼顾 2x 屏幕：

<picture><source media="(min-width: 1200px)" srcset="hero-desktop@1x.jpg, hero-desktop@2x.jpg 2x"><source media="(min-width: 768px) and (max-width: 1199px)" srcset="hero-tablet@1x.jpg, hero-tablet@2x.jpg 2x"><source media="(max-width: 767px)" srcset="hero-mobile@1x.jpg, hero-mobile@2x.jpg 2x">
  @@##@@
</source></source></source></picture>

注意：srcset 里的逗号分隔的是「同一尺寸不同像素密度」的图，2x 表示该图适用于设备像素比为 2 的屏幕（如 iPhone 8、MacBook Retina）。浏览器不会同时下载所有 @2x 图，只选匹配当前 devicePixelRatio 和 viewport 宽度的那个。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

别用 width 或 height 属性控制显示大小，用 CSS；否则 <img src="hero-mobile@1x.jpg" alt="hero"> 的 intrinsic size 会影响 sizes 计算
如果用 sizes（比如 sizes="(max-width: 767px) 100vw, (max-width: 1199px) 50vw, 33vw"），必须和 srcset 中的宽度描述符（如 400w）配合，否则浏览器无法预估渲染宽度
测试时禁用缓存，用 Chrome DevTools 的 Network → Disable cache + device toggle，观察实际加载的是哪张图

为什么用了picture还是加载了大图

最常被忽略的是 <img> 标签本身带 src，而你又在 CSS 里写了 display: none 或 opacity: 0——浏览器仍会下载 <img> 的 src，哪怕它不可见。这不是 bug，是规范行为。

确保所有 <source></source> 都命中了某个条件，用 DevTools 的 Elements 面板看哪个 <source></source> 被标记为 “selected”
检查是否误把 media 写成 min-device-width（无效），必须用 min-width（基于 viewport）
服务端开了 HTTP/2 推送或 CDN 预加载，可能绕过 <picture></picture> 的选择逻辑，需关掉测试
某些老安卓 WebView（如 Android 4.4）不支持 <picture></picture>，会直接加载 <img>，得靠 caniuse 查兼容性再决定是否 polyfill

要不要加 webp 格式做进一步优化

要，但得加在 <source></source> 里，且放在更具体的条件前。因为浏览器按顺序匹配，第一个满足的就停，所以 WebP 应该优先于 JPEG：

<picture><source media="(min-width: 1200px)" type="image/webp" srcset="hero-desktop@1x.webp, hero-desktop@2x.webp 2x"><source media="(min-width: 1200px)" srcset="hero-desktop@1x.jpg, hero-desktop@2x.jpg 2x"><!-- 其他 source 同理 -->
  @@##@@
</source></source></picture>

注意：type="image/webp" 是 MIME 类型声明，不是文件扩展名；服务器必须正确返回 Content-Type: image/webp，否则部分浏览器（如 Safari 14 之前）会跳过该 <source></source>。

WebP 的优势在体积，但编码耗时高；如果你的构建流程没开自动转码，手动维护两套格式容易漏更新。真正省流量的点，往往卡在没压缩原图、或没配好 sizes 导致浏览器选了过大的 srcset 项——这些比格式切换影响更大。