본문 바로가기
개발

[파일 변환] JPG 또는 PNG 이미지를 WEBP 로 저장하는 방법

by ▶ Carpe diem ◀ 2024. 1. 21.

JPG 똔느 PNG 이미지를 WebP 포맷으로 변환, 저장하는 방법에 대해 알아보겠습니다.

 

JPG 또는 PNG 이미지를 WEBP 변환, 저장하는 방법

위 방법에 대해 알아보기 앞서 WebP 포맷이 무엇인지? 알아보겠습니다.

 

WebP 포맷이란?

웹 이미지를 더 빠르게 로딩하기 위해 구글이 개발한 이미지 포맷으로, 기존의 JPG, PNG 포맷 보다 더 작은 파일 크기로 비슷한 이미지 품질을 제공할 수 있어 웹 페이지 로딩 속도 향상에 효과적이라고 합니다.

 

요하네스 시폴라(Johannes Siipola)라는 개발자는 "Is WebP really better than JPEG?" 라는 글을 통해 WebP 포맷과 다른 포맷들을 직접 비교한 내용을 공개했습니다.

 

Is WebP really better than JPEG?

If you have used tools like Google’s PageSpeed Insights, you probably have run into a suggestion to use “next-gen image formats”, namely Google’s WebP image format. Google claims that their WebP…

siipo.la


위 내용에 따르면 500px 의 작은 크기의 이미지일 경우 WebP가 JPG 보다 나은 결과를 보여주지만, 1000px 이상 큰 이미지의 경우 WebP의 장점은 사라집니다.

 

블로그에 올리는 사진들의 크기를 생각해보면 WebP 사용에 대한 장점을 있는 것 같습니다. 

핵심 특징

  • Losseless (비손실) 압축: 이미지 데이터 손실 없이 압축하여 원본 품질을 유지할 수 있고, PNG 보다 파일 크기 26% 정도 감소함
  • Lossy (손실) 압축: JPEG 보다 25%~35% 정도 더 작은 파일 크기로 비슷한 품질 제공하고, 이미지 복잡도에 따라 품질 저하 가능성 있음
  • 알파 채널 지원: 투명도 정보 포함 가능하여 PNG 와 동일 기능 제공함
  • 애니메이션 지원: GIF 와 유사하게 여러 이미지 프레임을 결합하여 간단한 애니메이션 표현 가능함

JPG, PNG와 비교

기능 WebP JPG PNG
압축 방식 Lossless/Lossy Lossy Lossless
파일 크기 (작은 이미지 경우) 가장 작음 상대적으로 작음 가장 큼
품질 비슷 / 다소 낮음 다소 낮음 가장 높은
알파 채널 지원 지원하지 않음 지원
애니메이션 지원 지원하지 않음 지원하지 않음

 

 

장점

  • 웹 페이지 로딩 속도 향상: 작은 파일 크기로 빠른 이미지 로딩 가능함
  • 데이터 절약: 이미지 파일 크기 감소로 데이터 사용량 절감 효과
  • 다양한 기능 지원: Losseless/Lossy 압축, 알파 채널, 애니메이션 기능으로 활용도 높음.

 

단점

  • 모든 브라우저 지원하지 않음: 일부 구형 브라우저는 WebP 이미지 표시 어려움.
  • 이미지 품질 감소 가능성: Lossy 압축 시 복잡한 이미지에서 품질 저하 발생할 수 있음.

 

웹 페이지 로딩 속도 향상과 데이터 절약을 위해 블로그 작성시 적극 활용하면 좋을 것 같습니다. 다만 위에서 JPG, PNG 와 비교했던 것처럼 이미지 복잡도와 필요한 품질에 따라 적절한 포맷을 선택하는 것이 좋을 것 같습니다.

  JPG WebP
이미지
사이즈 2268 * 2003 2268 * 2003
파일 크기 744KB (761,993 바이트) 352KB (361,272 바이트)

 

 

다음으로는 Python 을 이용하여 WebP 포맷으로 변환, 저장하는 방법에 대해 알아보겠습니다.

 

WebP 로 변환, 저장

Pillow library 설치

pip install Pillow

 

 

JPG 에서 WebP 로 변환, 저장

from PIL import Image

im = Image.open('hello.jpg').convert('RGB')
im.save('hello.webp', 'webp')

 

위와 같이 Python 을 이용하여 직접 변환할 수도 있지만, 웹으로 제공되는 방법들을 이용해도 좋을 것 같습니다.

https://www.geeksforgeeks.org/jpg-to-webp-converter/

 

JPG to WebP Converter - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

 

 

PNG 에서 WebP 로 변환, 저장

from PIL import Image

im = Image.open('hello.png').convert('RGB')
im.save('hello.webp', 'webp')

 

PNG 에서 WebP 로 변환, 저장하는 것 역시 GeeksforGeeks 에서 제공하고 있습니다.

https://www.geeksforgeeks.org/png-to-webp-converter/?ref=lbp

 

PNG to WebP Converter - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

 

 

오늘은 WebP 가 무엇인지, 그리고 어떻게 변환할 수 있는지에 대해 알아보았습니다. 블로그에 이미지 업로드할 때 포맷의 특성을 잘 이해하셔서 적절한 이미지 포맷을 사용하시면 될 것 같습니다.