웹피(WebP) 사용 가이드 : 이미지 최적화하기

보는 것이 1,000 마디 말보다 낫다고 하죠. 하지만 온라인에서는 이미지 하나가 1,000 킬로바이트 이상일 수 있습니다. HTTP 아카이브를 보면 이미지가 하나의 웹페이지 전체 사이즈의 평균 64%를 차지하고 있다고 합니다. 이걸 보자면 이미지 최적화를 해야하며, 특히 몇 초라도 로딩에서 지연되면 나가버리는 사용자를 생각한다면 이미지 최적화가 절실히 필요합니다. 

이미지 최적화에서 맞닥뜨리는 문제는 퀄리티를 유지하면서 이미지 사이즈를 줄이고 싶다는 겁니다. 이전에 새로운 파일 타입들을 만들어서 JPEG, PNG, GIF 포맷보다 더 나은 이미지 최적화를 위해 진행했었는데 성공적이지는 못했습니다.

WebP 알아보기

웹피는 2010년에 만들어진 이미지 포맷으로 현재 구글에서 개발이 이루어지고 있습니다. 무손실 압축과 손실 압축이 있는 웹피는 구글, 페이스북, 이베이 등 굵직한 기업들이 웹피 사용을 밀어주고 있습니다. 

웹피를 사용하면 좋은 대표적인 이유는 바로 파일 사이즈가 작아진다는 겁니다. 

1. 웹피 무손실 압축 이미지는 PNG보다 26% 사이즈가 작다.

2. 웹피 손실 압축 이미지는 JPEG보다 25 - 34% 정도 사이즈가 작다.

3. 웹피는 무손실 투명도(알파 채널이라고도 알려짐)을 지원한다. 사이즈는 22% 밖에 늘지 않는다.

웹피의 장점과 단점을 알아보겠습니다.

장점:

- 작아진 사이즈

- 발전된 압축 알고리즘

- 더 부드러운 컬러 그라데이션

- 알파 채널 마스크

단점:

- 지원하는 브라우저가 많지 않다.

- 낮은 퀄리티에서는 플라스틱과 같은 각진 외형을 만든다.

- 빈약한 익스포팅 인터페이스

이미지 퀄리티

웹피는 새로운 압축 알고리즘을 사용하기 때문에 인공변형이 다른 파일 타입과 달라보입니다. 웹피는 사진의 부서지는 외곽처리는 잘 하는 편이지만, 손실 압축 파일에서는 당연히 디테일한 부분과 텍스처에서 손실이 있습니다. JPEG와 비교해보면, 퀄리티를 많이 낮추자 사람 얼굴에 각이 지면서 플라스틱 같은 외형이 보이기 시작합니다. 

웹피 이미지 포맷에서는 생각해야 할 점이 몇 가지 있습니다. 우선 압축 세팅이 JPEG와 일대일로 맞지 않습니다. JPEG의 50% 퀄리티와 웹피의 50% 퀄리티는 일치하지 않다는거죠. 웹피에서는 퀄리티를 낮출수록 급격히 부서지기 시작합니다. 고퀄리티부터 서서히 내려보면서 자신에게 맞는 퀄리티를 찾아야 합니다. 

다른 하나는 PNG와 같은 알파 채널 마스크 추가 기능 입니다. 웹피로 동일한 PNG 퀄리티에 1/10 수준 사이즈의 파일을 사용할 수 있습니다. 바로 이 점이 웹피를 사용해야 하는 이유이죠. 실제로 880KB PNG (24-bit 알파 채널)을 압축하면 41KB까지 떨어집니다. 95%가 절약된 셈이죠. 

여기서 파일 사이즈를 더 줄이려면 이미지 에디터 안에 “SAVE“ 다이얼로그 안에 “SAVE Metadata“ 를 체크하지 않고 메타데이터를 무시하면 됩니다. 여기서 한번 더 파일 사이즈를 줄이려면 “lossy alpha channel“ 를 선택합니다. 이건 50% 퀄리티 이미지는 50% 퀄리티의 손실 알파 채널을 가지게 된다는 말입니다. 아래 사진으로 비교해 보세요.

웹피를 지원하는 포토샵 플러그인도 있습니다. 이 플러그인으로 웹피 이미지를 보다 손쉽게 조절해서 만들 수 있습니다. 

하지만 가장 이상적인 포맷이란 없습니다. 상황에 따라서는 JPEG나 8-bit PNG가 사이즈에서나 퀄리티에서나 웹피보다 더 나을 때도 있습니다. 그러니 사용하는 이미지가 어디에 어떻게 들어갈지에 따라 포맷을 정해야겠습니다.

원문: Guide to using webP images today: a case study

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.