웹사이트를 방문할 때 이미지나 문서 등 다양한 리소스를 압축해 전송하면 인터넷 연결 속도가 느려도 더 편리하게 페이지를 볼 수 있다. 엔지니어 알리사 시레네바(Alyssa Sireneva)는 웹사이트 압축에 이미지 압축을 위해 개발된 WebP를 사용하면 일정 수준 이상 압축률을 달성할 수 있다고 발표했다.
많은 브라우저는 gzip이나 Brotli 같은 압축 형식을 지원하며 웹 서버는 상황에 따라 이 형식을 선택적으로 사용한다. gzip은 빠른 처리 속도와 낮은 부하 덕분에 거의 모든 경우 사용될 수 있지만 Brotli는 gzip보다 압축률이 더 높은 반면 처리 시간이 더 오래 걸린다.
시레네바는 사이트 경량화를 위해 Brotli를 사용하고 싶었지만 자신이 블로그를 호스팅하고 있던 깃허브 페이지(GitHub Pages)는 Brotli를 지원하지 않았다. 그 결과 그의 블로그에서 가장 긴 글을 로드하려면 Brotli로 압축된 37KB가 아니라 gzip 압축된 92KB 데이터 전송이 필요했다.
그는 Brotli 압축을 수동으로 적용해 보려 했지만 Brotli를 해제하기 위한 자바스크립트 코드 최소 크기가 71KB에 달해 오히려 역효과가 발생했다. 또 브라우저에 내장된 Brotli 디코더는 API 사양 때문에 사용할 수 없었다.
이때 그는 이미지 압축 방식을 활용하는 아이디어를 떠올렸다. 이미지 형식으로 압축된 경우 브라우저에 내장된 캔버스 API를 통해 압축을 해제할 수 있다. 그는 GIF나 PNG 형식도 고려했지만 최종적으로 WebP를 선택했다.
그는 다양한 파일에서 압축률 차이를 확인한 결과 WebP는 파란색인 gzip보다 높은 압축률을 보였으며 일부 파일에서는 Brotli에 가까운 압축률을 구현할 수 있었다고 한다. 하지만 캔버스 API는 핑거프린팅에 널리 사용되고 있기 때문에 파이어폭스에서 엄격한 추적 보호 기능을 활성화하면 노이즈가 섞여 출력되는 HTML에 오타가 포함될 수 있는 문제가 있다고 한다. 관련 내용은 이곳에서 확인할 수 있다.