PNG·JPG·WebP 뭘 써야 하나 — 이미지 포맷 고르는 기준
손실·무손실 압축의 차이부터 포맷별 성격, 투명도 처리, 재압축이 화질을 갉아먹는 이유와 용량을 줄이는 가장 효과적인 순서까지 정리합니다.
같은 사진을 PNG로 저장하면 4MB인데 JPG로 저장하면 400KB가 됩니다. 반대로 스크린샷을 JPG로 저장하면 글자 주변이 지저분해집니다. 포맷마다 잘하는 일이 다르기 때문인데, 그 차이를 알면 "일단 PNG로 저장"하는 습관에서 벗어나 용량과 화질을 동시에 잡을 수 있습니다. 이 글에서는 각 포맷의 성격과 상황별 선택 기준을 정리합니다.
손실 압축과 무손실 압축
이미지 포맷을 가르는 첫 번째 축입니다. 무손실은 원본 데이터를 그대로 복원할 수 있게 압축합니다. 압축을 풀면 픽셀 하나까지 원본과 같습니다. 손실은 사람 눈이 잘 알아채지 못하는 정보를 버려서 용량을 줄입니다. 버린 정보는 되돌릴 수 없습니다.
그래서 사진처럼 색이 부드럽게 이어지는 이미지는 손실 압축이 압도적으로 유리하고, 글자나 선처럼 경계가 뚜렷한 이미지는 무손실이 유리합니다. 손실 압축은 급격한 경계 주변에 링잉이라 불리는 얼룩을 만드는데, 사진에서는 눈에 띄지 않지만 흰 배경의 검은 글자에서는 바로 보입니다.
포맷별 성격
| 포맷 | 압축 | 투명도 | 잘 맞는 용도 |
|---|---|---|---|
| JPG / JPEG | 손실 | 불가 | 사진, 색이 풍부한 이미지 |
| PNG | 무손실 | 가능 (알파 채널) | 로고, 아이콘, 스크린샷, 도표 |
| WebP | 손실·무손실 모두 | 가능 | 웹 전반 (같은 품질에서 가장 작음) |
| GIF | 무손실 (256색 제한) | 가능 (1비트) | 짧은 애니메이션 |
| SVG | 벡터 (텍스트 기반) | 가능 | 아이콘, 로고, 도형 |
상황별로 고르는 법
- 블로그·쇼핑몰에 올릴 사진 → WebP. 같은 품질에서 JPG보다 25~35% 작습니다. 아주 오래된 환경까지 고려해야 한다면 JPG를 함께 준비합니다.
- 배경이 투명해야 하는 로고 → PNG 또는 WebP. JPG는 투명도를 저장할 수 없습니다.
- 글자가 많은 스크린샷 → PNG. JPG로 저장하면 글자 가장자리가 뭉개집니다.
- 단순한 도형이나 아이콘 → SVG. 벡터라 아무리 확대해도 깨지지 않고 용량도 작습니다. 다만 사진은 SVG로 만들 수 없습니다.
- 인쇄용 원본 보관 → PNG나 TIFF 같은 무손실. 편집을 반복할 예정이라면 더욱 그렇습니다.
JPG로 바꾸면 투명한 부분이 검게 변하는 이유
투명 PNG를 JPG로 변환했더니 배경이 검거나 하얗게 바뀌었다는 것은 가장 흔한 질문입니다. JPG 포맷에는 투명도를 담을 자리 자체가 없습니다. 그래서 변환할 때 투명한 픽셀을 어떤 색으로든 채워야 하고, 프로그램마다 기본값이 검정이거나 흰색입니다.
투명도를 살려야 한다면 PNG나 WebP로 내보내야 합니다. 배경이 꼭 필요한 상황이라면 이미지 포맷 변환에서 채울 색을 직접 지정해 의도한 색으로 합칠 수 있습니다.
재압축은 화질을 갉아먹는다
손실 압축은 할 때마다 손상이 누적됩니다. 카카오톡으로 받은 사진을 다시 카카오톡으로 보내고, 그걸 또 편집해 저장하는 과정을 반복하면 원본과 확연히 달라집니다. 흔히 "짤 화질"이라고 부르는 현상이 이것입니다.
중요한 원칙은 항상 원본에서 한 번에 처리하라는 것입니다. 이미 압축된 JPG를 다시 압축하면 품질을 높게 잡아도 이전 손상은 복구되지 않고 새 손상만 더해집니다. 마찬가지로 JPG를 PNG로 바꿔도 화질이 좋아지지 않습니다. 이미 버려진 정보를 무손실로 보관하는 것일 뿐이라 용량만 커집니다.
용량을 줄이는 가장 효과적인 순서
품질 슬라이더를 내리기 전에 크기를 먼저 줄이는 편이 훨씬 효과적입니다. 요즘 스마트폰 사진은 가로 4,000픽셀이 넘는데 블로그 본문에는 1,200픽셀이면 충분합니다. 가로를 3분의 1로 줄이면 픽셀 수는 9분의 1이 되어 용량이 그만큼 떨어지고, 화질 저하는 화면에서 보이지 않습니다.
- 용도에 맞는 해상도로 리사이즈
- 포맷 선택 (웹이면 WebP, 범용이면 JPG, 투명·글자면 PNG)
- 품질 조정 — 보통 0.8 부근이 균형점
이 순서대로 하면 대부분의 사진이 원본의 5~10% 크기로 줄어듭니다. 실제 절감률은 이미지 압축에서 전후 용량으로 바로 확인할 수 있습니다.
알아 두면 좋은 것들
- 메타데이터: 스마트폰 사진에는 촬영 일시와 기종, GPS 위치가 함께 저장됩니다. 브라우저에서 리사이즈하거나 포맷을 변환하면 이 정보가 제거되므로, 사진을 공개할 때는 오히려 안전합니다. 반대로 기록을 남겨야 한다면 원본을 따로 보관하세요.
- PNG의 품질 슬라이더: PNG는 무손실이라 품질 값의 영향을 받지 않습니다. PNG 용량을 줄이려면 색 수를 줄이거나 크기를 줄여야 합니다.
- GIF 변환: 움직이는 GIF를 다른 포맷으로 바꾸면 보통 첫 프레임만 남고 애니메이션이 사라집니다.
마무리
포맷 선택의 기준은 결국 두 가지 질문으로 좁혀집니다. 경계가 뚜렷한 이미지인가, 부드러운 사진인가? 그리고 투명도가 필요한가? 글자와 선이 많으면 PNG, 사진이면 JPG나 WebP, 투명도가 필요하면 PNG나 WebP입니다. 여기에 "원본에서 한 번에, 크기를 먼저 줄인다"는 원칙만 더하면 거의 모든 상황을 해결할 수 있습니다. 포맷을 바꾸려면 이미지 포맷 변환을, 용량을 줄이려면 이미지 압축을 사용해 보세요.