왜 관심을 가져야 할까요?
WebP 이미지는 JPEG 및 PNG 이미지보다 크기가 작습니다. 일반적으로 파일 크기가 25~35% 정도 줄어듭니다. 이렇게 하면 페이지 크기가 줄고 성능이 개선됩니다.
- YouTube는 WebP 썸네일로 전환하면 페이지 로드 속도가 10% 빨라진다는 사실을 발견했습니다.
- Facebook은 WebP를 사용하도록 전환한 후 JPEG 파일의 파일 크기가 25~35%, PNG 파일의 파일 크기가 80% 줄었습니다.
WebP는 JPEG, PNG, GIF 이미지를 대체하는 훌륭한 형식입니다. 또한 WebP는 무손실 및 손실(lossy) 압축을 모두 제공합니다. 무손실 압축에서는 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질이 저하될 수 있습니다.
WebP로 이미지 변환
일반적으로 이미지를 WebP로 변환하려면 cwebp 명령줄 도구 또는 Imagemin WebP 플러그인 (npm 패키지) 중 하나를 사용합니다.
Imagemin WebP 플러그인은 일반적으로 프로젝트에서 빌드 스크립트 또는 빌드 도구 (예: Webpack 또는 Gulp)를 사용하는 경우 가장 좋은 선택이지만, CLI는 소규모 프로젝트에 적합하거나 이미지를 한 번만 변환해야 하는 경우에 적합합니다.
이미지를 WebP로 변환할 때는 다양한 압축 설정을 지정할 수 있지만 대부분의 경우 품질 설정만 신경 쓰면 됩니다. 품질 수준은 0(가장 나쁨)에서 100 (가장 좋음) 사이에서 지정할 수 있습니다. 이 값을 조정해 보면서 필요에 따라 이미지 품질과 파일 크기 간에 적절한 균형을 찾는 것이 좋습니다.
cwebp 사용
cwebp의 기본 압축 설정을 사용하여 단일 파일을 변환합니다.
cwebp images/flower.jpg -o images/flower.webp
품질 수준 50를 사용하여 단일 파일을 변환합니다.
cwebp -q 50 images/flower.jpg -o images/flower.webp
디렉터리의 모든 파일을 변환합니다.
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Imagemin 사용
Imagemin WebP 플러그인은 단독으로 사용하거나 좋아하는 빌드 도구(Webpack/Gulp/Grunt 등)와 함께 사용할 수 있습니다. 일반적으로 빌드 스크립트 또는 빌드 도구의 구성 파일에 코드 10줄 정도를 추가하면 됩니다. 다음은 Webpack, Gulp, Grunt에서 이를 실행하는 방법의 예입니다.
이러한 빌드 도구 중 하나를 사용하지 않는 경우 Imagemin을 자체적으로 Node 스크립트로 사용할 수 있습니다. 이 스크립트는 images 디렉터리의 파일을 변환하여 compressed_images 디렉터리에 저장합니다.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
WebP 이미지 제공
사이트에서 WebP 호환 브라우저만 지원하는 경우 읽기를 중단할 수 있습니다. 그렇지 않으면 최신 브라우저에는 WebP를, 이전 브라우저에는 대체 이미지를 제공합니다.
변경 전:
<img src="flower.jpg" alt="">
변경 후:
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>, <source>, <img> 태그는 서로 상대적으로 정렬되는 방식을 비롯하여 모두 상호작용하여 이 최종 결과를 얻습니다.
<picture>
<picture> 태그는 0개 이상의 <source> 태그와 하나의 <img> 태그를 위한 래퍼를 제공합니다.
<source>
<source> 태그는 미디어 리소스를 지정합니다.
브라우저는 지원하는 형식의 첫 번째 소스를 사용합니다. 브라우저가 <source> 태그에 나열된 형식을 지원하지 않으면 <img> 태그로 지정된 이미지를 로드하는 것으로 대체됩니다.
<img>
<img> 태그는 <picture> 태그를 지원하지 않는 브라우저에서 이 코드가 작동하도록 합니다.
브라우저가 <picture> 태그를 지원하지 않으면 지원하지 않는 태그를 무시합니다. 따라서 <img src="flower.jpg" alt=""> 태그만 '보고' 해당 이미지를 로드합니다.
HTTP Accept 헤더 읽기
요청을 재작성할 수 있는 애플리케이션 백엔드 또는 웹 서버가 있는 경우 HTTP Accept 헤더의 값을 읽을 수 있습니다. 이 헤더는 지원되는 대체 이미지 형식을 광고합니다.
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
이 요청 헤더를 읽고 콘텐츠를 기반으로 응답을 다시 작성하면 이미지 마크업을 간소화할 수 있습니다. <picture> 마크업은 소스가 많을 경우 상당히 길어질 수 있습니다. 다음은 WebP 대체 항목을 게재할 수 있는 Apache mod_rewrite 규칙입니다.
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
이 방법을 사용하는 경우 캐시가 Accept 헤더에 따라 이미지가 다르게 제공될 수 있음을 인식할 수 있도록 HTTP Vary 응답 헤더를 설정해야 합니다.
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
이전 재작성 규칙은 요청된 JPEG 또는 PNG 이미지의 WebP 버전을 찾습니다. WebP 대체 항목이 발견되면 적절한 Content-Type 헤더와 함께 제공됩니다. 이렇게 하면 자동 WebP 지원과 함께 다음과 유사한 이미지 마크업을 사용할 수 있습니다.
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP 사용 확인
Lighthouse를 사용하여 사이트의 모든 이미지가 WebP를 사용하여 게재되고 있는지 확인할 수 있습니다. Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 차세대 형식으로 이미지 게재 감사 결과를 확인합니다. Lighthouse는 WebP로 게재되지 않는 이미지를 표시합니다.