100字范文 > 简单高效压缩图片保持图片高质量的神仙网站

简单高效压缩图片保持图片高质量的神仙网站

时间：2023-04-16 20:53:59

简单高效压缩图片，保持图片高质量的神网站

前言

我们在做网站前端的时候常常会遇到这样一个场景

我有一张超高清的图片，要在首页作为封面图来展示，图片大小达到了 1.23MB，而我们此时需要要求我们前端页面在毫秒级别完成加载，那这样一张图片不仅会消耗我们服务器的流量同样也会拖累前端页面的加载速度！

此时此刻你是不是已经想要打开各种软件对图像分辨率进行调整了，其实并不用，这里有一个网站叫做tinypng

这个网站有一定的优点的同时也存在一些缺点

网站网址

TinyPNG:[点击访问](TinyPNG – Compress WebP, PNG and JPEG images intelligently)

网站优点

可以看到上图就是tinypng网站的首页网站使用非常简单，拖拽我们的文件到对应区域即可上传压缩

同时该网站提供了api给开发者可以调用在你的应用程序中直接上传时进行压缩操作

我们现在上传一下刚才的那张8K的图片

我们可以比较震惊的看到图片文件体积的明显变化

从1.3MB直接降到了311.7KB巨大的文件变化，也就意味着访问100次仅可消耗3.117MB的流量，有效的减少了前端图片文件大影响网站速度加载的问题，我们先抛开体积问题去查看一下我们的图片质量，可以看出压缩前后的差别并不大，但是因为png8和png24文件类型的缘故还是有一定图质的破坏，但是人眼是无法看出的。

缺点

这个网站免费版本是受限制的，您只可以上传5MB以内的图片，最多20个图片文件进行处理，不适用于超大图片压缩以及大批量文件处理！

网站提供了一个Photoshop插件可惜需要付费，有这方面摄影类网站需求做处理的可以去了解一下

原理技术实现

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

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 这种图片存储格式，其体积会小一大半，加载速度也会快很多。

所以，TinyPNG 这个网站主要就是把 PNG-24 的图转成了 PNG-8 而已。也是非常的实用的！

因为已经转换为PNG-8格式了，其余的压缩算法对压缩后的文件无法起到实质性作用，所以你用压缩完成后的文件再向tinypng网站上面去上传的话，压缩比就会变得很小了只有半分之几！