如何压缩图片提升网站速度（速度指南）
你的网站有速度问题。罪魁祸首几乎肯定是你的图片。
图片占大多数网页总重量的一半以上。一张未优化的照片可能比你所有的HTML、CSS和JavaScript加起来还大。这些额外的重量拖慢了页面加载，让访客感到沮丧，损害你的搜索排名。
好消息？压缩图片快速、简单，效果显著。这个指南告诉你如何为网页压缩图片。正确的设置、正确的格式，以及获得最小文件而不损失可见质量的正确工作流程。
为什么未压缩的图片会拖慢你的网站？
每次有人访问你的页面，浏览器都会下载每一张图片。更大的文件需要更长的下载时间。更长的下载意味着更慢的页面。
看一些典型数字。相机直出的照片可能有5-8MB。Retina显示器的截图可能有2-3MB。即使是从Figma或Canva等设计工具导出的图片也常常有500KB到1MB。
现在把这个乘以你页面上的图片数量。一篇有5张未优化照片的博客文章，仅图片就可能重达15-25MB。在移动网络上，这需要10秒以上才能加载。大多数访客会在3秒后离开。
Google的数据显示，当页面加载时间从1秒增加到3秒时，跳出概率增加32%。从1秒到5秒，增加90%。沉重的图片是页面超过这些阈值的主要原因。
压缩解决了这个问题。一张压缩良好的图片看起来和原图几乎一样，但重量减少80-95%。那张5MB的产品照片变成150KB。你的页面在2秒内加载，而不是8秒。
网页图片应该使用什么质量设置？
质量滑块是压缩图片时最重要的设置。太高文件还是很大。太低看起来很差。以下是找到最佳平衡点的方法。
对于照片（产品照片、博客图片、背景），使用75-85%的质量。在这个范围内，JPEG和WebP文件比原始文件小80-90%。质量差异在屏幕上对大多数人来说是看不出的。
在85%时，你看不出和原图的区别。在75%时，高细节区域可能有轻微的柔化，但几乎察觉不到。低于60%是伪影开始出现的地方。边缘周围的块状图案。渐变中的色带。模糊的细节。
对于图形和插图（图标、logo、图表），不要使用有损压缩。使用PNG来保持锐利的边缘和文字。如果文件大小重要，转换为无损WebP。无损WebP通常比同样的PNG小25%。
对于截图，使用PNG或90%以上质量的WebP。截图中的文字在过度压缩后会变模糊。如果截图包含可读文字，保持高质量或使用无损。
快速参考表：
| 图片类型 | 格式 | 质量 | 预期大小 |
|---|---|---|---|
| 产品照片 | WebP或JPEG | 75-85% | 50-200 KB |
| 博客hero图片 | WebP或JPEG | 80-85% | 100-200 KB |
| 缩略图 | WebP或JPEG | 70-80% | 15-50 KB |
| Logo/图标 | PNG或SVG | 无损 | 5-30 KB |
| 截图 | PNG或WebP | 90-100% | 100-400 KB |
这些目标适用于大多数网站。每张图片力争在200KB以下，能做到的话100KB以下。
压缩前应该先调整图片大小吗？
是的。总是应该。调整大小是最大的文件大小节省，而大多数人跳过了这一步。
为什么这很重要。现代手机的照片是4000x3000像素。你的博客以800px宽显示它。这意味着你发送的像素是屏幕需要的15倍。所有多余的数据被下载然后丢弃。
先把图片调整到显示尺寸。然后压缩。效果非常显著。
以那张5MB的4000x3000照片为例：
- 调整到1200px宽（适合大多数博客）：降到~1MB
- 以WebP 80%质量压缩：降到~100KB
- 删除元数据：再节省20-30KB
最终结果：大约80KB。比原始的5MB减少98%。
对于Retina屏幕，以显示尺寸的2倍提供图片。如果你的博客栏宽600px，调整到1200px。额外的像素让图片在高密度屏幕上看起来清晰，而不像完整的4000px那样浪费。
别忘了响应式图片。使用srcset为不同的屏幕宽度提供不同的尺寸。375px屏幕的移动用户不需要1200px的图片。
<img
src="/photo-800.webp"
srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="产品照片"
>
这为每个设备提供正确大小的图片。移动用户获得更小的文件。桌面用户获得完整质量。所有人都获得更快的页面。
哪种图片格式对网站速度最好？
格式选择对文件大小有巨大影响。同一张照片保存为不同格式可能相差50%或更多。
WebP是当前网页图片最好的通用选择。比JPEG压缩效率高25-35%。支持有损和无损压缩。支持透明度。而且97%以上的浏览器支持。
JPEG仍然是照片最广泛使用的格式。压缩效果好，到处都能用。如果你还没准备好切换到WebP，75-85%质量的JPEG仍然是个好选择。
PNG最适合需要透明度或像素级精确的图片。Logo、图标、带文字的截图。但PNG文件对于照片来说比同等的JPEG大3-5倍。不要用PNG来存照片。
AVIF提供目前最好的压缩比。比JPEG小多达50%。但编码更慢，浏览器支持还不完全普及。如果你的技术栈支持，值得测试。
想更深入了解每种格式的工作原理，请查看我们的图片压缩完全指南。它涵盖了有损vs无损、何时使用每种格式，以及如何避免常见错误。
如何高效批量压缩图片？
一次压缩一张图片适合快速修复。但如果你在优化整个网站，你需要更快的工作流程。
选项1：使用在线批量压缩工具。 CompressIMG等工具让你一次上传最多20张图片。设置质量，压缩，然后下载ZIP。不需要安装软件。不需要账户。
这是大多数人最快的选择。上传你的博客图片，把质量设为80%，下载压缩后的批量文件。整个过程不到一分钟。
选项2：使用构建工具自动压缩。 如果你是开发者，把图片优化加入你的构建流程。Next.js、Astro和其他框架有内置的图片优化。它们在构建时或请求时自动调整大小、压缩和转换图片。
选项3：使用API实现自动化工作流。 如果你的网站处理用户上传或从CMS拉取图片，你希望压缩自动发生。图片压缩API以编程方式处理文件。不需要手动步骤。
选项4：使用带自动优化的CDN。 Cloudflare、Imgix和Cloudinary等服务可以即时压缩和调整图片大小。你上传原始文件，CDN根据访客的设备和浏览器提供优化版本。
对于大多数以内容为主的网站，选项1就足够了。上传你的图片，压缩它们，搞定。对于频繁更新的大型网站，选项2-4通过自动化流程节省时间。
TinyPNG、Squoosh和CompressIMG的对比详细介绍了哪种工具适合哪种工作流程。有些处理批量处理。有些给你对设置的精细控制。选择符合你工作方式的那个。
每种图片类型应该瞄准什么文件大小？
好的目标帮你知道图片什么时候"完成了"。以下是现实的基准：
Hero图片和全宽横幅： 200KB以下。这些是页面上最大的图片，通常是LCP元素。保持在200KB以下有助于你的Core Web Vitals分数。
博客文章图片： 100KB以下。文字栏中的内容图片不需要很大。800-1200px宽、80%质量很容易达到这个目标。
产品缩略图： 50KB以下。在网格或轮播中显示的小图片。调整到显示尺寸（通常300-400px）并以70-80%压缩。
图标和logo： 20KB以下。颜色少的简单图形。尽可能使用SVG。否则用PNG或无损WebP。
页面图片总重量： 初始视口500KB以下。首屏以下lazy load的图片不计入初始加载，但仍影响传输的总数据量。
Google PageSpeed Insights会标记可以进一步优化的图片。压缩后运行测试，看看是否还有图片需要处理。"以下一代格式提供图片"的建议意味着你应该从JPEG或PNG切换到WebP或AVIF。
压缩图片会降低质量吗？
这是最常见的担忧。诚实的回答是：技术上是的。但视觉上不是。
有损压缩删除数据。这就是它让文件变小的方式。但现代算法对删除什么很聪明。它们删除你的眼睛看不到的细节。微小的颜色变化。亚像素图案。对计算机有意义但对人类没有意义的数据。
在80%质量下，压缩的JPEG或WebP在屏幕上与原图视觉上完全相同。你需要放大到400%并逐像素比较才能发现差异。没有访客会注意到。
伪影变得可见的质量水平取决于图片内容。平滑渐变的照片比有锐利边缘和文字的图片能承受更多压缩。这就是为什么推荐的质量因图片类型而异。
关键规则：始终从最高质量的源文件开始。不要重新压缩已经压缩过的JPEG。每轮有损压缩都会进一步降低质量。如果你只从原始文件压缩一次，质量会保持优秀。
使用带有并排预览的工具在下载前检查结果。CompressIMG显示原始和压缩图片，带有可以拖动的滑块。如果你能看到差异，提高质量。如果看不到，就完成了。
准备好加速你的网站了吗？
图片压缩是让网站加载更快的最快方法。只需几分钟，不花一分钱，改善效果可以衡量。
从你最大的图片开始。你的hero横幅、产品照片和博客图片。调整到显示尺寸。以75-85%质量压缩。如果可以就转换为WebP。
CompressIMG在你的浏览器中处理一切。上传最多20张图片，设置质量，下载优化后的文件。不需要账户。
更快的网站意味着更满意的访客、更好的搜索排名和更多的转化。你的图片是最快的解决方案。