구글에서 만든 이미지 포맷, 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)

mov.webp

단점

• 브라우저 지원률 미비
• 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