在2018 Google Chrome開發者峯會上,Google發佈了Squoosh,這是一個開源的圖片壓縮漸進式Web應用(PWA),它同時也是現代Web技術的一個實際展示。
Squoosh提供了一種快捷和簡易的機制,能夠實現多種格式的圖片壓縮。用戶可以直接瀏覽Squoosh.app,將圖片拖放至瀏覽器的Tab標籤中,然後能夠嘗試多種圖片優化和轉換的設置。這個應用會在屏幕的兩側分別展現按照選定的壓縮配置在壓縮前和壓縮後的圖片視圖。
就目前來看,Squoosh不會成爲衆多圖片壓縮應用的競爭者,這種應用包括傳統的圖片編輯工具,如Photoshop和Sketch.app,以及基於Web的服務,如TinyPNG、ImageResize.org和Compressor.io,還包括各種桌面應用。
谷歌實驗室發佈Squoosh的主要目標是演示高級web應用程序如何利用現代技術在web瀏覽器中提供高性能的體驗。
Squoosh使用了多項技術來交付可靠的用戶體驗:
-
Node.js:服務端和命令行中的JavaScript(參見InfoQ上對Node.js的介紹);
-
Preact:React技術的替代方案,它的體量更小,是反應式、客戶端框架;
-
SASS:CSS預處理器;
-
類型化的CSS模塊(Typed CSS Modules):提供了在組件中使用CSS類的精確性,該技術被Dojo和其他框架所採用;
-
TypeScript:提供了接口和類型的安全性,這對於管理數量衆多的圖片優化格式至關重要(參見InfoQ對TypeScript的介紹);
-
WebAssembly:各種圖片壓縮的解編碼器(參見InfoQ對WebAssembly的介紹);
-
webpack:構建和打包功能的優化(參見InfoQ對webpack 4發佈的介紹)。
Squoosh遵循了很多現代化的模式,包括:
-
async/await;
-
使用Canvas進行圖片繪製;
-
Decorators(目前早期草案版本得到了TypeScript的支持);
-
meta,目前由Dojo和其他組織在推廣,在反應式架構中,能夠提供各種屬性;
-
可離線使用的漸進式Web應用(PWA)和service worker;
-
使用JSX的反應式、虛擬DOM架構,由React在推廣支持。
Squoosh支持各種圖像壓縮格式,包括BMP、GIF、JP2、JPEG、MozJPEG、PDF、PNG、TIFF和WebP。對圖像壓縮的支持因瀏覽器而異。例如,Firefox支持對BMP進行編碼,Safari將編碼功能委託給操作系統實現並且支持更多的格式,而Chrome本身支持的格式更少一些。Squoosh使用WebAssembly來處理不同瀏覽器中不包含某些圖像編解碼器的場景,並用其執行編碼和解碼過程。
Squoosh可以在Apache 2開源許可證下獲取。谷歌鼓勵開發者在遵循Squoosh貢獻指南的前提下,通過Squoosh GitHub 項目爲其做出貢獻。
英文原文
https://www.infoq.com/news/2018/11/google-squoosh-pwa-webassembly