현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기156/376다음 글 보기

추천하기
추천 횟수 :1
조회수
20,739
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

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

UI 개발

오늘은 많이 알려지지 않은 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에 대한 더 자세한 내용은 구글 개발자 사이트에서 찾아 보실수 있습니다. 

댓글보기

전체 댓글
2
로그인
김한솔
쇼핑몰처럼 과도하게 많은 이미지가 사용되는 서비스에 적용된다면 좋겠네요. 무손실과 손실 두 용도로 모두 활용가능하다는게 인상적인데, 모바일에서는 적용해볼만 하겠습니다. 근데 포토샵 같은 그래픽 저작툴에서 아직은 지원하지 않아 아쉽다는..
Insook choe
@김한솔네이티브 지원은 안되고 다소 불편하긴 하지만 플러그 인을 사용해서 Webp 포멧의 이미지를 쓸 수 있는 거 같아요. http://telegraphics.com.au/sw/product/WebPFormat#webpformat 

목록이전 글 보기156/376다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0