개발인생/etc

WebP 이미지, 왜 필요할까? JPG, PNG와 비교해보자

forri 2025. 3. 2. 00:37

 

WebP(.webp)는 구글에서 개발한 차세대 이미지 형식으로, JPG나 PNG보다 높은 압축률을 유지하면서도 품질 저하가 적다. 특히 웹사이트에서 많이 사용되는데 이유를 알아보자. 참고로 WebP는 '웹피'라고 발음한다🫡

 

🔹 WebP의 특징

  1. 파일 크기가 작다
    • 같은 품질의 JPG나 PNG보다 25~34% 정도 더 작은 용량을 가짐.
    • 웹페이지 로딩 속도를 빠르게 하는 데 유리함.
  2. 투명한 배경을 지원 (PNG처럼)
    • PNG처럼 투명도를 유지할 수 있음.
  3. 애니메이션 지원 (GIF 대체 가능)
    • GIF보다 더 가볍고 부드러운 애니메이션을 만들 수 있음.
  4. 손실/무손실 압축 지원
    • JPG처럼 손실 압축 가능 (파일 크기를 줄이지만, 약간의 품질 손실 발생)
    • PNG처럼 무손실 압축도 가능 (품질 유지하면서 파일 크기를 줄임)

 

🔹 WebP가 사용되는 곳

  • 구글 크롬, 파이어폭스, 엣지 같은 대부분의 최신 브라우저에서 지원
  • 웹사이트에서 빠른 로딩을 위해 사용됨 (예: 유튜브 썸네일, 구글 플레이스토어 이미지)
  • 웹 개발자가 사이트 최적화를 위해 JPG/PNG 대신 사용

 

🔹 WebP 파일 변환 방법

📌 WebP → JPG/PNG로 변환

  • Paint (윈도우 기본 앱) → 파일 열고 "다른 이름으로 저장"하면 JPG/PNG 선택 가능
  • 온라인 변환 사이트 (https://convertio.co/kr/webp-jpg/ 같은 사이트 활용)
  • 포토샵 (최신 버전에서 지원, 안되면 플러그인 필요)

📌 JPG/PNG → WebP로 변환

  • 구글 크롬에서 개발자 도구(F12) 활용하여 웹P로 저장 가능
  • 이미지 압축 사이트(https://squoosh.app/ 같은 사이트)에서 변환 가능
  • 포토샵, GIMP 같은 프로그램에서 WebP로 저장 가능

 

👉요약하자면 WebP는 웹에서 더 빠르게 로딩되고 용량이 적은 차세대 이미지 포맷으로 웹사이트 최적화에 유리함

 

 

[Spring Boot] Webp로 이미지 파일 최적화하기📉

📌개요 안녕하세요, 동재입니다.😄 이번 프로젝트에서 사진 파일 관리를 담당하게 되면서 몇 가지 문제가 발생했습니다. 이를 해결하기 위해 다양한 방법을 찾아보다가, 해결책으로 Webp를 도

velog.io


 

나중에 프로젝트에서 사진 파일 관리 담당할때 써보도록 하자.