图片与视频资源优化：企业官网如何在清晰和轻量之间取舍

企业官网越来越像一本画册：高清产品图、工厂航拍、产品演示视频。视觉是竞争力，但资源不加约束，就会把访客的耐心耗在加载条上。清晰和轻量并非二选一，关键在于按用途分配资源。

一、按展示位置决定资源规格

首屏 banner、产品列表缩略图、详情页大图、案例场景图，这四类位置的尺寸需求完全不同。常见错误是用同一张原图应付所有位置，结果列表页加载了详情页的分辨率。正确的做法是先确定每个位置的实际渲染尺寸，再按两倍图输出。

视频同理。首页自动播放的背景视频应控制在十秒以内、体积两兆以内，并且静音、循环、不阻塞首屏；产品演示视频则适合点击后再加载，避免拖累页面。

二、格式选择：该用 WebP 就用 WebP

WebP 在同等画质下通常比 JPEG 小三到五成，主流浏览器已全面支持。对需要透明背景的图，优先用 WebP 而不是 PNG；对图标与简单图形，SVG 的体积优势更明显。保留原图作为源文件，输出时按用途生成多个规格。

三、加载策略：让首屏先跑起来

首屏图片应预加载并明确宽高，避免布局跳动；首屏以下的图片一律延迟加载。列表页使用缩略图，点击后再加载大图。给图片设置明确的宽高比，可以显著改善累积布局偏移，这项指标直接影响访客的主观流畅感。

四、别忘了版权与 alt

商用图片必须有授权来源，来自搜索引擎的图片不能直接使用。每张有信息价值的图片都应填写 alt 文本，既服务无障碍阅读，也帮助搜索引擎理解图片内容，是图片搜索流量的入口。