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

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元三江侗做網(wǎng)站,已為上家服務(wù),為三江侗各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

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

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

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

npm install

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

然后執(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)成功后，瀏覽器訪問http://127.0.0.1:5000，就可以開始壓縮圖片了。

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

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

有興趣的，可以按照Github中的說明安裝下來嘗試一下。

網(wǎng)頁題目：開源的在線圖片壓縮工具-Squoosh
當(dāng)前網(wǎng)址：http://uogjgqi.cn/article/djjccis.html