支援新轉碼器、更新設計,並支援 CLI!
Squoosh 是我們團隊建構的圖片壓縮應用程式,並在 2018 年 Chrome 開發人員高峰會上首次推出。我們打造這個工具,是為了讓您輕鬆實驗不同的圖片轉碼器,並展示現代網路的功能。
今天,我們發布了這項應用程式的重大更新,不僅支援更多轉碼器,還採用全新設計,並推出 Squoosh CLI,讓您在指令列中使用 Squoosh。
支援新轉碼器
除了瀏覽器原生支援的轉碼器外,我們現在也支援 OxiPNG、MozJPEG、WebP 和 AVIF。WebAssembly 再次實現了新轉碼器。將編碼器和解碼器編譯為 WebAssembly 模組後,即使偏好的瀏覽器不支援新版轉碼器,使用者也能存取及試用。
啟動指令列 Squoosh!
自 2018 年首次推出以來,使用者普遍要求以程式輔助方式與 Squoosh 互動,不必透過 UI。我們對這個路徑有些疑慮,因為我們的應用程式是建構在指令列編解碼器工具之上的 UI。不過,我們瞭解您希望與整套轉碼器互動,而不是使用多種工具。Squoosh CLI 正是為此而設計。
您可以執行 npm i @squoosh/cli 安裝 Squoosh CLI 的 Beta 版,也可以使用 npx @squoosh/cli [parameters] 直接執行。
Squoosh CLI 是以 Node 編寫,使用的 WebAssembly 模組與 PWA 完全相同。透過大量使用工作站,所有圖片都會平行解碼、處理及編碼。
我們也使用 Rollup 將所有內容打包成一個 JavaScript 檔案,確保透過 npx 安裝時快速又順暢。CLI 也提供自動壓縮功能,可盡可能降低圖片品質,同時不影響視覺保真度 (使用 Butteraugli 指標)。
使用 Squoosh CLI,您可以將網頁應用程式中的圖片壓縮為多種格式,並使用 <picture> 元素,讓瀏覽器選擇最佳版本。我們也計畫為 Webpack、Rollup 和其他建構工具建構外掛程式,讓圖片壓縮成為建構程序的一部分。
建構程序從 Webpack 變更為 Rollup
今年,我們在工具報告中花費大量時間研究建構工具,而 Squoosh 的開發團隊也決定將建構程序從 Webpack 換成 Rollup。
這個專案一開始是使用 Webpack,因為我們想以團隊形式試用,而且在 2018 年,Webpack 是唯一能提供足夠控制權的工具,讓我們以想要的方式設定專案。隨著時間推移,我們發現 Rollup 簡單的外掛程式系統和 ESM 的簡潔性,使其成為這個專案的自然選擇。
新版 UI 設計
此外,我們也更新了應用程式的 UI 設計,以 blobs 做為視覺元素。這有點像是雙關語,意指我們在程式碼中處理資料的方式。Squoosh 會以 Blob 形式傳遞圖片資料,因此在設計中加入一些 Blob 感覺很自然 (你懂嗎?)。
我們也調整了色彩的使用方式,讓色彩不僅是強調效果,更是區分和強化選項相關圖片的向量。總而言之,首頁的色彩更鮮明,工具本身也更清楚簡潔。
後續步驟
我們打算繼續開發 Squoosh。隨著新圖片格式發布,我們希望使用者能輕鬆使用編解碼器。我們也希望擴大使用 Squoosh CLI,並將更多功能整合到網頁應用程式的建構程序中。
Squoosh 一直是開放原始碼,但我們從未專注於擴大社群。2021 年,我們計畫擴大貢獻者群組,並為專案提供更完善的入門程序。
你對 Squoosh 有什麼想法嗎?請在我們的問題追蹤工具中回報。團隊將放長假,但我們保證會在新年後回覆您。