새로운 코덱 지원, 업데이트된 디자인, CLI 지원
Squoosh는 Google팀이 빌드하고 Chrome Dev Summit 2018에서 처음 선보인 이미지 압축 앱입니다. 다양한 이미지 코덱을 쉽게 실험하고 최신 웹의 기능을 보여줄 수 있도록 빌드되었습니다.
오늘 Google에서는 더 많은 코덱 지원, 새로운 디자인, 명령줄에서 Squoosh CLI라는 새로운 Squoosh 사용 방법을 포함한 주요 앱 업데이트를 출시합니다.
새로운 코덱 지원
이제 브라우저에서 기본적으로 지원되는 코덱 외에도 OxiPNG, MozJPEG, WebP, AVIF를 지원합니다. WebAssembly를 사용하면서 새로운 코덱이 다시 가능해졌습니다. 코덱 인코더와 디코더를 WebAssembly 모듈로 컴파일하면 사용자는 원하는 브라우저에서 지원하지 않는 경우에도 최신 코덱에 액세스하고 이를 실험할 수 있습니다.
명령줄 Squoosh!
2018년 처음 출시된 이후 일반적인 사용자 요청은 UI 없이 프로그래매틱 방식으로 Squoosh와 상호작용하는 것이었습니다. 앱이 명령줄 기반 코덱 도구를 기반으로 하는 UI였기 때문에 이 경로에 대해 약간 충돌이 발생했습니다. 하지만 여러 도구가 아닌 전체 코덱 패키지와 상호작용하고 싶다는 바람은 잘 알고 있습니다. Squoosh CLI가 바로 이러한 작업을 수행합니다.
npm i @squoosh/cli를 실행하여 Squoosh CLI의 베타 버전을 설치하거나 npx @squoosh/cli [parameters]를 사용하여 직접 실행할 수 있습니다.
Squoosh CLI는 Node로 작성되었으며 PWA에서 사용하는 것과 정확히 동일한 WebAssembly 모듈을 사용합니다. 작업자의 광범위한 사용을 통해 모든 이미지는 병렬로 디코딩, 처리 및 인코딩됩니다.
또한 npx를 통해 빠르고 원활하게 설치할 수 있도록 Rollup을 사용하여 모든 것을 하나의 JavaScript 파일로 묶습니다. CLI는 시각적 충실도를 저하시키지 않고 이미지 품질을 최대한 낮추려고 하는 자동 압축도 제공합니다(Butteraugli 측정항목 사용).
Squoosh CLI를 사용하면 웹 앱의 이미지를 여러 형식으로 압축하고 <picture> 요소를 사용하여 브라우저가 최적의 버전을 선택하도록 할 수 있습니다. 또한 이미지 압축을 빌드 프로세스의 자동 부분으로 만들기 위해 Webpack, Rollup 및 기타 빌드 도구용 플러그인을 빌드할 계획입니다.
Webpack에서 Rollup으로 빌드 프로세스 변경
Squoosh를 빌드한 팀은 올해 도구 보고서를 위한 빌드 도구를 검토하는 데 상당한 시간을 투자해 왔으며, 빌드 프로세스를 Webpack에서 Rollup으로 전환하기로 했습니다.
Webpack은 처음에 팀으로서 프로젝트를 시작했고, 2018년에는 원하는 방식으로 프로젝트를 설정할 수 있는 유일한 도구였습니다. 시간이 지나면서 Rollup의 간편한 플러그인 시스템과 ESM 덕분에 이 프로젝트가 자연스럽게 선택되었음을 알게 되었습니다.
업데이트된 UI 디자인
blobs를 시각적 요소로 표시하는 앱의 UI 디자인도 업데이트했습니다. 코드에서 데이터를
처리하는 방식에 대한 간단한 말입니다. Squoosh는 이미지 데이터를 blob으로 전달하므로
디자인에 blob을 포함하는 것이 자연스럽게 느껴졌습니다.
색상 사용도 다듬었기 때문에 색상은 강조 이상의 의미가 있었지만 어떤 이미지가 옵션의 컨텍스트에 해당하는지 구분하고 강화하기 위한 벡터가 되었습니다. 무엇보다 홈페이지가 좀 더 활기차고 도구 자체는 좀 더 명확하고 간결합니다
다음 단계는 무엇인가요?
계속해서 Squoosh를 지원할 계획입니다. 새로운 이미지 형식이 출시됨에 따라 저희는 사용자가 복잡한 작업 없이 코덱을 사용할 수 있는 공간을 제공하고자 합니다. 또한 Squoosh CLI의 사용 범위를 확대하고 웹 애플리케이션의 빌드 프로세스에 더 많은 기능을 통합하려고 합니다.
Squoosh는 항상 오픈소스였지만 Google에서는 커뮤니티 성장에 중점을 두지 않았습니다. 2021년에는 참여자를 확대하고 프로젝트 온보딩 절차를 개선할 계획입니다.
스쿼시에게 어떤 아이디어가 있나요? Issue Tracker를 통해 알려주시기 바랍니다. 팀은 긴 겨울 휴가를 보낼 예정이지만 새해에 다시 연락드리겠습니다.