别让图片拖垮你的网站：一篇讲透 PNG、JPG、WebP
很多新站长的困惑惊人地一致：明明服务器不慢、代码没写错，为什么首页打开要三四秒？用工具一测，真相往往很简单——整页体积的大头，全是图片。
对绝大多数网页来说，图片能占到页面总重量的 50% 以上。代码优化省下的是几十 KB，图片优化省下的是几 MB。这篇文章把图片优化的关键决策一次讲透：格式怎么选、压到什么程度、代码里怎么写。
一、先看一个真实数字
一张 1920×816 的网站横幅图，未经优化的 PNG 存下来约 2.4MB。经过合理压缩：转成 WebP 格式，体积降到约 100KB——画质肉眼看不出差别，体积缩小到原来的 4%。
2.4MB 意味着什么？按普通 4G 网速，用户光下载这一张图就要等两三秒。而 100KB 几乎无感。这就是图片优化的威力：它不是锦上添花，它直接决定用户是"看到你的网站"还是"关掉你的网站"。
二、四大格式，各自管什么
JPEG（JPG）——照片的默认选择。 有损压缩，专为照片这类色彩连续变化的图像设计。风景、人物、照片类横幅，都用它。质量参数设在 75~85 之间，通常是"体积和画质"的最佳平衡点；低于 60 才会出现肉眼可见的色块和毛边。
PNG——无损，但有明确的适用边界。 它的优势是两点：支持透明通道、压缩后不失真。所以它适合 Logo、图标、带透明背景的素材、UI 截图。但它最不适合的场景恰恰是照片——一张照片存成 PNG 可能比 JPEG 大好几倍，画质优势却根本看不出来。把照片存成 PNG，是最常见也最冤枉的体积浪费。
WebP——当代的全能选手。 Google 推出的现代格式，同时支持有损和无损、支持透明、支持动画。同等画质下，体积通常比 JPEG 小 25%~35%，比 PNG 小一半以上。它在浏览器里的兼容性如今已经非常成熟，Chrome、Edge、Firefox、Safari 全面支持。新站的图片，WebP 应该是第一优先选项。
SVG——图标的专属格式。 它是矢量格式（用数学描述图形而不是像素），放大不糊、可以用代码改颜色、体积极小。网站上的图标、简单插画，SVG 是唯一正解。
至于更新的 AVIF，压缩率比 WebP 更激进，但目前生态和工具链还不够普及，可以关注，暂不必作为主力。
三、比选格式更重要的四件事
1. 尺寸要匹配显示尺寸。 页面上一块 400px 宽的位置，就不要塞一张 1920px 宽的图。很多"内容编辑直接传手机原图"的站，单图轻松超过 5MB——图在屏幕上却只有火柴盒大小。上传前把图片缩到实际需要的最大尺寸，是零成本、立竿见影的优化。
2. 压缩质量别过头，也别不够。 经验值：照片类 JPEG/WebP 用 75~85，透明 PNG 用 TinyPNG 这类工具压一遍。判断标准很简单：把压缩前后的图并排放，普通用户看不出区别，就说明压到位了。
3. 懒加载必须开。 给图片标签加上 loading="lazy" 属性，浏览器就会只加载视口内的图片，用户往下滑才加载下面的。对长页面来说，这一行代码能把首屏加载时间砍掉一半以上。Z-Blog 不少主题和插件已内置此能力，确认一下你的主题开了没有。
4. 响应式图片，手机别吃电脑的量。 用 srcset 属性为不同屏幕宽度提供不同尺寸的图：手机加载 640px 版本，电脑加载 1920px 版本。做起来不复杂，收益在移动端立竿见影。
四、实操工具清单
不用记命令，这几个工具覆盖日常所有场景：
Squoosh（谷歌出品，网页版免费）：拖进去、拖出来，格式转换和压缩一气呵成，还能实时对比画质；
TinyPNG：批量压 PNG/JPG 的老牌选手，效果稳定；
批量场景：如果图片多，用命令行工具（如 Pillow、sharp）写个循环，一次性把目录里所有图转成 WebP——几十张图也就几十秒的事。
另外提醒一句：Z-Blog 后台上传的图片会原样存储，上传前处理图片比上传后在网站上想办法更有效。
五、一张清单收尾
下次往网站传图前，过一遍这五问：
这张图的显示尺寸是多少？原图缩到这个尺寸了吗？
它是照片还是图形？（照片→JPEG/WebP，图形→PNG/SVG）
转成 WebP 了吗？
压缩质量在 75~85 区间吗？
页面里不在首屏的图，加懒加载了吗？
五问全过，你的图片体积通常能降为原来的十分之一。而省下来的每一 KB，都会变成用户打开页面时实打实的速度。
网站性能优化有无数条路径，但如果只让你做一件事，那就是把图片管好。这是投入产出比最高的那一件事。