웹사이트에서 수많은 이미지를 표시해야 하는 경우에는 압축 효율이 뛰어난 WebP 형식을 사용하는 것이 좋습니다. WebP는 JPEG나 PNG보다 같은 화질에서 파일 크기를 훨씬 줄일 수 있어, 페이지 로딩 속도 개선과 트래픽 절약에 큰 도움이 됩니다.
다만 일부 브라우저는 WebP를 지원하지 않기 때문에, 이런 브라우저를 위한 대체(fallback) 처리가 필요합니다. 이때 HTML의 <picture> 요소를 활용하면 간단하게 해결할 수 있습니다.
<picture> 요소의 기본 구조
<picture>
<source srcset="filename.webp" type="image/webp">
<source srcset="filename.jpg" type="image/jpeg">
<img src="filename.jpg" alt="대체 이미지">
</picture>브라우저는 <source> 태그에 나열된 형식 중 자신이 지원하는 첫 번째 이미지를 선택하여 표시합니다. 즉, WebP를 지원하는 최신 브라우저는 .webp 파일을 로드하고, 지원하지 않는 브라우저는 자동으로 .jpg 파일로 대체됩니다. 마지막의 <img> 태그는 <picture> 자체를 인식하지 못하는 매우 오래된 브라우저를 위한 최종 대체 수단 역할을 합니다.
예제 1: 기본적인 WebP 대체 처리
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="sky.webp">
<img src="sky.jpg" alt="하늘 이미지">
</picture>
</body>
</html>실행 결과
WebP를 지원하는 브라우저에서는 sky.webp 이미지가, 지원하지 않는 브라우저에서는 sky.jpg 이미지가 화면에 표시됩니다.
예제 2: type 속성을 명시한 대체 처리
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
}
</style>
</head>
<body>
<picture>
<source srcset="tree.webp" type="image/webp">
<source srcset="tree.jpg" type="image/jpeg">
<img src="tree.jpg" alt="나무 이미지">
</picture>
</body>
</html>실행 결과
type 속성으로 MIME 타입을 명확히 지정하면, 브라우저가 실제로 파일을 다운로드하기 전에 해당 형식의 지원 여부를 판단할 수 있어 불필요한 네트워크 요청을 줄이고 더욱 효율적으로 동작합니다.
정리
<picture> 요소와 <source> 태그를 조합하면 WebP의 뛰어난 압축 성능을 누리면서도, 다양한 브라우저 환경에서 이미지가 정상적으로 표시되도록 보장할 수 있습니다. 웹 성능 최적화를 위해 WebP 도입을 고려하고 있다면 반드시 함께 적용해야 할 필수 패턴입니다.