왜 관심을 가져야 할까요?
WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 보통 파일 크기 25–35% 감소율입니다. 이렇게 하면 페이지 크기가 줄어들고 성능을 향상시키는 데 도움이 됩니다.
- YouTube의 조사 결과 WebP 썸네일로 전환하면 동영상의 10% 페이지 로드 속도 개선
- Facebook 경험한 사용자 JPEG의 경우 25-35% 의 파일 크기가 절약되고 PNG의 경우 80% 의 파일 크기가 WebP를 사용하도록 전환했습니다.
WebP는 JPEG, PNG, GIF 이미지를 완벽하게 대체합니다. 또한 WebP는 무손실 압축과 손실이 있는 압축을 모두 제공합니다. 무손실 압축 시 데이터 없음 확인할 수 있습니다 손실(lossy) 압축은 파일 크기를 줄이지만 이미지 품질 저하
WebP로 이미지 변환
사용자는 일반적으로 다음 방법 중 하나를 사용하여 이미지를 변환합니다. WebP에: cwebp 명령줄 도구 또는 Imagemin WebP 플러그인 (npm) 패키지). Imagemin WebP 플러그인은 프로젝트에서 빌드를 사용하는 경우 일반적으로 가장 좋은 선택입니다. 또는 빌드 도구 (예: Webpack 또는 Gulp)를 지원하지만 CLI가 적합합니다. : 이미지를 한 번만 변환해야 하는 경우에 적합합니다.
WebP로 이미지를 변환할 때 다양한 종류의 이미지를 설정할 수 있는 압축 설정이지만 대부분의 사람들에게 필요한 것은 품질 설정입니다. 품질 수준을 0부터 지정할 수 있습니다. 100(최상)부터 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/etc.). 이렇게 하려면 일반적으로 파일에 최대 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를 최신 브라우저에 제공하고 이전 브라우저에 대체 이미지를 제공합니다.
변경 전:
<ph type="x-smartling-placeholder">html
<img src="flower.jpg" alt=""></ph>
변경 후:
<ph type="x-smartling-placeholder">html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture></ph>
이
<picture>님,
<source>,
및 <img> 태그(태그 간의 순서 지정 방법 포함), 모두
이러한 최종 결과를 달성하기 위해
상호작용할 수 있어야 합니다
<picture>
<picture> 태그는 0개 이상의 <source> 태그와 1개의 <img> 태그를 위한 래퍼를 제공합니다.
<source>
<source> 태그는 미디어 리소스를 지정합니다.
브라우저는 지원하는 형식으로 된 첫 번째로 나열된 소스를 사용합니다. 브라우저가 <source> 태그에 나열된 형식을 지원하지 않는 경우 <img> 태그로 지정된 이미지를 로드하는 방식으로 대체됩니다.
<img>
<img> 태그를 사용하면 브라우저에서 이 코드가 작동합니다.
(<picture> 태그를 지원하지 않는 페이지)
브라우저에서 <picture> 태그를 지원하지 않으면
지원하지 않는 태그는 무시하세요. 따라서 Kubernetes는
<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 > 옵션 > Performance(실적))를 확인하고 Serve images in next-gen(차세대 이미지 제공)' 결과를 찾습니다. 형식 감사를 참조하세요. Lighthouse는 WebP를 사용합니다.