JPG에서 WebP 이미지로 전환

이전 글에 이어지는 2번째 웹페이지 성능 이슈를 처리한 방법입니다.

Serve Images in next-gen formats 항목이 나와서 내용을 보니 PNG 또는 JPG를 WebP로 바꾸라는 메시지였습니다. AVIF는 또 뭔 이미지 포맷인가요. 😅

살펴보니 이미지 용량을 15~40% 정도 줄여주는 것으로 보였습니다.

이슈 이미지 목록

 

WebP는 구글에서 미는 이미지라 Safafi 지원이 안되는 것으로 알고 있었는데, 16.0 버전부터 지원이 되네요. 2022/09 월 이후 업데이트한 사파리는 가능할 것으로 보입니다. 뭐, 전 세계의 점유율이 1.34%라고 하고, 또 맥에서도 크롬브라우저 사용이 좋은 편이니, 모두 WebP 로 바꾸지 않을 이유가 없습니다. 1.34%를 위해서 빠른 로딩과 네트워크 비용절약을 포기할 수는 없으니까요.
https://caniuse.com/webp 

caniuse webp

작업을 위해서 webp를 커맨드라인으로 설치하니, cwebp 커맨드라인이 추가되었습니다.

https://www.google.com/search?q=webp+command+line 

🔎 webp command line: Google 검색

 

그리고 이미지 폴더를 바꾸니 이렇게 변환된 파일들이 생성이 되었습니다. 제가 커스터마이징한 shell 파일은 이 링크에서 볼 수 있습니다.

Converted WebP images

오늘 네트워크가 좋아서 그런지 성능 잘 나오네요.

After:

after WebP transfer

Yesterday:

Yesterday

기술이 발전하는 것을 몸소 느끼는 중입니다. 물론 우여곡절도 많았었습니다. TL;DR

♻️ all images to webp · Issue #78 · kenu/okdevtv

 

🆗 오늘은 여기까지입니다. 제 유튜브 채널도 구독, 좋아요, 알람 부탁합니다.