WebP 사용하기

November 25, 2022

thumbnail_webP

용량도 적고 전송속도도 빠른 webP 를 적용하는 방법을 공유합니다

webP 란?

구글이 웹페이지 로딩 속도를 높이기 위해 개발한 이미지 포맷이다. 이미지 품질은 유지하되 파일크기를 더 작게 만들 수 있는 무손실 압축 확장자이다.

어떻게 품질 손상 없이 파일크기를 더 작게 만들 수 있나? WebP 는 무손실 압축과 손실 압축 둘 다 지원하는데, 무손실 압축의 경우 구글이 독자적으로 개발한 방법을 사용해 방식을 찾기가 힘들다.

브라우저 호환성

2022.11.25 기준 Can I use

Chrome, Edge, Safari, Firefox, Opera 등 대부분 모던 브라우저에서는 지원이 된다.

다만 역시 IE 에서는 지원이 안되므로, 대체 png 나 jpg 파일을 준비해야 한다.

사용방법

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

webP 지원 브라우저가 아닌경우 대체 이미지를 제공한다.

apple logo icon 을 사용할 때 webP 를 사용해보았다.

<picture>
   <source type="image/webp" srcSet="/images/ic_apple.webp" />
   <img src="/images/ic_apple.png" alt="apple logo"></img>
</picture>

webP 가 잘 적용되었는 지 확인하고 싶다. lighthouse 에서 확인할 수 있지만 localhost 에서 개발할 때는 lighthouse 에서 확인할 수 없어서 networktap 에서 확인하였다.

ic_apple.webp 가 잘 불리고, ic_apple.png 가 안 불리는 것을 확인했다.

webP source tag 를 주석처리하고 다시 돌려보니, 이번엔 png 만 불려온다.

<picture>
   {/* <source type="image/webp" srcSet="/images/ic_apple.webp" /> */}
  <img src="/images/ic_apple.png" alt="apple logo"></img>
</picture>

Reference

https://web.dev/serve-images-webp/