移动端商品主图用实现高清展示，需精准匹配设备能力与内容需求：优先WebP/AVIF+JPEG回退、按屏幕宽度切换构图、结合srcset/sizes精细控制资源加载，并设置有效alt和loading="lazy"。

移动端商品主图用 标签实现高清展示，核心不是堆参数，而是精准匹配设备能力与内容需求：既要让新机型加载 WebP/AVIF 小体积高清图，又要让旧安卓或 iOS 系统兜底 JPEG；同时针对手机竖屏窄视口做构图适配，避免关键信息被裁掉。

优先用现代格式 + JPEG 回退

移动端流量中超过 92% 的设备支持 WebP，但仍有部分低端安卓机或微信内置浏览器（X5 内核）不识别。用 主动声明格式，比靠服务器协商更可控：

• —— 这是最终 fallback，必须存在且路径有效

注意：WebP 图片体积通常比同质量 JPEG 小 30%，对 3G/4G 弱网用户尤其友好；1x / 2x 对应设备像素比，不用写 3x 或 4x，手机端极少需要超 3 倍分辨率。

按屏幕宽度切换构图（艺术指导）

淘宝、拼多多等平台在手机端默认只显示主图的中间区域，宽图容易被左右裁切。用 指定不同断点下的图片，确保关键信息始终居中可见：

• 小屏（≤480px）：用竖版特写图，突出产品主体和核心卖点文字，尺寸建议 750×1200
• 中屏（481–767px）：用标准正方形图，如 750×750，适配主流安卓全面屏
• 大屏（≥768px）：可选横版或 1080×1080，用于平板或横屏浏览场景

示例结构：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

  
  
  

结合 srcset 和 sizes 做精细控制

仅靠 media 查询不够，还要告诉浏览器“这张图在当前布局下实际占多宽”。比如主图在手机端常占满视口宽度（100vw），但加了 padding 或边框后可能只剩 90vw。正确写法：

• sizes="(max-width: 767px) 90vw, 33vw" —— 小屏用 90% 视口宽，桌面端按列宽算
• srcset="main-375w.jpg 375w, main-750w.jpg 750w, main-1125w.jpg 1125w" —— 提供物理像素宽度标记，浏览器据此选最接近的资源

这样比单纯写 2x 更可靠，尤其在页面缩放或动态布局（如手淘首页卡片流）中能避免加载过大图浪费带宽。

别忽略 alt 和 loading 属性

移动端搜索引擎和读屏工具依赖 alt 理解图片语义，不能留空或写“主图1”这类无效值。建议写成：“【品牌】XX无线耳机｜蓝牙5.3｜续航30小时｜白底主图”。loading="lazy" 必须加上，防止首屏外主图阻塞渲染，实测可提升 LCP（最大内容绘制）指标 0.8 秒以上。