博客图片优化让你的站点飞起来

昨天有个朋友问我，他那个WordPress博客加载要5秒多，怎么优化一下。我一看他那站点，好家伙，首页20多张图全是原图直接往上怼，最大的那张banner图4MB……我说兄弟你这是开画廊呢还是写博客呢？

说真的，图片优化这事很多人不当回事，但它是博客速度最容易被忽视的大坑。我自己之前也踩过——2024年那会儿刚搭站，写了一篇配图比较多的教程，首屏加载4.2秒，Google PageSpeed直接给我标红。后来花了半天把图片全压缩了一遍，直接降到1.8秒，那感觉，就像换了条宽带。

怎么压缩？其实特别简单：

第一招，用TinyPNG。免费的，拖进去就行，一般能压掉60%-70%的体积，肉眼看不出区别。批量的话用它的API，写个脚本一键搞定。

第二招，WebP格式。现在主流浏览器都支持了，同样画质下比JPEG小30%左右。我博客现在所有图都转成WebP了，WordPress有个插件叫WebP Express，自动帮你转，不用手动搞。

第三招，懒加载。就是图片滚到可视区域了才开始加载。WordPress 5.5以后原生支持了，给img标签加个loading="lazy"就行。有些主题默认就开了，你看一下你站点源码有没有这个属性。

哦对了还有个事，很多人忘了设图片尺寸。浏览器渲染的时候如果不知道图片多大，会先按0x0算，等图片加载完再重新排版，这就是布局偏移，CLS分直接拉胯。给img加上width和height属性，或者用srcset做响应式图片，这问题就解决了。

我现在的做法是：写文章的时候先把图扔进TinyPNG压一下 → 转WebP → 上传时填好alt和尺寸 → 全局开懒加载。就这四步，PageSpeed评分基本能稳在90+。

别小看这个速度，Google排名现在很看重Core Web Vitals。你内容写得再好，打开跟蜗牛似的，人家搜到了也不想点。

反正就一句话：图片这东西，该压就压，别心疼。用户不会因为你图片是4K原画就觉得你博客牛，但他会因为等5秒直接关掉页面。

标签： 图片优化 博客速度 WebP 懒加载 Core Web Vitals