这是「进击的Coder」的第 635 篇技术分享

作者：崔庆才

我们肯定经常跟图片打交道吧，不管是写文章、传图片还是网站开发，我们或多或少都要插图，但有时候图片体积比较大的时候就会带来加载速度慢的一些问题，那么这时候你可能会有这么一个需求：

“

有没有什么办法在保证图片清晰度的时候把图片的体积压缩到最小？

”

大家通常会用什么办法呢？

我的话其实用的比较多的办法就是使用 PS，然后另存为 Web 所用格式，但用到这个功能我还得额外装个 PS，感觉比较麻烦。

所以，今天给大家推荐一个非常好用的图片压缩网站，可以将图片体积缩小一大半，同时几乎不改变图片清晰度。

简介

直接开门见山，网站地址是：https://tinypng.com/^[1]，名称就叫 TinyPNG。

看名字我们就知道 tiny + png，tiny 就是小，png 就是图片的一种格式，就和图片压缩很接近了，简单好记。

那它的主要功能是什么呢？我们来看下主页：

可以看到，网站的一个大标题就是 "Smart WebP, PNG and JPEG compression"，意思就是智能的 WebP、PNG 和 JPEG 格式的压缩工具。

那么这个网站做了什么呢？

TinyPNG 网站举了一个例子：

可以看到原始图片和压缩后的图片对比几乎没有什么差别，而压缩前图片有 57KB，压缩后只有 15 KB。

测试

看介绍感觉很厉害的样子啊，那我们来测试下看看吧，这次我们从网上先保存一张图片来看看：

这张图片原图大小是 3.5MB，分辨率是 2356x1310，如图所示：

下面我们来上传下，点击这里就可以上传了，或者直接把图片拖拽到这个位置就可以：

这里写着我们可以上传最多 20 张图片，每张图片大小不超过 5MB，感觉这个限制已经相对宽松了。

压缩完成之后显示，我们图片的最终大小成了 999.1KB，整整缩小了 71%！

到底效果行不行，拉出来溜溜。

然后我们可以直接点击 Download 按钮下载下来就好，压缩后的图片效果如下：

放在一起对比下：

能看出哪个才是原图吗？

其实第二张才是原图，是不是几乎看不出什么差别？

背后技术

看简介可以了解到，TinyPNG 这个网站使用了有损压缩技术来减小 WebP、PNG、JPEG 格式图片的文件大小，它通过有选择地减少图像中的颜色数量来达到压缩效果，同时由于咱们人眼对这种细微颜色变化感知比较弱，所以压缩前后图片在人眼看到几乎是没什么区别的。

对于 PNG 图片来说，它其实细分为 PNG-8 和 PNG-24，它们有什么区别呢？

其实我们知道，每一个图片都是由一个个像素点组成的对吧，每一个像素点都有一定的颜色，那许许多多的像素点排列在一起就组成了一张图片。

在计算机里面，每个像素点其实都有一定的存储单位来表示，对于 PNG-8 来说，一个像素点是由 8 位二进制数表示的，而计算机中 8 位最多表示 2 的八次方，即 256 种组合，其实一个像素就能显示 256 种颜色。同理，而 PNG-24 就相当于一个像素点用 24 位来表示，所以能表示的颜色数量就是 2 的 24 次方，结果约 1600 万。所以 PNG-24 相比 PNG-8 来说每个像素可表示的颜色就多非常多，色彩也就更丰富，所以 PNG-24 适合摄影作品之类的比较丰富的图片。但随之而来的 ，PNG-24 的文件体积相比 PNG-8 也会大很多。

而对于人眼来说，其实一张图片用 PNG-8 和 PNG-24 来表示，如果不仔细放大看的话，效果其实不太明显。所以有时候我们为了更高的压缩比，就可以选用 PNG-8 这种图片存储格式，其体积会小一大半，加载速度也会快很多。

所以这种图很适合在网站开发的时候使用，所以你可以看到一些网站的 Logo、Banner 图都是 PNG-8 类型的图片。

所以实际上，TinyPNG 这个网站其实就是把 PNG-24 的图转成了 PNG-8 而已。

进一步测试

那知道原理之后，我们如果把 PNG-8 的图片再上传给 TinyPNG 这个网站，还能获得压缩吗？

我们来试试。

可以看到，我们将压缩后的图片再次尝试压缩，这次最终可能就是 959.9 KB 了，只获得了 4% 的压缩，所以可以看到几乎也没有什么压缩空间了。因为它无法再将 PNG-8 进一步降低每个像素的表示位数了。

支持情况

看来这个压缩效果的确还可以的，那么它的兼容性怎么样？

介绍说，它支持所有主流的浏览器，比如 Chrome、Firefox、Safari、Edge 甚至一些移动设备浏览器也是有很好的支持的，所以平时只要我们有浏览器，就能用了。

支持 APNG 吗？

不知道大家有没有听说过一种 PNG 图片格式，叫做 APNG，其实就是 Animated PNG，就是可以动的 PNG 图片，比如这张图片：https://ezgif.com/images/apng.png^[2]

大家可以打开看看效果。

对于这种图片，现在主流的浏览器也都支持显示了，如果你的浏览器支持，那么能看到这张图片是动的。

TinyPNG 对 APNG 这种格式也是支持的！

对于 PS 的支持

TinyPNG 也提供了 PS 的插件，安装之后我们也可以在 PS 里面直接使用 TinyPNG 了：

这个插件适用于 PS 的 CS5、CS6、CC2013-2022 所有版本。

具体大家可以看 https://tinypng.com/photoshop^[3]

不过坏消息是，这个插件是收费的，大家按需上车。

总结

好了，以上就是本文章全部内容了，希望对大家有帮助。

End

崔庆才的新书《Python3网络爬虫开发实战（第二版）》已经正式上市了！书中详细介绍了零基础用 Python 开发爬虫的各方面知识，同时相比第一版新增了 JavaScript 逆向、Android 逆向、异步爬虫、深度学习、Kubernetes 相关内容，‍同时本书已经获得 Python 之父 Guido 的推荐，目前本书正在七折促销中！

内容介绍：《Python3网络爬虫开发实战（第二版）》内容介绍

扫码购买

好文和朋友一起看~