WebP 이미지는 더 작은 용량으로 고화질 이미지를 제공하는 차세대 이미지 포맷입니다. 이 글에서는 WebP를 사용해 웹사이트 성능을 최적화하고 사용자 경험을 개선하는 방법을 소개합니다.
WebP 포맷이란?
WebP 이미지는 구글에서 개발한 이미지 파일 형식으로, 손실과 무손실 압축, 알파 채널(투명도), 애니메이션까지 지원합니다. 기존 이미지 포맷인 JPEG, PNG, GIF 대비 파일 크기를 25~34% 줄일 수 있으면서도 동일한 품질을 유지합니다.
WebP의 주요 장점
- 용량 절감: JPEG나 PNG 대비 적은 용량으로 높은 화질 제공.
- 빠른 로딩 속도: 파일 크기가 줄어들어 페이지 로딩 속도 개선.
- 다양한 기능: 투명도와 애니메이션 지원.
- SEO 개선: 더 빠른 로딩 속도는 검색 엔진 최적화에 긍정적인 영향을 미침.
WebP 이미지 포맷 적용 방법
1. 이미지 변환하기
웹 툴 활용
온라인 변환 도구를 사용해 쉽게 이미지를 WebP로 변환할 수 있습니다. 예를 들어:
- Squoosh
- Online-Convert
CLI 도구 활용
구글이 제공하는 libwebp를 설치해 이미지를 변환할 수도 있습니다.
cwebp -q 80 input.jpg -o output.webp
q 80은 품질(0~100)을 설정하는 옵션으로, 80 정도면 높은 품질을 유지하면서도 용량을 크게 줄일 수 있습니다.
2. HTML에서 WebP 사용하기
기본 사용법
HTML에서 WebP를 사용할 때는 다음과 같이 <picture> 태그를 활용합니다.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="예제 이미지"> </picture>
이 코드의 동작 방식:
- 브라우저가 WebP를 지원하면 image.webp를 로드.
- 지원하지 않을 경우 image.jpg를 대신 로드.
3. CSS 배경 이미지로 WebP 적용
CSS에서 WebP를 사용할 때는 미디어 쿼리나 브라우저 감지 도구를 이용합니다.
기본 사용법
.bg {
background-image: url('image.webp');
}
Fallback 설정
WebP를 지원하지 않는 브라우저를 위해 Fallback을 설정합니다.
.bg {
background-image: url('image.jpg');
}
@supports (background-image: url('image.webp')) {
.bg {
background-image: url('image.webp');
}
}
WebP 지원 여부 확인하기
WebP는 대부분의 최신 브라우저에서 지원되지만, 특정 구형 브라우저에서는 지원되지 않을 수 있습니다. 아래와 같은 JavaScript 코드를 사용해 브라우저 지원 여부를 감지할 수 있습니다.
function supportsWebP(callback) {
const webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height === 2);
};
webP.src =
'data:image/webp;base64,UklGRhIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
}
supportsWebP(function (isSupported) {
if (isSupported) {
console.log('WebP 지원');
} else {
console.log('WebP 미지원');
}
});
WebP 포맷의 한계와 대안
1. 한계
- 구형 브라우저: Internet Explorer와 일부 오래된 브라우저는 WebP를 지원하지 않음.
- 변환 시간: 고화질 이미지를 WebP로 변환하는 데 시간이 다소 소요될 수 있음.
2. 대안
WebP를 사용할 수 없는 경우, AVIF 같은 차세대 포맷을 고려할 수 있습니다. AVIF는 WebP보다 더 높은 압축 효율을 제공합니다.
결론
WebP는 웹사이트 최적화를 위한 강력한 도구입니다. 이미지 파일 크기를 줄여 로딩 속도를 높이고, 사용자 경험과 SEO를 모두 개선할 수 있습니다. 그러나 모든 브라우저에서 지원되는 것이 아니기 때문에 적절한 Fallback을 설정하는 것이 중요합니다. 지금 WebP 이미지를 활용해 더 빠르고 효율적인 웹사이트를 만들어 보세요!
