Visual Image Utility Suite

JPG vs PNG vs WebP — 상황별로 어떤 이미지 포맷을 써야 할까?

작성: BrowserPics 운영팀 · 2026년 7월 2일 게시

사진을 저장하거나 어딘가에 올릴 때마다 확장자 선택에서 한 번씩 멈추게 됩니다. JPG로 할지, PNG로 할지, 요즘 자주 보이는 WebP는 또 무엇인지. 세 포맷은 이름만 다른 것이 아니라 데이터를 압축하는 방식 자체가 다릅니다. 그래서 같은 사진이라도 어떤 포맷으로 저장하느냐에 따라 용량이 몇 배씩 차이 나고, 반대로 어떤 이미지는 특정 포맷에서 화질이 눈에 띄게 망가집니다. 이 글에서는 세 포맷의 원리 차이를 짚은 뒤, 증명사진 제출부터 인쇄까지 상황별로 무엇을 고르면 되는지 정리합니다.

1. 세 포맷은 애초에 목적이 달랐다

JPG(정확히는 JPEG)는 1992년에 표준화된 포맷으로, 사진처럼 색이 연속적으로 변하는 이미지를 작게 만드는 것이 목표였습니다. 사람 눈이 미세한 색 변화에 둔감하다는 점을 이용해, 눈에 덜 띄는 정보를 버리는 손실 압축을 사용합니다. 한 번 버린 정보는 되돌릴 수 없지만, 그 대가로 파일이 크게 작아집니다.

PNG는 1996년, 특허 문제가 있던 GIF를 대체하려고 만들어졌습니다. 방향이 정반대입니다. 픽셀 정보를 하나도 버리지 않는 무손실 압축이라, 저장을 몇 번 반복해도 원본과 완전히 같습니다. 여기에 픽셀마다 투명도를 지정할 수 있는 알파 채널이 있어서 배경이 뚫린 이미지를 만들 수 있고, 색 수가 적은 이미지는 팔레트 방식(PNG-8)으로 더 작게 저장할 수도 있습니다.

WebP는 2010년 구글이 웹 페이지 로딩 속도를 줄이려고 내놓은 포맷입니다. 비디오 코덱(VP8) 기술을 정지 이미지에 적용한 것으로, 손실 압축과 무손실 압축을 모두 지원하고 알파 채널과 애니메이션까지 하나의 포맷 안에서 처리합니다. 쉽게 말해 JPG와 PNG가 나눠 맡던 역할을 한 포맷으로 합치되, 압축 효율을 한 단계 끌어올린 것입니다.

여기서 손실과 무손실의 차이를 조금 더 짚고 넘어가겠습니다. 무손실 압축은 ZIP 파일과 같은 개념입니다. 데이터를 더 짧게 표현하는 방법을 찾을 뿐, 풀면 원본이 그대로 복원됩니다. 손실 압축은 복원 자체를 포기하는 대신 "사람 눈에 안 보이는 것부터 버리자"는 전략을 씁니다. 이미지를 작은 블록으로 나눠 주파수 성분으로 바꾼 뒤, 눈이 잘 구분하지 못하는 고주파(미세한 질감) 정보를 과감히 깎아내는 식입니다. 어느 쪽이 좋고 나쁘다의 문제가 아니라, 이미지의 성격에 따라 유리한 방식이 달라지는 것이 핵심입니다.

2. JPG의 강점과 함정

실사 사진에서 JPG는 여전히 기본값으로 손색이 없습니다. 하늘, 피부, 풍경처럼 색이 부드럽게 이어지는 영역을 효율적으로 압축하고, 카메라·스마트폰·웹사이트·관공서 시스템까지 받아주지 않는 곳이 거의 없습니다. 호환성만 놓고 보면 세 포맷 중 가장 안전합니다.

함정은 두 가지입니다. 첫째, 글자나 선이 있는 이미지에 약합니다. 손실 압축의 특성상 경계가 뚜렷한 부분 주변에 뭉개짐(아티팩트)이 생겨서, 스크린샷이나 로고를 JPG로 저장하면 글자 주변이 지저분해집니다. 둘째, 세대 손실입니다. JPG를 열어서 편집하고 다시 JPG로 저장하는 과정을 반복하면, 저장할 때마다 압축이 새로 적용되어 화질이 조금씩 계속 나빠집니다. 여러 번 수정할 원본은 JPG가 아닌 무손실 포맷으로 보관하고, JPG 내보내기는 마지막에 한 번만 하는 것이 안전합니다. 투명 배경을 지원하지 않는다는 점도 기억해 두세요.

품질 값도 오해가 잦은 부분입니다. JPG 저장 시 나오는 품질 슬라이더(0~100)는 화질과 용량을 맞바꾸는 조절 장치인데, 100으로 둔다고 무손실이 되는 것은 아닙니다. 반대로 품질을 너무 낮추면 블록 단위로 깨진 자국이 보이기 시작합니다. 웹 게시용이라면 75~85 구간이 화질 저하를 거의 느끼지 못하면서 용량을 크게 줄이는 무난한 범위로 통용됩니다.

3. PNG의 강점과 함정

PNG의 장점은 명확합니다. 투명 배경과 선명한 경계입니다. 로고, 아이콘, 도표, UI 스크린샷처럼 색 경계가 칼같이 떨어져야 하는 이미지는 PNG로 저장해야 원본 그대로 유지됩니다. 무손실이라 몇 번을 다시 저장해도 열화가 없으니, 편집 중간 단계 보관용으로도 적합합니다.

함정은 사진을 PNG로 저장할 때 나타납니다. 무손실 압축은 색이 복잡하게 섞인 실사에서는 줄일 수 있는 데이터가 많지 않아서, 같은 사진이 JPG의 5~10배 용량이 되는 일이 흔합니다. "화질이 좋다니까"라는 이유로 블로그 사진을 전부 PNG로 올리면 페이지가 무거워지고 방문자 이탈로 이어집니다. 사진 위주의 페이지에서 용량이 왜 중요한지는 이미지 최적화 가이드에서 따로 다뤘습니다.

PNG 안에서도 종류가 나뉜다는 점을 알아 두면 유용합니다. 흔히 쓰는 PNG-24는 1,670만 색을 전부 표현하지만, 색 수가 적은 이미지라면 256색 이하의 팔레트만 저장하는 PNG-8로 용량을 크게 줄일 수 있습니다. 단색 아이콘이나 단순한 도표는 PNG-8로도 차이가 보이지 않는 경우가 많습니다. 그라데이션이 들어간 이미지를 PNG-8로 저장하면 색 띠가 생기니, 이럴 때는 PNG-24를 유지해야 합니다.

4. WebP란 무엇이고, 실제로 얼마나 작아지나

WebP란 한마디로 "웹 전송용으로 압축 효율을 다시 설계한 이미지 포맷"입니다. 구글이 공개한 공식 비교 스터디에 따르면, 무손실 WebP는 PNG보다 평균 약 26% 작고, 손실 WebP는 비슷한 품질의 JPEG보다 25~34% 작습니다. 파일 하나로 보면 몇십 KB 차이지만, 이미지가 수십 장 들어가는 블로그 글이나 상품 상세 페이지 전체로 보면 로딩 속도가 체감될 만큼 달라집니다.

호환성은 이제 걱정할 단계를 지났습니다. 크롬·엣지·파이어폭스·사파리 등 모던 브라우저는 모두 WebP를 표시할 수 있습니다. 다만 브라우저 밖은 사정이 다릅니다. 오래된 포토샵 버전이나 일부 윈도우 기본 프로그램, 문서 편집기, 관공서·기업의 업로드 시스템은 WebP를 열지 못하거나 업로드 자체를 거부하기도 합니다. 그래서 현재 시점의 현실적인 결론은 이렇습니다. 웹에 올리는 이미지는 WebP, 파일로 주고받는 이미지는 JPG나 PNG. 참고로 WebP는 애니메이션도 지원하는데, 움짤 용도로 GIF와 어느 쪽이 나은지는 GIF vs WebP 비교 글에서 자세히 정리했습니다.

덧붙이면, WebP 이후에도 AVIF 같은 더 새로운 포맷이 등장해 압축률 경쟁은 계속되고 있습니다. 다만 새 포맷일수록 지원 범위가 좁아지는 것은 피할 수 없는 흐름이라, "가장 최신"보다 "내 용도에서 확실히 열리는 포맷"을 고르는 편이 실수할 여지가 적습니다. 지금 기준으로 그 균형점에 있는 것이 WebP입니다.

5. 용도별 추천 — 이 표만 기억하면 됩니다

정리하면 판단 순서는 간단합니다. 투명 배경이나 또렷한 글자가 필요한가? 그렇다면 PNG. 웹에 올리는 사진인가? 그렇다면 WebP. 어딘가에 파일로 제출하는가? 그렇다면 JPG. 이 세 질문이면 대부분의 상황이 정리됩니다.

한 가지 예외 상황도 짚어 두겠습니다. 원본 보관입니다. 나중에 편집하거나 다른 포맷으로 다시 내보낼 가능성이 있는 이미지는, 게시용 파일과 별개로 카메라 원본이나 무손실 사본을 따로 남겨 두세요. 손실 포맷으로 변환한 파일만 남기면 이후 어떤 작업을 하든 이미 깎인 화질에서 출발하게 됩니다.

6. 직접 비교해 보는 법 — 설치 없이 3분

포맷별 용량 차이는 글로 읽는 것보다 자기 사진으로 한 번 확인해 보는 쪽이 훨씬 와닿습니다. 모든 변환이 브라우저 안에서 처리되므로 사진이 서버로 올라가지 않고, 프로그램 설치도 필요 없습니다.

1. 비교할 사진 한 장을 준비합니다. 인물이나 풍경 같은 실사가 차이를 보기 좋습니다.
2. 통합 변환기에 사진을 올려 PNG로 한 번, JPG로 한 번 변환하고 각 파일 크기를 적어 둡니다.
3. 같은 사진을 WebP 변환기로 변환해 앞의 두 결과와 비교합니다. 실사라면 WebP가 가장 작게 나오는 것을 확인할 수 있습니다.
4. 포맷은 그대로 두고 용량만 더 줄이고 싶다면 이미지 압축기에서 품질 값을 조절하며 화질과 용량의 균형점을 찾아보세요.

비교할 때는 용량 숫자만 보지 말고 결과 이미지를 실제 크기(100%)로 띄워서 확인하세요. 축소된 미리보기에서는 손실 압축의 흔적이 잘 드러나지 않습니다. 특히 머리카락 경계, 하늘 그라데이션, 글자 주변 세 곳을 확대해 보면 포맷별 압축 특성이 어디서 티가 나는지 금방 파악할 수 있습니다.

스크린샷이나 로고로도 같은 실험을 해 보면 이번에는 결과가 뒤집힙니다. 색 수가 적은 이미지에서는 PNG가 의외로 작게 나오고 JPG는 화질만 나빠집니다. 포맷 선택이 왜 "이미지 종류에 따라" 달라져야 하는지 몸으로 확인되는 순간입니다. 자주 하는 작업이라면 결과 파일명에 포맷과 품질 값을 함께 적어 두는 습관도 도움이 됩니다. 나중에 어떤 설정이 좋았는지 되짚기 쉬워집니다.

💡 자주 묻는 질문