### [移动端商品主图：picture 标签四步优化](https://www.huociguo.com/article/1506)

**Published:** 2026-09-30T04:57:12

**Author:** 米了

**Excerpt:** 屏幕宽度与像素密度跨度大，单一主图难以兼顾清晰度与体积。四个步骤：断点换构图、密度换清晰度、WebP 兜底、缓…

移动设备的屏幕宽度与像素密度跨度大，单一主图难以同时满足清晰度与体积要求。商品主图位于首屏，还要兼顾加载时机与 CDN 缓存命中。按四个步骤推进即可收敛。

![桌面上的智能手机与笔记本电脑，用于说明同一张商品主图在不同屏幕上的取舍](https://api.huociguo.com/wp-content/uploads/2026/09/a4.jpg)

同一张大图在窄屏和高分屏上的资源需求完全不同

## 第一步：按断点换构图

窄屏给方图或竖版裁切，宽屏给横版或留白版。构图差异属于 source 的职责，交给 media 条件判断。

```html
<source media="(max-width: 600px)" srcset="cover-square-640.webp">
```

## 第二步：同一构图内按像素密度换清晰度

同一份构图再按设备像素比出 1x 与 2x 两套，避免高分屏拿到糊图、普通屏下载超量资源。

```html
<img
  src="cover-640.jpg"
  srcset="cover-640.jpg 1x, cover-1280.jpg 2x"
  width="640" height="640"
  alt="商品主图">
```

## 第三步：给 WebP 机会，保留兜底

source 自上而下匹配，格式优先的 source 放在前面，末尾 img 保留 jpg 地址作为兜底。

```html
<picture>
  <source media="(max-width: 600px)" type="image/webp" srcset="cover-square-640.webp">
  <source media="(max-width: 600px)" srcset="cover-square-640.jpg">
  <img src="cover-640.jpg" srcset="cover-640.jpg 1x, cover-1280.jpg 2x" width="640" height="640" alt="商品主图">
</picture>
```

## 第四步：收口缓存与尺寸

-   CDN 缓存键要把 Accept 头纳入 Vary，否则 WebP 会被发给不支持的客户端，或被反向污染；
-   img 必须写 width 与 height，避免加载后产生布局跳动；
-   首屏主图不加 loading=”lazy”，需要抢占带宽时补 fetchpriority=”high”；
-   缩略图走独立尺寸，不用 CSS 把大图缩成小图。

## 验收顺序

1.  断点取图片在版式中的实际列宽，不取设备宽度；
2.  同一构图的候选宽度成倍差，便于 CDN 命中同一套派生资源；
3.  WebP 源排在 jpg 源之前，末尾 img 的 src 不带动态参数；
4.  在开发者工具的 Network 面板核对实际下载的资源与体积，确认没有重复请求；
5.  压缩率与清晰度做一次人工比对，据此定下最终的候选数量。

**Tags:** CDN缓存, picture元素, WebP, 图片体积, 移动端适配

**Categories:** HTML5

---