說(shuō)到圖片壓縮，大部分人應(yīng)該都知道tinypng這個(gè)在線圖片壓縮工具，不得不說(shuō)，這貨的壓縮質(zhì)量還挺不錯(cuò)的。而且，我也經(jīng)常用到它。前幾天，我要壓縮幾張自己的照片用于電子請(qǐng)柬，不想把這些私有圖片上傳到別人的網(wǎng)站上，就想著找個(gè)開(kāi)源的。最終還真找到一個(gè)非常不錯(cuò)的開(kāi)源圖片在線壓縮工具-squoosh。

squoosh在壓縮圖片時(shí)，都是在本地執(zhí)行，不會(huì)將圖片上傳到服務(wù)端，這樣就保障了用戶隱私安全。但是，Squoosh用到了谷歌分析工具，會(huì)收集一些基礎(chǔ)信息。

如果連基礎(chǔ)信息你也介意的話，反正代碼在你手上，想怎么干就看你自己了。

我們?nèi)ithub把代碼下載下來(lái)，解壓源代碼，進(jìn)入到源碼根目錄，安裝依賴包。

npm install

安裝過(guò)程可能會(huì)因?yàn)榫W(wǎng)絡(luò)原因安裝失敗，這里是用nrm來(lái)替換鏡像源。

然后執(zhí)行編譯。

npm run build

最后，執(zhí)行運(yùn)行命令：

npm run dev

因?yàn)槲矣玫氖荳indows，執(zhí)行npm run dev會(huì)報(bào)錯(cuò)，所以，就修改了package.json的內(nèi)容，將:

"scripts": {
   "build": "rollup -c && node lib/move-output.js",
   "debug": "node --inspect-brk node_modules/.bin/rollup -c",
   "dev": "DEV_PORT=\"${DEV_PORT:=5000}\" run-p watch serve",
   "watch": "rollup -cw",
   "serve": "serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static",
   "prepare": "husky install"
 },

改為:

"scripts": {
   "build": "rollup -c && node lib/move-output.js",
   "debug": "node --inspect-brk node_modules/.bin/rollup -c",
   "dev": " run-p watch serve",
   "watch": "rollup -cw",
   "serve": "serve --listen=5000 --config ../../../serve.json .tmp/build/static",
   "prepare": "husky install"
 },

如果是Linux,則不需要做如上的調(diào)整。

現(xiàn)在執(zhí)行運(yùn)行命令:

啟動(dòng)成功后，瀏覽器訪問(wèn)http://127.0.0.1:5000，就可以開(kāi)始?jí)嚎s圖片了。

這里，我隨便找一圖片原圖大小為776KB的png圖片壓縮并轉(zhuǎn)換為jpg后的大小為101KB。

當(dāng)然，這里的轉(zhuǎn)換格式和壓縮質(zhì)量也可以通過(guò)設(shè)置來(lái)調(diào)整的。通過(guò)網(wǎng)頁(yè)的方式，我們可以一張張的進(jìn)行壓縮，如果我們壓縮的圖片較多時(shí)，這樣的操作效率就有些低了，其實(shí)，Squoosh還提供了API和客戶端命令來(lái)批量壓縮。

有興趣的，可以按照Github中的說(shuō)明安裝下來(lái)嘗試一下。