推薦一個好用的圖片壓縮網站!清晰度不變的同時體積減小一大半

語言: CN / TW / HK

這是「進擊的Coder」的第  635  篇技術分享

作者:崔慶才

我們肯定經常跟圖片打交道吧,不管是寫文章、傳圖片還是網站開發,我們或多或少都要插圖,但有時候圖片體積比較大的時候就會帶來載入速度慢的一些問題,那麼這時候你可能會有這麼一個需求:

有沒有什麼辦法在保證圖片清晰度的時候把圖片的體積壓縮到最小?

大家通常會用什麼辦法呢?

我的話其實用的比較多的辦法就是使用 PS,然後另存為 Web 所用格式,但用到這個功能我還得額外裝個 PS,感覺比較麻煩。

所以,今天給大家推薦一個非常好用的圖片壓縮網站,可以將圖片體積縮小一大半,同時幾乎不改變圖片清晰度。

簡介

直接開門見山,網站地址是: https://tinypng.com/ ,名稱就叫 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

大家可以開啟看看效果。

對於這種圖片,現在主流的瀏覽器也都支援顯示了,如果你的瀏覽器支援,那麼能看到這張圖片是動的。

TinyPNG 對 APNG 這種格式也是支援的!

對於 PS 的支援

TinyPNG 也提供了 PS 的外掛,安裝之後我們也可以在 PS 裡面直接使用 TinyPNG 了:

這個外掛適用於 PS 的 CS5、CS6、CC2013-2022 所有版本。

具體大家可以看 https://tinypng.com/photoshop

不過壞訊息是,這個外掛是收費的,大家按需上車。

總結

好了,以上就是本文章全部內容了,希望對大家有幫助。

End

崔慶才的新書 《Python3網路爬蟲開發實戰(第二版)》 已經正式上市了!書中詳細介紹了零基礎用 Python 開發爬蟲的各方面知識,同時相比第一版新增了 JavaScript 逆向、Android 逆向、非同步爬蟲、深度學習、Kubernetes 相關內容,‍同時本書已經獲得 Python 之父 Guido 的推薦,目前本書正在七折促銷中!

內容介紹: 《Python3網路爬蟲開發實戰(第二版)》內容介紹

掃碼購買

好文和朋友一起看~