명령줄로 WebP 이미지 만들기

케이티 헴페니우스
Katie Hempenius
X

webp 명령줄 도구가 이미 설치되어 있으므로 바로 시작할 수 있습니다. 이 도구는 JPG, PNG, TIFF 이미지를 WebP로 변환합니다.

WebP로 이미지 변환

  1. 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  2. 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수 있음).
  3. 다음 명령어를 입력합니다.
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

이 명령어는 50 품질 (0이 최악, 100이 최고임)으로 images/flower1.jpg 파일을 변환하여 images/flower1.webp로 저장합니다.

그러면 콘솔에 다음과 같이 표시됩니다.

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

이미지를 WebP로 성공적으로 변환했습니다.

그러나 이와 같이 cwebp 명령어를 한 번에 한 이미지씩 실행하면 많은 이미지를 변환하는 데 시간이 오래 걸립니다. 이렇게 해야 하는 경우 대신 스크립트를 사용할 수 있습니다.

  • 콘솔에서 다음 스크립트를 실행합니다. 백틱을 잊지 마세요.
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

이 스크립트는 50 품질로 images/ 디렉터리의 모든 파일을 변환한 후 동일한 디렉터리에 새 파일 (파일 이름은 동일하지만 확장자가 .webp임)으로 저장합니다.

✔︎ 체크인

이제 images/ 디렉터리에 파일이 6개 있습니다.

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

다음으로 이 Glitch를 업데이트하여 WebP 이미지를 지원하는 브라우저에 WebP 이미지를 제공합니다.

<picture> 태그를 사용하여 WebP 이미지 추가

<picture> 태그를 사용하면 이전 브라우저 지원을 유지하면서 WebP를 최신 브라우저에 제공할 수 있습니다.

  • index.html에서 <img src="images/flower1.jpg"/>를 다음 HTML로 바꿉니다.
<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
  • 그런 다음 flower2.jpg 및 flower3.png의 <img> 태그를 <picture> 태그로 바꿉니다.

✔︎ 체크인

완료되면 index.html의 <picture> 태그가 다음과 같이 표시됩니다.

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

다음으로 Lighthouse를 사용하여 WebP 이미지를 사이트에 올바르게 구현했는지 확인합니다.

Lighthouse로 WebP 사용량 확인

Lighthouse의 차세대 형식으로 이미지 제공 성능 감사를 사용하면 사이트의 모든 이미지가 WebP와 같은 차세대 형식을 사용하고 있는지 알 수 있습니다.

  1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. Lighthouse 탭을 클릭합니다.
  4. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  5. 보고서 생성 버튼을 클릭합니다.
  6. 차세대 형식으로 이미지 제공 감사를 통과했는지 확인합니다.

Lighthouse에서 &#39;차세대 형식으로 이미지 제공&#39; 감사 통과

완료되었습니다. 이제 사이트에 WebP 이미지를 제공합니다.