图片在企业站上的处境有点尴尬：它是转化率最高的元素之一，同时也是拖慢网站最厉害的东西。处理好这组矛盾，性价比比想象中高。

先搞清楚现状

随手抽查几个企业站的首页，资源体积里图片占到七成以上是常态。原因通常很朴素：市场部拿到相机原图就直接上传，一张 5MB，一个页面十张。

解决办法的第一步是定规矩：上传前必须压缩，单张控制在 200KB 以内。这一条执行下去，大部分网站的速度问题就解决了一半。

格式怎么选

不同场景适合不同格式，别一律用 JPEG：

产品实拍、现场照片：用 WebP，同等画质下体积能比 JPEG 小三成左右，现在主流浏览器都支持
Logo、图标、线条图：用 SVG，放大不模糊，体积还特别小
需要透明背景的图：WebP 或 PNG，看是否要兼容很老的浏览器
老浏览器兜底：用 <picture> 元素同时提供 WebP 和 JPEG，浏览器自己挑

尺寸要跟着显示区域走

展示区只有 600 像素宽，就别放 3000 像素的图。更细致一点的做法是准备多个尺寸，让浏览器按屏幕挑：

<img src="https://www.jiayunyoupin.cnproduct-800.webp"srcset="product-800.webp 800w, product-1600.webp 1600w"sizes="(max-width: 768px) 100vw, 800px"alt="工业除尘器设备实拍" />

这样手机用户不会为了看一张小图而下载桌面版的大文件，流量和速度都省下来了。

加载时机

首屏那张主图要优先加载，甚至可以用 <link rel="preload"> 提前发起请求；首屏之外的图片统一加 loading="lazy"，等滚动过去再说。

还有个容易被忽略的点：给图片写上宽度和高度属性，或者用 CSS 预留位置。否则图片加载完成时页面会突然往下顶，用户的点击可能就点错了地方，这个跳动也会被计入布局偏移指标。

别浪费 alt 这个位置

替代文本首先是给看不见图片的人用的，其次它也是搜索引擎理解图片的唯一线索。写法是客观描述图片内容，不要堆关键词。

不好的写法：alt="除尘器除尘器厂家工业除尘设备"
好的写法：alt="车间内的脉冲布袋除尘器实拍"

顺带一提，纯装饰性的图片把 alt 留空就行，没必要硬写。

文件名也有讲究

IMG_20230415_143022.jpg 这种名字没有任何信息量。改成 industrial-dust-collector-workshop.webp，搜索引擎和用户都能一眼看懂，在图片搜索里也更容易被找到。

图片是网站上唯一能被图片搜索直接带来流量的资源，别让它的文件名是一串数字。
—— 一位靠图片搜索拿过订单的外贸经理