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 가 무엇인지, 그리고 어떻게 변환할 수 있는지에 대해 알아보았습니다. 블로그에 이미지 업로드할 때 포맷의 특성을 잘 이해하셔서 적절한 이미지 포맷을 사용하시면 될 것 같습니다.
'개발' 카테고리의 다른 글
[논문 리뷰][Architecture] Foundations for the Study of Software Architecture (46) | 2024.03.12 |
---|---|
[Architecture] Architectural Style 이란? (2) | 2024.03.11 |
[Pandas] Dataframe 중복 데이터 찾기, 제거하기 (0) | 2023.10.26 |
[Pandas] 아파트 매매 실거래가 (0) | 2023.10.20 |
[Pandas] 법정동코드 조회하기 (0) | 2023.10.14 |