WebP 이미지 사용

Katie Hempenius
Katie Hempenius
X

Shorts가 중요한 이유

WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 일반적으로 파일 크기가 25~35% 줄어듭니다. 이렇게 하면 페이지 크기가 줄어들고 성능이 향상됩니다.

  • YouTube에서 WebP 썸네일로 전환하면 10% 더 빠른 페이지 로드가 발생한다는 사실을 확인했습니다.
  • Facebook은 WebP를 사용하도록 전환했을 때 JPEG의 경우 25~35%, PNG의 경우 80% 의 파일 크기를 절감하는 경험을 했습니다.

WebP는 JPEG, PNG, GIF 이미지를 대체합니다. 또한 WebP는 무손실 압축과 손실(lossy) 압축을 모두 제공합니다. 무손실 압축에서는 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질이 저하될 수 있습니다.

WebP로 이미지 변환

사람들은 일반적으로 cwebp 명령줄 도구 또는 Imagemin WebP 플러그인 (npm 패키지)과 같은 접근 방식 중 하나를 사용하여 이미지를 WebP로 변환합니다. 일반적으로 프로젝트에서 빌드 스크립트 또는 빌드 도구 (예: Webpack 또는 Gulp)를 사용하는 경우 Imagemin WebP 플러그인이 가장 적합한 반면, 간단한 프로젝트 또는 이미지를 한 번만 변환해야 하는 경우에는 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만 노드 스크립트로 사용할 수 있습니다. 이 스크립트는 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를 제공하고 이전 브라우저에 대체 이미지를 제공합니다.

이전: html <img src="flower.jpg" alt="">

이후: html <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> 태그와 1개의 <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]

이 방법을 사용하는 경우 이미지가 다양한 콘텐츠 유형으로 제공될 수 있음을 캐시에서 인식할 수 있도록 HTTP Vary 응답 헤더를 설정해야 합니다.

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </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에서 제공되지 않는 이미지를 모두 나열합니다.