为什么你的网站图片需要压缩 | Bulk Image Compressor
如果你的网站加载需要几秒钟以上,人们就会离开。这不是观点。Google自己的研究表明,当页面加载从一秒钟增加到三秒钟时,跳出率增加32%。而图片几乎总是页面加载缓慢的最大原因。
大多数网站提供的图片比需要的要大得多。直接从相机或图库网站出来的一张首屏大图可以轻松达到5MB或更多。在不错的宽带连接上,仅这一个文件就需要几秒钟来加载。在移动3G连接上,仅一张图片就需要大约15秒。现在想象一个有五六张这样图片的页面。
你的图片到底有多大?
这里有一个快速现实检查。打开浏览器的开发者工具(F12),进入网络标签,重新加载页面,然后按”Img”过滤。查看大小。你可能会发现至少有几张图片超过1MB。
作为参考,以下是典型未压缩图片的样子:
- DSLR照片用作首屏横幅:4到8MB
- 智能手机的产品照片:2到5MB
- 以全分辨率下载的图库照片:3到10MB
- 保存为PNG的信息图或插图:1到4MB
经过适当压缩后,同样的图片可以变成100KB到300KB,质量没有任何可见损失。那是90%或更多的文件大小缩减。
页面速度和Core Web Vitals
Google将Core Web Vitals用作排名信号,图片直接影响三个指标中的两个。
Largest Contentful Paint (LCP) 测量最大的可见元素加载所需的时间。在大多数页面上,那个最大的元素就是图片。如果你的首屏大图是5MB,你的LCP会很糟糕。Google认为超过2.5秒的任何东西都是差的LCP分数。压缩后的图片通常能将LCP带到这个阈值以下。
Cumulative Layout Shift (CLS) 测量视觉稳定性。没有定义尺寸的图片在加载时会导致布局偏移。这更多是关于HTML属性而非压缩,但加载缓慢的过大图片会使问题更严重,因为页面在可能不匹配最终图片尺寸的占位空间周围渲染内容。
你可以通过Google PageSpeed Insights检查你当前的分数。运行你的首页和几个内页。如果你的性能分数低于90,图片很可能是问题的主要部分。
SEO关联
页面速度是Google确认的排名因素。自2010年桌面端和2018年移动端以来一直如此。2021年Core Web Vitals的引入使其更加直接。
但影响不仅仅超出速度信号。慢速页面被Googlebot抓取的频率更低。Google为每个网站分配一个”抓取预算”,如果你的页面速度慢,机器人会花费其预算等待响应,而不是索引更多的内容。对于有数百或数千个页面的较大网站,这非常重要。
还有一个通过用户行为的间接影响。当人们从慢速页面跳出时,Google会注意到。高跳出率和低页面停留时间会发送负面参与信号,随着时间的推移可能影响你的排名。
用户体验和跳出率
人们在网上缺乏耐心。Portent的一项研究发现,加载时间每增加一秒,转化率平均下降4.42%。如果你的电商网站加载需要五秒而不是两秒,你可能会损失相当大比例的销售额。
移动用户甚至更缺乏耐心。超过一半的Web流量来自移动设备,而移动连接通常比桌面慢。你的图片需要足够小,以便在使用蜂窝网络的手机上快速加载。
还有感知因素。快速的网站感觉更专业、更可信。慢速的网站感觉出了问题,即使所有内容最终都会加载。第一印象发生在毫秒之间。
带宽成本累积
如果你使用共享主机或基础计划,你可能不会考虑带宽。但对于有真实流量的网站来说,带宽是要花钱的。
让我们做点计算。假设你的平均页面有3MB的图片,你每月有100,000次页面浏览。那是每月300GB的图片数据传输。压缩后,同样的页面可能只有400KB的图片,将传输量降到40GB。这是托管成本和CDN费用的显著减少。
对于高流量网站、媒体公司或拥有大型产品目录的电商商店,这种差异每月可以节省数百或数千美元。
如何批量压缩你的网站图片
你可以在Photoshop或GIMP中一张一张地压缩图片,但如果你有数十或数百张图片,那就不现实了。批量压缩是正确的方法。
使用批量图片压缩器,你可以一次性拖入所有网站图片并一起压缩。以下是一个实用工作流:
-
导出当前图片。 如果它们已经在你的网站上,下载它们。如果你正在建新站,收集你计划使用的所有图片。
-
选择你的格式。 对于照片,JPEG或WebP效果最好。对于需要透明度的图形,使用PNG或WebP。如果你不确定选择哪种格式,请查看我们的Web性能图片格式指南。
-
设置质量级别。 对于大多数网站图片,质量设置75%到85%在文件大小和视觉质量之间给出了良好的平衡。对于缩略图或背景图片可以更低。关于这种权衡的更多细节,请参见我们的文章减小文件大小而不损失质量。
-
压缩并下载。 该工具在你的浏览器中处理所有内容,所以你的图片永远不会离开你的电脑。用压缩后的版本替换你服务器上的原始文件。
-
还要设置尺寸。 不要在只有800px宽的容器中提供4000px宽的图片。在压缩之前或期间将图片调整到匹配其显示尺寸。仅这一步就可以显著减小文件大小。
快速前后对比示例
以下是压缩对典型网站的实际效果:
| 图片 | 之前 | 之后 | 节省 |
|---|---|---|---|
| 首屏横幅(JPEG) | 4.2MB | 210KB | 95% |
| 团队照片(JPEG) | 3.1MB | 185KB | 94% |
| 标志(PNG) | 890KB | 95KB | 89% |
| 博客缩略图(JPEG) | 1.8MB | 120KB | 93% |
| 总计 | 10MB | 610KB | 94% |
这就是一秒钟加载完成的页面和八秒钟加载的页面之间的区别。
不要忘记新内容
压缩你现有的图片是一次性修复,但你还需要一个持续内容的流程。每次你或你的团队添加新的博客文章、产品页面或落地页时,这些图片都应该在上线前被压缩。
让图片压缩成为你内容发布工作流的一部分。它只需要几分钟,对你网站速度和SEO的影响是真实且可衡量的。
你的网站图片可能是你能做的最大单项性能改进。工具是免费的,过程是快速的,结果立即显示在你的页面速度分数中。
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor