이미지를 더 가볍게 더 깔끔하게! webp!!

webp

webp는 Google에서 개발한 현대적인 이미지 포맷

주요 목적은 이미지의 파일 크기를 줄이면서 고품질을 유지하는 것이며, webp 포맷은 특히 웹에서의 빠른 로딩 속도와 데이터 사용량 최소화를 위해 설계되었다.

 

공식 문서 사이트 : https://developers.google.com/speed/webp?hl=ko

웹용 이미지 형식  |  WebP  |  Google for Developers

 

탄생 배경

webp 포맷의 탄생 배경은 웹의 성능 최적화와 깊은 관련이 있다.

웹 페이지 로딩 속도는 사용자 경험에 큰 영향을 미치며, 이미지는 웹 페이지 데이터의 대부분을 차지하는 경우가 많은데, 이러한 이미지의 크기와 로딩 속도를 최적화하는 것은 웹 성능 향상에 매우 중요한 요소로 작용하고 있다.

Google은 이러한 최적화, 웹 성능 향상에 대한 고민을 해결하기 위해 webp를 개발하게 되었다.

webp는 VP8이라는 비디오 코덱을 기반으로 한 이미지 압축 기술을 사용하고 있다. VP8은 Google이 On2 Technologies를 인수한 후 개발한 비디오 코덱이며, webp는 이 코덱을 활용하여 이미지를 효과적으로 압축하고, 손실 및 손실 없는 압축, 투명도, 애니메이션 등의 다양한 기능을 제공하고 있다.

공식 문서에 따르면 webp는 JPEG에 비해 약 25~34% 더 효과적인 압축률을 제공한다고 안내하고 있으며, 이러한 효과적인 압축률은 웹 페이지의 로딩 속도를 개선하고, 네트워크 대역폭 사용량을 줄여 사용자에게 더 나은 웹 경험을 제공할 수 있게 한다.

 

특징

1. 높은 압축 효율: webp는 다른 이미지 포맷들(예: JPEG, PNG)에 비해 작은 파일 크기로 높은 품질의 이미지를 제공하고, 이로 인해 웹 페이지의 로딩 속도가 향상되며 사용자 경험이 개선된다.
2. 손실 및 손실 없음 압축: webp는 손실 압축(lossy compression)과 손실 없음 압축(lossless compression) 둘 다 지원한다.
   • 손실 압축 : 이미지 품질을 소폭 희생하여 파일 크기를 줄이는 방식
   • 손실 없음 압축: 원래의 이미지 품질을 그대로 유지하면서 파일 크기를 줄이는 방식
3. 알파 채널(투명도) 지원: webp는 알파 채널을 통해 투명도를 지원한다. 이는 PNG와 유사한 기능이지만, 일반적으로 더 작은 파일 크기를 가지고 있다.
4. 애니메이션 지원: webp는 여러 프레임의 이미지를 담아 애니메이션을 만들 수 있는데, 이 기능은 GIF와 유사하지만, 훨씬 더 효율적인 압축률과 더 나은 품질을 가진다.
5. 풍부한 메타데이터: webp는 ICC 프로필, EXIF 메타데이터 등과 같은 다양한 정보를 포함할 수 있다.
6. 넓은 지원 범위: 많은 웹 브라우저와 이미지 편집 도구들이 webp를 지원하고 있지만, 아직 지원하지 않는 플랫폼이나 브라우저도 있으므로 호환성을 고려하여 사용하는 것이 좋다.

 

단점

1. 호환성 문제: webp는 많은 최신 브라우저에서 지원되지만, 오래된 브라우저나 일부 플랫폼에서는 지원되지 않을 수 있다. 예를 들어, 지금은 서비스가 종료되었지만 Internet Explorer는 webp를 지원하지 않는다. 따라서 이런 브라우저를 사용하는 사용자를 위해 대체 이미지 형식을 제공해야 할 수도 있다.
2. 편집 및 도구 지원: webp는 점점 인기를 얻고 있지만, 일부 이미지 편집 도구나 소프트웨어에서는 아직 완벽하게 지원되지 않을 수 있다.
3. 압축 시간: webp의 압축 알고리즘이 다른 이미지 포맷보다 복잡할 수 있기 때문에, 동일한 품질의 이미지를 생성하기 위해 더 많은 시간이 소요될 수 있다.
4. 애니메이션의 파일 크기: webp는 GIF보다 효과적인 애니메이션 압축을 제공하지만, 여전히 긴 애니메이션이나 복잡한 애니메이션에 대해서는 큰 파일 크기를 가질 수 있다.
5. 투명도의 복잡성: 투명한 webp 이미지를 만들 때, 손실 없는 모드에서는 알파 채널이 잘 동작하지만, 손실 모드에서는 알파 채널에 노이즈가 추가될 수 있어, 결과물이 예상과 다르게 나올 수 있어 주의해야한다.
6. 주관적 품질: 일부 사용자는 webp의 손실 압축 이미지가 JPEG나 다른 포맷에 비해 낮은 품질을 보이는 것처럼 느낄 수 있는데, 이는 주관적인 평가이며, 특정 상황에서는 webp가 다른 포맷보다 더 나은 결과를 제공할 수 있다.

 

지원 현황

webp 지원 현황

 

Chrome은 2010년부터 webp를 지원하며, 현재 최신 버전에서도 완벽하게 지원하고, Firefox는 65 버전부터 webp를 지원하고 있다.

웹 기술과 브라우저의 지원 현황은 지속적으로 업데이트되기 때문에, 최신 정보는 해당 브라우저의 공식 문서나 "Can I use"와 같은 웹 호환성 확인 사이트를 참조하는 것이 좋다.