By Chrome DevRel

WebP 이미지 사용

— 업데이트됨
Available in: English, Español, Português, Русский, 中文 및 日本語
Appears in: 빠른 로드 시간
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
이 페이지에서

왜 신경을 써야 할까요? #

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

WebP는 JPEG, PNG 및 GIF 이미지를 훌륭하게 대체합니다. 또한 WebP는 무손실 및 손실 압축을 모두 제공합니다. 무손실 압축은 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질을 저하시킬 수 있습니다.

이미지를 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/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를 최신 브라우저에 제공하고 대체 이미지를 이전 브라우저에 제공합니다.

이전:

<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> 태그는 0개 이상의 <source> 태그와 하나의 <img> 태그에 대한 래퍼를 제공합니다.

소스 #

<source> 태그는 미디어 리소스를 지정합니다.

브라우저는 지원하는 형식으로 나열된 첫 번째 소스를 사용합니다. <source> 태그에 나열된 형식을 브라우저가 지원하지 않으면 <img> 태그에 지정된 이미지를 로드하는 것으로 대체됩니다.

이미지 #

<img> 태그는 <picture> 태그를 지원하지 않는 브라우저에서 코드를 작동하게 하는 것입니다. 브라우저가 <picture> 태그를 지원하지 않으면 지원하지 않는 태그를 무시합니다. 따라서 브라우저는 <img src="flower.jpg" alt=""> 태그만 "보고" 해당 이미지를 로드합니다.

WebP 사용 확인 #

Lighthouse는 사이트의 모든 이미지가 WebP를 사용하여 제공되고 있는지 확인하는 데 사용할 수 있습니다. Lighthouse 성능 감사(Lighthouse > 옵션 > 성능)를 실행하고 차세대 형식의 이미지 제공 감사 결과를 찾습니다. Lighthouse는 WebP에서 제공되지 않는 모든 이미지를 나열합니다.

마지막 업데이트: — 기사 개선하기
Return to all articles
공유