명령줄로 WebP 이미지 만들기

Katie Hempenius
Katie Hempenius
X

웹프 명령줄 도구 이(가) 이미 설치되었으므로 이제 시작할 수 있습니다. 이 도구 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. 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면전체 화면을 누릅니다.
  2. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. Lighthouse 탭을 클릭합니다.
  4. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  5. 보고서 생성 버튼을 클릭합니다.
  6. 차세대 형식으로 이미지 제공 감사를 통과했는지 확인합니다.

&#39;차세대 형식으로 이미지 제공&#39; 전달 Lighthouse의 감사

완료되었습니다. 이제 사이트에서 WebP 이미지를 게재하고 있습니다.