做了15年建站，见过太多小白因为图片没选对，把好好的网站拖垮了。这篇就聊透制作网页时用的最多的图像文件，帮你省下服务器钱，还能让打开速度飞起。看完这篇，你以后传图再也不怕被老板骂慢，也不怕客户吐槽丑。

咱们先说结论，别绕弯子。做网站，图片选错了，就是给网站埋雷。

很多人觉得图片嘛，随便截个图上传不就完了？大错特错。我见过一个做餐饮的朋友，为了显得菜品诱人，直接用手机拍的高清原图上传。每张图好几兆，首页加载要好几秒。用户等不及，直接关页面走人。转化率几乎为零。

这就是典型的不懂行。

制作网页时用的最多的图像文件，其实就那几位常客：JPG、PNG、WebP。至于SVG，那是特殊情况用的。咱们一个个掰扯清楚，别被那些花里胡哨的名词忽悠了。

先说JPG。这是老熟人，兼容性最好。只要是浏览器，都能打开它。适合什么？适合照片。比如产品展示、人物肖像、风景图。JPP的优势是体积小，色彩过渡自然。但是！它不支持透明背景。如果你把JPG用在需要抠图的图标上，周围会有一圈难看的白边或者黑边，特别显廉价。

再说说PNG。这哥们儿支持透明背景。适合什么？适合Logo、图标、线条简单的图形。如果你需要图片背景是透明的，能完美融入网页底色，那就选PNG。但缺点也很明显，文件体积大。特别是颜色复杂的PNG，动不动就几兆。如果你用PNG去放一张大图，网站能卡死。

这里有个坑，很多新手喜欢用PNG放照片，觉得清晰。其实JPG在照片清晰度上并不输PNG，但体积小得多。除非你是做设计稿展示，否则别用PNG存照片。

现在，我要隆重推出现在的明星选手：WebP。

这是谷歌力推的格式。简单说，它既有JPG的小体积，又有PNG的透明支持。而且画质通常比前两者都好。现在的浏览器，除了老掉牙的IE，基本都支持WebP。如果你还在用15年前的电脑，那当我没说。但对于绝大多数现代网站，WebP是首选。

我有个客户，把全站图片从JPG换成WebP，首页加载速度提升了40%。这可不是小数目。在移动端，4G网络下，这40%的提升意味着用户不用在那转圈圈等待。

那SVG呢？SVG是矢量图。不管放大多少倍，边缘都是清晰的。适合图标、Logo、简单的插画。它的代码形式存储，文件极小。但是，SVG不适合照片，因为照片太复杂，代码量会爆炸。

所以，总结一下我的实战经验：

1. 照片类：首选WebP，备选JPG。

2. 图标、Logo、需透明背景：首选SVG，备选PNG。

3. 复杂图形且需透明：PNG。

别再去问“制作网页时用的最多的图像文件”到底是哪个了，没有唯一答案，只有最适合场景的答案。

最后提醒一点，无论用什么格式，上传前一定要压缩。用TinyPNG或者专门的压缩工具，把体积压到最小。别舍不得那点画质损失，用户根本看不出10%的差别，但能感受到0.5秒的加载差异。

记住，网站快，用户才愿意留。图片选对，事半功倍。别再让那些几兆的大图拖垮你的业绩了。