JPG, PNG, WEBP 언제 무엇을 쓸까
블로그에 올리려고 폰으로 찍은 사진은 5MB가 넘고, 스크린샷은 PNG로 저장됐는데 JPG로 바꾸니 오히려 커졌다면 형식마다 잘하는 일이 다르기 때문이에요. 이 글은 세 가지 형식의 성격을 비교하고, 용량을 줄일 때 어떤 순서로 손대야 화질 손해가 가장 적은지 직접 잰 숫자와 함께 정리했어요.
1. 세 형식의 성격 비교
가장 큰 차이는 압축 방식이에요. 손실 압축은 눈에 덜 띄는 정보를 버려서 크기를 줄이고, 무손실 압축은 정보를 하나도 버리지 않고 저장해요. 손실 압축은 한 번 저장하면 버려진 정보를 되살릴 수 없어서, 저장을 거듭할수록 화질이 떨어져요.
| 항목 | JPG | PNG | WEBP |
|---|---|---|---|
| 압축 방식 | 손실 | 무손실 | 손실·무손실 모두 가능 |
| 투명 배경 | 불가 | 가능 | 가능 |
| 애니메이션 | 불가 | 기본 불가(APNG는 별도) | 가능 |
| 잘 맞는 이미지 | 사진 | 스크린샷·도표·로고 | 둘 다 |
| 브라우저 지원 | 모든 브라우저 | 모든 브라우저 | 최신 브라우저 대부분 |
MDN은 JPEG를 사진처럼 색이 연속적으로 변하는 이미지에, PNG를 정확한 재현이 필요한 스크린샷·도표·투명 배경 이미지에 권장해요. WebP는 손실과 무손실, 투명도, 애니메이션을 모두 지원하는 형식이에요. 구글은 같은 시각 품질에서 WebP가 JPEG·PNG보다 대략 30% 작다고 밝히고 있어요. 이는 구글이 자체 이미지 집합으로 잰 값이라, 내 사진에서는 더 많이 혹은 적게 줄 수 있어요.
브라우저 지원도 예전만큼 걱정할 필요는 없어요. caniuse.com은 2026년 8월 기준 전 세계 브라우저의 약 96.8%가 WebP를 지원한다고 보여 줘요. Chrome 32, Firefox 65, Safari 16, Edge 18 이상이에요. 다만 오래된 기기나 일부 프로그램(구형 문서 편집기, 일부 게시판 업로드 기능)은 WebP를 못 열 수 있으니, 받는 사람이 어디서 열지 모르는 파일은 JPG가 안전해요.
정리하면 사진은 JPG나 WEBP, 글자·선이 많은 이미지와 투명 배경이 필요한 이미지는 PNG나 WEBP예요. "무조건 WEBP"도 "무조건 JPG"도 답이 아니고, 이미지 종류와 받는 곳에 따라 골라야 해요.
2. 이미지 종류별 추천
| 이미지 | 추천 | 이유 |
|---|---|---|
| 풍경·인물 사진 | JPG (웹에 올릴 땐 WEBP도 좋음) | 색 변화가 연속적이라 손실 압축 효과가 큼 |
| 화면 캡처(스크린샷) | PNG | 글자 가장자리가 번지지 않고, 단순한 색면은 무손실로도 작음 |
| 로고·아이콘·투명 배경 | PNG 또는 WEBP | 투명도 유지. 벡터 원본(SVG)이 있으면 그쪽이 더 좋을 수 있음 |
| 블로그 썸네일 | JPG 또는 WEBP, 가로 1200px 안팎 | 보는 화면보다 훨씬 큰 원본은 낭비 |
| 짧은 움직이는 이미지 | WEBP(애니메이션) | MDN은 GIF 대신 WebP 등을 권장 |
제가 잰 예시에서도 스크린샷은 이 경향이 보였어요. 글자와 단색 면으로 만든 1280×720 합성 화면 캡처는 PNG가 약 109KB, 같은 이미지를 JPG 화질 85로 저장하면 약 144KB로 오히려 커졌어요. 글자 주변의 날카로운 경계는 JPG가 다루기 어려워서 그래요.
3. 용량 줄이는 순서: 크기 → 화질 → 형식
같은 이미지를 줄이더라도 손대는 순서가 결과를 좌우해요. 저는 아래 순서를 권해요.
- 표시되는 크기에 맞춰 줄이기. 블로그 본문 폭이 800px이라면 4000px짜리 원본을 올릴 이유가 없어요. 가로세로를 절반으로 줄이면 픽셀 수는 4분의 1이 되니 효과가 가장 커요. 화질을 버리는 것이 아니라 쓰지 않을 픽셀을 덜어내는 일이라 부작용도 적어요. 이미지 리사이즈로 픽셀이나 퍼센트로 바꿀 수 있어요.
- 화질 70~85 사이로 저장하기. 손실 형식에서 화질 숫자를 조금만 내려도 용량이 확 줄고, 눈으로 보이는 차이는 작은 편이에요. 100에 가깝게 저장하는 것이 오히려 낭비예요. 이미지 압축은 품질 슬라이더와 최대 가로·세로를 함께 지정해서 여러 장을 한 번에 처리해요.
- 형식 바꾸기. 위 두 단계로도 부족하거나 PNG를 줄여야 할 때 WEBP나 JPG로 바꿔요. 이미지 포맷 변환이 도와줘요. PNG는 무손실이라서 같은 형식으로 다시 저장해도 거의 줄지 않아요.
4. 직접 잰 예시
아래는 Python(Pillow 11.3)으로 만든 합성 이미지에 같은 조건을 적용해 잰 크기예요. 실제 사진이 아니라 여러 겹의 흐릿한 무늬와 잔 노이즈를 섞은 4000×3000 이미지이고, 이 수치는 하나의 예시일 뿐이에요. 내 사진의 절감률은 피사체와 노이즈에 따라 달라요.
| 조건 | 4000×3000 | 1600×1200로 축소 |
|---|---|---|
| PNG | 약 20,682KB | 약 2,664KB |
| JPG 화질 95 | 약 3,430KB | 약 449KB |
| JPG 화질 85 | 약 1,354KB | 약 233KB |
| JPG 화질 75 | 약 829KB | 약 173KB |
| WEBP 화질 85 | 약 716KB | 약 159KB |
| WEBP 화질 75 | 약 331KB | 약 100KB |
이 표에서 읽을 수 있는 건 세 가지예요. 첫째, 크기를 줄이는 효과가 가장 커서 같은 JPG 화질 85가 1,354KB에서 233KB로 줄었어요. 둘째, 화질 95에서 85로 내리면 절반 이하로 줄었어요. 셋째, 같은 화질 숫자에서도 WEBP가 JPG보다 작았지만, 화질 숫자는 형식마다 기준이 달라서 같은 숫자가 같은 시각 품질을 뜻하지는 않아요. 그래서 형식을 바꿀 때는 결과 이미지를 직접 확대해서 확인해 보세요.
잰 방법은 이렇게 했어요. 이미지를 PNG로 저장한 뒤 Pillow의 저장 함수에 형식과 화질 값을 넣어 메모리에서 저장한 바이트 수를 KB로 환산했고, 축소는 LANCZOS 방식으로 했어요. 같은 코드를 돌리면 같은 값이 나와요.
5. 메타데이터(EXIF)도 확인하세요
휴대폰으로 찍은 사진에는 촬영 시각, 기기 모델, 경우에 따라 위치 정보가 EXIF라는 메타데이터로 들어 있을 수 있어요. 용량에서는 작은 부분이지만, 블로그나 커뮤니티에 사진을 올릴 때는 촬영 위치가 그대로 공개될 수도 있으니 스마트폰의 위치 태그 설정을 확인해 두면 좋아요. 브라우저에서 캔버스로 다시 그려 저장하는 도구는 보통 메타데이터가 함께 빠지지만, 도구마다 동작이 다르니 민감한 사진이라면 결과 파일의 속성을 직접 열어 확인하세요.
자주 묻는 질문
JPG를 PNG로 바꾸면 화질이 좋아지나요?
좋아지지 않아요. 이미 손실 압축으로 버려진 정보는 돌아오지 않고, 무손실 형식으로 저장해도 지금 상태를 그대로 담을 뿐이에요. 오히려 파일 크기만 몇 배로 커져요.
WEBP를 쓰면 안 되는 경우가 있나요?
받는 사람의 프로그램이 WEBP를 열지 못할 수 있는 경우예요. 메일 첨부, 인쇄 업체 전달, 구형 문서 편집기에 넣을 이미지는 JPG나 PNG가 안전해요. 필요하면 이미지 포맷 변환으로 나중에 바꿀 수 있으니 원본은 보관하세요.
PNG가 압축해도 줄지 않는 이유는 뭔가요?
PNG는 무손실이라 정보를 버리지 않고, 브라우저에서 다시 저장해도 크기가 거의 그대로예요. 줄이려면 가로세로 크기를 줄이거나 WEBP 같은 다른 형식으로 바꾸는 방법이 있어요. 색 수를 줄이는 전용 도구도 있지만 그건 화질을 일부 포기하는 방식이에요.
화질은 몇으로 저장하는 게 좋아요?
화면에서 보는 용도라면 70~85 정도에서 시작해 보세요. 결과를 확대해 보고 번짐이 눈에 띄면 5~10씩 올리면 돼요. 정해진 정답은 없고 이미지마다 달라요.
출처
- MDN Web Docs - Image file type and format guide (확인일: 2026-09-24)
- Google for Developers - WebP Compression Techniques (확인일: 2026-09-24)
- Can I use - WebP image format (확인일: 2026-09-24)
- web.dev - Learn Images: Performance issues (확인일: 2026-09-24)
본 글은 일반적인 정보 제공을 위한 것입니다. 표의 크기는 합성 이미지로 잰 예시이며, 실제 이미지의 결과는 다를 수 있어요. 중요한 원본은 압축 전에 따로 보관하세요.