아티클

구글에서 개발된 이미지 포멧 WebP

2013-02-19 18:47:03

오늘은 많이 알려지지 않은 webp라는 이미지 포멧에 대해 알아보려고 합니다. webp라는 포멧은 구글에서 이미지 손실을 최소화 하면서 사이즈를 줄여 다운로드의 시간을 아끼기 위해 만든 이미지 포맷으로서 이미지의 무손실과 손실 압축(lossless and lossy compression)을 제공하고 있습니다. 무손실 이미지의 경우 같은 화질의 png포멧과 비교했을 때 26% 사이즈가 감소되고 손실 이미지의 경우는 동일한 SSIM index(두 이미지의 비슷한 정도를 비교하는 방법) JEPG이미지와 비교했을 때 25%-34%가 감소된다고 합니다.

 

또한 알파 체널이라고 알려진 무손실 투명도를 적은량의 바이트 추가로 생성할 수 있습니다.       

 

현재 webp 포멧은 구글 크롬, 오페라 11.10 이상과 안드로이드 Android Ice Cream Sandwich에서 서포트 되며 IE에서도 구글 크롬 프레임을 사용하여 서포트

될 수 있습니다. 다음의 이미지는 webp를 포함한 웹 페이지가 ie >7 에서 구글 프레임 설치 전과 후에서 어떻게 보여지는 지 나타내고 있습니다 

 


 

 

그럼 실제로 간단한 툴을 이용해서 몇 개의 이미지를 변환시켜 보고 변환했을 때 얼마만큼의 사이즈의 차이가 있고 또 실제로 보여지는 이미지의 화질의 차이는 어떤지 살펴 보겠습니다.

 

일단 사진의 포맷을 webp로 변환하기 위해 cwebp.exe라는 command line 툴을 다운받고 jpg포맷과 png포맷을 각각 손실, 무손실 압축으로 변환한 후의 사이즈 변화를 살펴 보았습니다.

결과를 먼저 살펴보면 png의 경우 무손실 압축을 이용해 webp로 변환시켰을 경우 678KB에서 475KB 30%정도의 바이트 사이즈가 줄었으며 손실 압축을 이용해 변환시켰을 경우에는 90%이상의 사이즈를 줄일 수 있었습니다. Jpg 포맷의 경우 909KB의 이미지가 무손실 압축으로는 773KB의 이미지로 변환했으며 손실 압축으로는 155KB의 이미지로 변환하여 각각 15%, 83%의 바이트 사이즈를 줄일 수 있었습니다.

 

1. PNG

 

Command:  cwebp outspring.png –q 80 –o outspring.webp  (lossy compression with 80% of the quality


 

Command: cwebp outspring.png -lossless –o outspring.webp  (lossless compression)


 


 

2. JPG

 

같은 방법방법으로 jpg의 포맷도 변환 시켜 보았습니다 

 


 

 

이미지가 웹 페이지를 차지하는 비율이 높은 만큼 이미지를 최적화 하는 것은 웹 성능강화에 중요한 요소입니다. 위에서 본 것과 같이 이미지 사이즈를 화질의 변화 없이 30%이상 줄일 수 있다면 웹 성능 면에서도 탁월한 변화를 줄 수 있을 것 입니다. 크로스 브라우징의 이슈가 있지만 앞서 말한 것과 같이 크롬 프래임과 같이 간단한 plugin을 이용하거나 weppy.js와 같은 javascript를 이용하여 해결될 수 있기 때문에 비즈니스의 특성과사용자들의 행동 패턴을 연구한 후 webp의 도입이 웹 성능을 강화시키고 사용자와 매출을 늘리는 데에 긍정적으로 쓰일 수 있는지 검토해 볼 수도 있겠습니다


webp에 대한 더 자세한 내용은 구글 개발자 사이트에서 찾아 보실수 있습니다. 

댓글 0
댓글을 작성하려면 해주세요.