官网图片用 JPG、PNG 还是 WebP？图片怎么压缩才不糊

帮一家做家居的客户优化官网，发现他们首页一张 5 兆的实拍图就直接传上去了，手机端打开要转好几秒。图片本身的像素没问题，就是格式和压缩完全没处理过，白瞎了好图。

官网图片看着是个小事，其实直接影响两件事：打开速度和专业感。格式选对、压缩得当，图片能小十倍，肉眼几乎看不出差别。

JPG 最适合照片。颜色丰富的实拍图、产品图，用 JPG，同样的画质体积最小。缺点是不支持透明背景。

PNG 适合需要透明的图。logo、带透明底的插图、截图，用 PNG。但照片用 PNG 会非常大，同样一张图可能比 JPG 大好几倍，别拿 PNG 存照片。

WebP 是更现代的格式，照片和透明图都能处理，体积通常比 JPG 再小两三成，现在主流浏览器都支持。唯一要注意的是特别老的浏览器可能不认，不过对企业官网来说，现在用 WebP 基本没风险。

很多人觉得图片大是"图太清晰"，其实多半是格式不对。一张 5 兆的照片，如果是从相机原图直接传的，转成 WebP 或者压缩过的 JPG，往往能压到 200 到 500 千字节，画质看不出损失。

所以第一步不是上压缩工具，是先看这张图是什么格式、原图多大。照片存成 PNG、或者相机原图直接传，这俩才是体积大户。

图片压缩不是压得越小越好，压过头会出"马赛克"和色块，得不偿失。记住两个原则：

按实际显示尺寸来。官网里一张图展示宽度是 800 像素，就别传 4000 像素的原图，先把尺寸缩到 800 到 1600 像素（考虑高清屏），体积就已经小了一大截。

质量参数调到 70 到 85。多数压缩工具里质量 80 左右，肉眼几乎看不出和 100 的差别，但体积能省一半以上。压完放大看细节，没有明显噪点和模糊就说明没压过头。

在线压缩工具。搜"图片压缩"就有不少，上传图片、调参数、下载，适合偶尔处理几张图，不用装软件。

本地工具。处理量大、要批量压缩的，用桌面软件或者命令行工具，比如装个图片处理软件，批量把整个文件夹的图转成 WebP，一次搞定。

模板自带的上传功能。很多建站系统的后台，上传图片时会自动压缩并生成适合网页的版本，这种最省心，直接传原图就行，系统帮你处理。

透明底的 logo 别压成 JPG。JPG 不支持透明，压完背景会变白或者变黑，logo 放在深色背景上就穿帮了。logo 要么用 PNG，要么用更专业的矢量格式。

截图尽量用 PNG。网页截图、软件界面截图，文字多、颜色平，用 PNG 清晰，用 JPG 反而容易在文字边缘出锯齿和杂色。

在模板市场看模板时，可以问一句后台上传图片会不会自动压缩。现在很多模板自带图片优化，直接传原图就行，省得自己一张张处理，也不怕传上去拖慢页面。