구글에서 만든 이미지 포맷, webP
개요
webp는 구글에서 발표한 새로운 웹전용 이미지 포맷이다. 기존의 다른 포맷들 보다 더 작게 압축이 가능한 장점이 있다. (동급 퀄리티 대비 png는 26%, jpeg는 34% 까지 감소!) 구글 공식 홈페이지
비디오 포맷인 VP8에서 파생되었으며 동영상 사이즈를 줄이는 webM 프로젝트가 webP까지 확장된 사례다.
비교
1. PNG (964kb)
2. JPG (459kb) 53% 감소
3. webP (49kb) 95% 감소!
euno.webp
webP의 경우 원본을 75% 퀄리티로 압축 제작하였으나, 육안으로 구분 힘든 높은 퀄리티를 보여주었다.
용량은 무려 95% 감소!! 놀랍지 않은가?
제작방법
그렇다면 이 webP 파일은 어떻게 제작할 수 있을까? 아쉽게도 포토샵등 그래픽 소프트웨어에서 아직 지원되지 않는다..였는데 포토샵용 플러그인이 나온듯?
이미 제작된 이미지의 경우 구글에서 제공하는 유틸리티로 쉽게 변환 가능하다. 다운로드
- 유틸리티와 소스코드, 코덱등을 다운로드할 수 있음
- Precompiled WebP utilities and library > Download for Windows || Mac OS X
- bin 폴더 내부에 cwebp.exe(인코딩툴), dwebp.exe(디코딩툴)이 포함되어 있음
- 터미널로 명령어와 옵션을 입력해준다.
cwebp - compress an image file to a WebP file
입력형태
cwebp [options] input_file -o output_file.webp
주요 옵션
-o : 파일명
-q : 압축비율 0~100
-alpha_q : 알파값 설정 0~100
-size : 대상용량 설정 (byte)
-s width height : 이미지 가로세로 크기 설정
-lossless : 무손실압축
Example
cwebp -q 50 -lossless picture.png -o picture_lossless.webp
cwebp -q 70 picture_with_alpha.png -o picture_with_alpha.webp
cwebp -sns 70 -f 50 -strong -af -size 60000 picture.png -o picture.webp
더 많은 옵션을 보시려면.. (https://developers.google.com/speed/webp/docs/cwebp)
장단점
장점
- 손실/무손실 압축 지원 (lossless and lossy compression)
- 투명 지원 (alpha channel)
- 색상정보, 메타데이터
- 무료 / 오픈소스
- 애니메이션 지원
GIF (870kb)
WebP (372kb)
단점
- 브라우저 지원률 미비
- PC : 크롬, 오페라
- 모바일 : 안드로이드 기본 브라우저, 크롬
- 크롬프레임 플러그인 이용 시 ie7 이후 버전에서 확인 가능
- 브라우저 지원현황 - http://caniuse.com/webp
- 파일 변환 시 JPEG 대비 8배 시간 소요
- 포토샵등 주요 디자인툴에서 지원도 미비함
정리
이미지의 용량을 효율적으로 줄일 수 있다면 네트워크 비용을 줄일 수 있다.(구글에 따르면 웹상 트래픽의 65% 이상을 이미지가 차지한다고 함)
WebP는 이러한 용량 이슈를 해결하는 차세대 웹 이미지 포맷이다.
비록 브라우저 지원률은 미비하나, 크로스브라우징 이슈가 해결된다면 성능 및 속도면에서 향상된 PC와 모바일웹을 기대할 수 있을것이다.
참고사이트
https://developers.google.com/speed/webp/
http://blog.teamtreehouse.com/getting-started-webp-image-format
http://www.iamday.net/apps/article/talk/1653/view.iamday