JPG vs PNG vs WebP: 어떤 이미지 포맷을 써야 할까요?

세 포맷 한눈에 비교

각 포맷은 서로 다른 용도로 설계되었으며, 차이는 결국 픽셀을 압축하는 방식과 추가로 지원하는 기능에서 나옵니다.

손실 vs 무손실: 결정적인 차이

손실 압축(JPG, 손실 WebP)은 눈이 알아채기 어려운 디테일을 버립니다. 색이 서서히 변하는 사진에서는 잘 동작하지만 날카로운 경계는 뭉개집니다. JPG 속 텍스트와 가는 선 주변에는 링잉(ringing) 또는 모스키토 노이즈라 부르는 희미한 번짐이 생기고, 품질이 낮으면 8×8 픽셀 블록이 보이기도 합니다.

무손실 압축(PNG, 무손실 WebP)은 모든 픽셀을 정확히 저장합니다. 단색 영역이 넓은 이미지를 아주 잘 줄이기 때문에 스크린샷은 JPG보다 PNG가 더 작을 수 있습니다. 반면 사진을 PNG로 저장하면 눈에 보이는 이점 없이 잘 만든 JPG보다 3–5배 커지는 경우가 많습니다.

• JPG는 편집 후 다시 저장할 때마다 재압축되어 디테일을 조금씩 더 잃습니다. 반복해서 편집할 예정이라면 무손실 원본을 보관하세요.
• JPG를 PNG로 변환해도 잃은 디테일은 돌아오지 않습니다. 이미 압축된 픽셀을 더 큰 파일에 추가 손실 없이 담을 뿐입니다.
• JPG 품질 80–90% 정도가 크기와 눈에 띄는 아티팩트 사이의 흔한 절충점입니다.

WebP는 얼마나 작을까?

Google의 WebP 압축 연구는 구조적 유사도(SSIM)가 같은 조건에서 파일을 비교했습니다. 손실 WebP는 JPG보다 25–34% 작았고, 무손실 WebP는 PNG보다 약 26% 작다고 Google은 밝혔습니다. 실제 절감 폭은 이미지, 인코더, 품질 설정에 따라 달라집니다.

예를 들어 JPG로 400 KB인 메인 사진은 비슷한 화질의 손실 WebP로 저장하면 보통 265–300 KB 정도가 됩니다. 이미지가 20장인 페이지라면 이 차이로 모바일 환경의 로딩 시간이 짧아집니다.

AVIF는 어디에 쓰일까

AVIF는 AV1로 압축한 이미지를 HEIF 계열 컨테이너에 담는 비교적 새로운 포맷입니다. 사진의 경우 대개 WebP보다 파일이 작고, 10·12비트 색과 HDR, 투명도를 지원합니다. Chrome은 85 버전, Firefox는 93 버전, Safari는 16 버전에서 지원을 추가했습니다.

단점은 인코딩이 느리고, 오래된 데스크톱 소프트웨어 지원이 약하며, 품질을 아주 낮추면 미세한 질감이 사라지기도 한다는 점입니다. 많은 사이트가 HTML <picture> 요소를 이용해 AVIF를 먼저, WebP를 그다음, JPG를 대체용으로 제공합니다.

빠른 선택 가이드

양식이 WebP를 거부하면 사진은 JPG로, 그래픽은 PNG로 사본을 변환하세요. 손실 파일을 무손실 포맷으로 바꿔도 호환성 외에는 얻는 것이 없습니다.