지난 글을 작성하면서 github에서 사용할 이미지는 가급적 압축을 하는게 좋겠다고 느꼈습니다. 아이패드 스크린샷 이미지 하나만으로도 이미 10MB나 되는 용량을 차지하기 때문에 먼 미래에는 큰 문제가 될 것으로 예상되었기 때문입니다. 예상하는 방법은 간단합니다. 10MB짜리 이미지를 1만개 사용했다와 같이 미래의 어느 지점을 바라보고 과연 이게 관리가 가능한가를 따져보면 됩니다. 절대 불가능하다고 판단했습니다.
오늘은 이런 이미지들을 손쉽게, 무료로, 무제한으로 압축할 수 있는 웹사이트를 소개하고자 합니다.
원리
보통의 이미지 압축 사이트에서는 이미지를 클라이언트에서 받아서 서버로 보내고, 압축 처리를 한 다음에 다시 클라이언트로 돌려줍니다. 그렇게 해서 우리가 결과물을 다운로드 할 수 있게 되는 것입니다. 결과적으로 별도의 서버 자원을 소모하기 때문에, 무료로 무제한 제공하기는 어렵습니다. 그렇다면 compressimage.io에서는 어떻게 이게 가능할까요? 바로 Wasm (WebAssembly)을 이용했기 때문입니다.
인터넷에서 Wasm에 대해 적어놓은 설명을 살펴보겠습니다.
WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.
출처: mozilla.org
웹 브라우저에서 실행되는 프로그램 정도로 요약이 가능합니다. 즉, compressimage.io에서는 이미지 압축 기능을 가진 Wasm을 제공하기 때문에 별도의 서버가 아닌 우리의 컴퓨터 자원을 소모하여 웹 브라우저 자체에서 이미지를 압축하여 제공하는 것입니다. 그래서 일반적인 이미지 압축 사이트와 달리, 단순히 정적 웹사이트를 유지하는 비용만 발생하기 때문에 서비스를 무료로 무제한 제공할 수 있는 것입니다.
실제로 개발자 도구를 이용하여 Network 항목을 살펴보면 XHR 항목이 전혀 보이지 않습니다. 이미지를 압축했는데도 외부 호출이 전혀 없다는 뜻입니다. 그리고 중간에 webp_enc.wasm 항목이 존재하는데, 바로 이 파일에 의해서 실제 이미지 압축이 진행되는 것입니다. 제가 작성하는 글의 모든 이미지는 이곳을 통해서 이미지 퀄리티를 90%로 살짝 조절하고 출력 형태는 webp 형태로 압축, 변환하여 제공하고 있습니다.
맺음말
Wasm의 세계는 앞으로도 무궁무진합니다. 실제로 compressimage.io와 유사하게 Wasm 방식의 웹사이트들이 점차 늘어나고 있습니다. 특히, ffmpeg Wasm을 이용하여 구축된 AVPress도 그 중에 하나입니다. 이름만 들어도 감이 오시겠지만, AVPress는 간단한 비디오 또는 GIF 편집이 가능합니다. 이처럼 Wasm을 이용한 기능이 점차 늘어난다면 사용자 입장에서는 간단한 프로그램을 직접 설치하지 않고도 브라우저를 이용하여 사용이 가능하게 될 전망입니다.
이런 유용한 사이트들은 발견하는 족족 북마크에 추가해두시는게 좋습니다! 😊