营销活动落地页海报图核心诉求是换构图、换尺寸、保格式，需用picture标签按视口断点匹配不同构图版本，结合srcset实现dpr适配与webp/jpeg格式降级，替代background-image以支持艺术指导。

营销活动落地页里的海报图，核心诉求不是“换分辨率”，而是“换构图+换尺寸+保格式”。 正是为此设计的——它不靠 JS，不靠媒体查询 hack，而是用声明式语法让浏览器自己挑最合适的图。

按设备视口切构图：手机裁头像，桌面展全景

用户在手机上只关心主视觉焦点（比如人物脸部或促销数字），桌面则需要展示完整场景和品牌元素。这时不能只缩放同一张图，得用不同构图：

• 每个 对应一个明确断点，比如 media="(max-width: 479px)" 用强聚焦裁剪版，media="(min-width: 480px) and (max-width: 1023px)" 用中景版，media="(min-width: 1024px)" 用宽幅全景版
• 顺序必须从窄到宽、从具体到宽松，浏览器匹配第一个就停，重叠断点（如同时写 max-width: 768px 和 max-width: 1024px）会导致大屏也加载小图
• 是强制兜底项，必须带 src 和 alt，哪怕只是备用图，否则不支持 的旧浏览器会空白

按浏览器能力选格式：WebP 优先，JPEG 自动降级

海报图体积大，格式优化直接关系首屏速度。现代浏览器支持 WebP，老版本 IE 或部分安卓 WebView 则需 JPEG：

Html2md

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

下载

• 把所有 WebP 放 JPEG 前面，浏览器遇到第一个支持且匹配的就加载，不会继续往下看
• type 属性要与服务器响应头一致，比如 type="image/webp" 但服务端返回 Content-Type: text/plain，Chrome 会静默屏蔽该源
• 不要只为格式写 ，比如单独写 <source type="image/avif"></source> 却没配 media 或 srcset，等于无效代码

适配高 DPR 屏幕：小图也要高清，别让二维码模糊

营销海报常含文字、二维码、细线条图标，Retina 屏下普通图会发虚。仅靠 width 切图不够，得叠加像素密度控制：

• 在每个 的 srcset 里用 x 描述符，例如 srcset="poster-sm-1x.jpg 1x, poster-sm-2x.jpg 2x"
• 大屏 同样要配 2x/3x 版本，避免 iPad Pro 或 MacBook 视网膜屏加载低清大图
• 兜底 也得有 srcset，否则 fallback 时丢失 DPR 适配能力

按钮上的“海报级”背景图：用 picture 替代 background-image

落地页常有 CTA 按钮带视觉海报感（比如渐变+人物+文字叠加）。CSS background-image 无法响应式切换构图，但嵌入 可以：

• 把 设为 position: relative，内部放 ，再用 position: absolute + object-fit: cover 覆盖全按钮
• 文字层用 并设 z-index: 2，确保不被图片遮挡
• 不用 background-size: cover 那套逻辑，而是靠 提供多构图源，真正实现“手机显示重点，桌面展示氛围”

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！