WebP — dduniverse

WebP는 2010년 구글(Google)이 만든 이미지 파일 포맷으로, 기존 이미지 포맷(JPEG, PNG, GIF 등)과 비교해 용량은 작고, 화질이 좋은 것이 가장 큰 특징이다.

WebP는 크게 4가지 특징이 있다.

파일 용량이 작다
- JPG보다 평균 30% 더 작음
- PNG보다 26% 더 작은 용량
손실/무손실 압축 모두 지원
- 손실 압축: JPG처럼 용량 축소
- 무손실 압축: PNG처럼 원본 유지
- WebP는 두 가지 모두 지원하므로 상황에 맞게 선택 가능
투명도(알파 채널) 지원
- PNG처럼 배경 투명 이미지 가능
- 로고, 아이콘에 적합
애니메이션 지원
- GIF 대체 가능
- GIF보다 용량이 작고, 색상 품질이 좋음

손실 압축: 사람이 눈치채지 못하는 세부 정보를 버리는 방식

무손실 압축: 원본 데이터를 훼손하지 않고 중복되는 기록을 줄이는 방식

대부분의 최신 브라우저(Chrome, FireFox, Edge, Opera, Safari)에서 WebP를 지원한다.

다만, 일부 구형 브라우저(Internet Explorer) 및 오래된 소프트웨어에서는 WebP 지원이 되지 않으므로 <picture> 태그로 Fallback 이미지 제공이 필요하다.

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

브라우저는 지원 가능한 첫 번째 포맷을 자동으로 선택하므로 개발자가 별도의 분기 처리를 할 필요가 없다.

WebP는 뛰어난 성능과 효율성을 제공하지만, 모든 이미지를 WebP로 교체하는 것이 항상 최적의 선택은 아니기 때문에 부분적으로 적용하는 것이 좋다.

프론트엔드 성능 최적화에서 이미지가 차지하는 비중은 매우 크다.

특히 LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정하는 지표인데, 대부분의 웹사이트에서는 대표 이미지(Hero Image)나 배너 이미지가 LCP 요소가 된다.

이런 이미지를 WebP로 변환하면 다운로드 용량 감소 및 페이지 렌더링 속도 향상에서 이점이 있으며, 결과적으로 Lighthouse 성능 점수 개선에 도움이 된다.

그렇지 않다.

이미지 파일은 확장자와 실제 내용으로 구성된다.

image.jpg  →  image.webp  (이름만 변경)

이렇게 파일 이름만 .webp로 변경하면,

브라우저는 .webp 파일로 판단해 WebP 디코더로 해석을 시도하지만 실제 대용은 JPEG이므로 디코딩에 실패한다.

결과적으로, 이미지가 표시되지 않거나 콘솔에 Failed to decode image와 같은 에러가 발생한다.

이미지를 WebP 포멧으로 재인코딩 해야 한다.

변환 과정은 다음과 같다.

구글에서 제공하는 cwebp 도구를 사용하면 쉽게 변환할 수 있다.

cwebp input.jpg -q 80 -o output.webp

여러 장의 이미지를 한 번에 변환하는 것도 가능하다.

for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

참고

티스토리툴바