구글의 이미지 포멧 Webp 를 소개 합니다..

안녕하세요. 오늘은 아는 사람은 알지만 대부분이 모른다는 이미지 포멧인 webp 를 소개 합니다.

(이미지 포멧이란 ? jpg 나 png 같은 이미지 파일의 형식을 말합니다.)

webp 는 나온지 좀 되었습니다. 제 기억에 2009 년에 처음 발표 했을꺼에요.
간단하게 어떻게 탄생하게 되었나 알아보면… 구글이 youtube 를 운영 하려고 하다보니 뭔기 더 좋은 동영상 포멧이 필요 했습니다.
그래서 On2 라는 회사를 인수한뒤 이 회사에서 개발한 VP8 엔진을 이용하여 webm 이라는 동영상 포멧을 만들고 youtube를 운영 했었죠.

이 webm 의 동생 프로젝트가 webp 입니다. 그래서 webp 는 이미지 이지만 VP8 영상 엔진을 사용하고 있죠.
Jpg 를 대체하기 위해서 만든것이고 jpg 대비 용량의 작게는 10% ~ 70% 이상 줄일수가 있습니다. 동일한 이미지 퀄리티를 유지하고도 말이죠.

요즘은 모바일 시대이다 보니 사람들이 전부 다 스마트폰을 들고 다니죠. 하지만 LTE 요금은 아직 비쌉니다. 따라서 서비스의 대부분을 차지하고
있으며 트래픽 비용을 많이 먹는 이미지 파일의 용량을 줄이는 것이 정말 중요한 숙제 입니다.

특히나 제가 몸담고 있는 e-commerce 에서는 상품을 웹상에서 팔다보니 고객에게 직접 보여줄수 있는 이미지가 정말 중요하죠. 따라서 이미지로 도배
를 할수밖에 없습니다. 그러다 보면 트래픽의 압박과 고객 입장에서는 서비스 로딩도 느리면서 LTE 데이타 용량도 많이 먹기 때문에 서비스를 사용하기
꺼려지죠. 예를들어 전에 제가 일했던 어느 회사에서 CS 가 들어왔는데 앱을 사용한지 일주일도 안되었는데 데이타를 1G나 먹었다고 항의가 들어왔었죠.
그래서 확인해 보니 이미지가 원본 사이즈 그대로 쓰이고 있더군요. (개당 용량이 막 15M 넘음)

아무튼 그래서 저도 찾아 보다가 webp 를 발견했고 제가 지금 일하고 있고 제가 담당하고 있는 부분중에 하나인 파일 업로드 쪽에 적용을 해보았는데
제가 몸담고 있는 조직은 플랫폼 개발이라 고객과의 접점이 없어요… 그래서 팀내에 발표를 했었는데 반응이 그냥 그렇네요. ㅎㅎㅎ ㅜㅜ

뭐 고객과의 접점이 없고 그 부분을 담당하는 조직이 따로 있기 때문에 어쩔수 없죠뭐 이해 합니다.

언젠간 기회가 오겠죠… 아무튼.. 이런 webp 는 기사를 검색하다 보니 facebook 에서 2013년에 cdn 비용을 줄이기 위해 도입 하겠다라고
뉴스에 나온적이 있는데 확인결과 아직 적용을 안했더라구요.

아무튼 jpg 와 동일한 퀄리티에 용량은 3분의1이라니 매력이 넘치지 않습니까? 하지만 커다란 단점이 몇가지 있습니다… ㅜㅜ

1. 일단 브라우저에서 webp 를 지원해야 합니다….

Screen Shot 2016-03-29 at 12.18.51 PM

자 보시죠… 에이 뭐야 라고 생각 하실수도 있는데 역시 구글의 이미지 포멧 답게 크롬과 안드로이드에선 (!) 다 지원합니다!
우리나라의 스마트폰 사용자의 대부분이 안드로이드를 사용하고 있죠? 따라서 충분히 가능성이 있습니다.

2. 이미지 파일을 컨버팅 하는 리소스가 필요하다… 이건 뭐 당연하죠?;;

이정도의 문제점이 있으나 제 개인적인 생각으론 브라우져에서 webp 를 지원하는지 않하는지에 따라 분기를 탄다면 충분히 가능성이 있습니다.
(이미 만들어서 제 깃헙에 올려놨어요. 글 하단에서 공개 합니다.)

그리고 webp 의 인코딩 모듈은 c 로 개발되어있습니다. 따라서 c 모듈을 서버에 설치하고 java 에서 사용하려면 jni 를 쓰셔서 로드를 해야 합니다.

제가 webp 를 테스트를 할수있는 데모를 만들었습니다.

http://webp.leekyoungil.com/

Screen Shot 2016-03-29 at 12.17.12 PM

대략 이런식으로 이미지 파일을 선택하고 업로드를 해보면 webp 로 변환되어 나오며 이미지 퀄리티와 용량을 확인할수 있습니다.
(클릭하면 팝업으로 원본 사이즈로 뜸)
webp의 압축 방식은 Lossy 와 Lossless 방식 2가지가 있습니다. 말그대로 손실과 무손실 방식이며 용량에 차이가 있습니다.

해당 데모의 소스는 github 에 올렸습니다. https://github.com/LeeKyoungIl/webp-java-sample

제 생각에는 e-commerce 에서 사용하면 많은 트래픽 비용을 절약할수 있을꺼 같으니 꼭한번 써보시기를 추천 합니다.

데모 – http://webp.leekyoungil.com/
이미지 출처 – http://caniuse.com/#feat=webp
webp 프로젝트 홈 – https://developers.google.com/speed/webp/

구글의 이미지 포멧 Webp 를 소개 합니다..”에 대한 1개의 생각

  1. 한진기

    안녕하세요, webp기능을 자바로 개발하는 개발자입니다.
    설명과 소스코드 감사히 잘 읽고 잘 활용하고 있습니다.
    다름이 아니고 질문을 드리고자 하여 댓글을 남기게 되었는데요,
    WebpConvertService.java:118에 보면, webp native library를 로드하라고 되어있는데, 이게 잘 안 되어서요.
    이 말이 프로젝트의 build path에서 source부분에서 native library location을 설정하는 건가요?
    올려주신 webapp/WEB-INF/lib의 파일들을 위의 방법으로 하였는데도 되지 않더라구요.

    luciad의 libwebp를 cmake로 컴파일 시킨 걸 프로젝트의 build/src/main/c 밑에 넣고
    위와 같은 방식으로 build path의 source에 native library location을 설정해도 안 되어서
    이렇게 문의드립니다.

    수고하세요~

    응답

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다