产品页上的图与视频，是客户判断产品做工与细节的主要依据，也是站点体积的大头。素材没规范，常见三种后果：页面加载偏慢、搜索引擎读不懂图片内容、多语言站点复用素材时把中文文件名与描述直接带过去。
下面按「图片命名 → 尺寸与格式 → 替代文本 → 视频参数 → 多语言复用」五段，给出可以直接照做的规格。
一、图片命名：用英文语义加短横线
- 统一使用英文小写字母、数字与短横线，例如
steel-pipe-fitting-dn50-elbow.webp； - 命名包含「产品关键词 + 关键规格 + 序号」，不要用
IMG_0342.jpg、微信图片_2026.jpg这类无语义文件名； - 一个产品有多张图时，用后缀区分视角，例如
-front、-side、-detail、-packaging； - 文件名上线后尽量不要再改。改名等于换地址，旧的收录与外部引用会失效；确需修改时用 301 指向新地址。
二、尺寸与格式：按展示位置分别出图
- 列表页缩略图：长边建议 600 至 800 像素，文件控制在 100KB 以内；
- 详情页主图：长边建议 1200 至 1600 像素，文件控制在 300KB 以内；
- 细节与放大图：长边不超过 2000 像素，允许 500KB 以内，供客户放大查看工艺细节；
- 格式选择：优先 WebP，兼容性要求高时用 JPEG 兜底；带透明背景的图标与 LOGO 用 PNG 或 WebP 的无损模式；
- 宽高属性：每张图都要标注
width与height，或用固定比例容器包裹，避免加载时的页面跳动。
同一张图不要一图多用：把 2000 像素的主图缩小当缩略图显示，既拖慢首屏，也浪费带宽。
三、替代文本：写给读不出图的人看
替代文本同时服务三件事：图片加载失败时的说明、读屏软件对视觉障碍用户的朗读、以及搜索引擎对图片内容的理解。
- 长度建议 40 至 80 个字符，覆盖「产品名称 + 关键规格 + 视角或场景」；
- 不要堆砌关键词，也不要把替代文本写成一句营销文案；
- 装饰性图片（分隔线、背景纹理）留空替代文本，并在代码中标注为装饰元素；
- 详情页的规格表截图要谨慎：参数应以文字表格呈现，图片形式的表格无法被检索与朗读。
四、视频参数：先控时长，再谈清晰度
产品视频能提升停留时间，但也是最容易拖垮页面的一项：
- 时长：单条产品视频建议 20 至 60 秒，只讲一个主题（装配、使用、对比）；
- 分辨率与码率：1080p 已满足网页播放，建议码率 2 至 4 Mbps，避免直接上传相机原片；
- 格式与编码：MP4 容器配 H.264 编码的兼容性较广，需要更小体积时用 H.265 并准备 H.264 回退版本；
- 封面图：为每条视频设置封面图，避免加载时出现空白区域，也便于在列表页展示；
- 加载方式：视频不自动播放、不预加载；用点击展开或懒加载触发，首屏不放视频。
五、多语言站点的素材复用
多语言站点容易出问题的地方，是素材「一次上传、多语种共用」：
- 文件名保持英文与规格导向，不要按语种另存一套，否则同一产品在不同语种下出现多个地址，权重被分散；
- 替代文本按语种分别填写，用目标语言的常用说法描述产品与规格；
- 图片中的文字要单独处理：图内印有中文说明的图，其他语种页面应换成本地语言版本，不要直接复用；
- 单位与规格标注本地化：公制与英制混用的产品（如长度、承重、温度），按市场在图片说明或替代文本中标注对应单位。
素材规范的收益不会立刻体现在排名上，但它同时影响加载速度、无障碍体验与图片搜索的收录。一次整理好，后面每一次上新都能省一遍返工。
#素材规范#产品图片优化#替代文本#视频参数#独立站运营