스크린샷을 PNG로 저장했더니 3MB가 됐다. 같은 이미지를 JPG로 저장하면 200KB인데 보기에는 거의 똑같다. 또는 웹사이트에서 JPG만 허용하는데, 아이콘의 투명 배경을 유지하려면 PNG가 꼭 필요하다. 이미지 형식 선택은 단순한 습관이 아니라 명확한 이유가 있습니다. 이 글에서는 압축 원리부터 시작해 JPG·PNG·WebP·GIF·SVG의 차이점과 각 상황에서 어떤 형식을 선택해야 하는지를 한 번에 정리합니다.
1. 이미지 형식의 핵심 차이：압축 방식
모든 이미지 형식의 근본적인 차이는 픽셀 정보를 어떻게 저장하느냐, 즉 압축 방식에 있습니다. 크게 두 가지로 나뉩니다.
1.1 손실 압축（Lossy Compression）
사람 눈에 잘 보이지 않는 세부 정보를 버려 파일 크기를 줄입니다. JPG가 대표적인 예입니다. 압축률은 높을 수 있지만, 한 번 저장하면 원본 데이터를 완전히 복원할 수 없습니다. 편집 후 재저장을 반복할수록 화질이 누적으로 저하됩니다（「세대 손실」이라고 합니다）.
1.2 무손실 압축（Lossless Compression）
모든 픽셀 정보를 완전히 보존한 채 압축합니다. 압축 해제 시 원본 이미지를 완벽하게 복원할 수 있습니다. PNG가 이 방식을 사용합니다. 파일 크기는 손실 형식보다 크지만 화질은 전혀 손상되지 않으며, 반복 편집해도 품질이 떨어지지 않습니다.
사진을 JPG로 저장하면 눈에 보이는 차이 없이 파일 크기를 1/10로 줄일 수 있습니다. 아이콘을 PNG로 저장하면 투명 배경을 유지하면서 선명한 가장자리를 보존할 수 있습니다. 문제는 압축 자체가 아니라 콘텐츠에 맞지 않는 형식을 선택하는 것입니다.
2. 주요 형식별 상세 설명
2.1 JPG / JPEG
정식 명칭：Joint Photographic Experts Group（1992년）
압축 방식：손실
투명도：미지원
애니메이션：미지원
JPG는 전 세계에서 가장 널리 사용되는 사진 형식으로, 색상 그라데이션이 풍부한 사진에 최적화되어 있습니다. 5MB짜리 디지털 카메라 사진도 품질 80%의 JPG로 저장하면 보통 300~600KB가 되며, 육안으로는 거의 차이를 느낄 수 없습니다.
적합한 용도：사진, SNS 게시 이미지, 배경 이미지, 색상이 풍부한 콘텐츠
부적합한 용도：투명 배경이 필요한 아이콘, 텍스트 스크린샷（압축 후 텍스트 가장자리가 흐려짐）, 반복 편집이 필요한 작업 파일
2.2 PNG
정식 명칭：Portable Network Graphics（1996년）
압축 방식：무손실
투명도：지원（알파 채널, 최대 256단계 투명도）
애니메이션：미지원（APNG 확장 형식은 지원）
PNG는 초기 GIF를 대체하기 위해 설계되었으며, 투명 배경이 필요하거나 픽셀 정밀도가 중요한 상황에서 최선의 선택입니다. 웹의 로고·아이콘·버튼 이미지 대부분이 PNG 형식입니다.
PNG의 단점은 사진류 콘텐츠에 대한 압축 효율이 낮다는 점입니다. 같은 사진을 PNG로 저장하면 JPG보다 5~10배 커질 수 있습니다.
적합한 용도：아이콘, 로고, 스크린샷, 투명 배경 소재, 텍스트 이미지, 다이어그램
부적합한 용도：사진（파일이 불필요하게 커짐）, 대역폭을 최소화해야 하는 환경
2.3 WebP
개발：Google（2010년）
압축 방식：손실·무손실 모두 지원
투명도：지원
애니메이션：지원
WebP는 「JPG보다 작고 PNG보다 유연」한 것을 목표로 Google이 개발한 현대적 형식입니다. 손실 WebP는 같은 화질의 JPG보다 평균 25~35% 작고, 무손실 WebP는 PNG보다 약 26% 작습니다. Chrome·Firefox·Safari·Edge 등 주요 브라우저가 모두 지원합니다.
적합한 용도：웹 이미지 최적화, 투명도와 애니메이션이 모두 필요한 경우
부적합한 용도：구형 시스템 호환이 필요한 경우（iOS 14 미만 미지원）, Photoshop 등 기존 소프트웨어를 사용하는 편집 워크플로우
2.4 GIF
정식 명칭：Graphics Interchange Format（1987년）
압축 방식：무손실（단, 256색 제한）
투명도：부분 지원（완전 투명 또는 완전 불투명만 가능, 반투명 불가）
애니메이션：지원（GIF가 여전히 존재하는 주요 이유）
256색 제한으로 인해 사진 표현에는 매우 불리하지만, SNS의 짧은 루프 애니메이션 문화에 깊이 자리 잡고 있어 여전히 사용됩니다. 기술적으로는 WebP 애니메이션이나 APNG가 더 효율적이지만, 생태계 관성으로 GIF가 지속되고 있습니다.
적합한 용도：단순한 루프 애니메이션, SNS 리액션 GIF
부적합한 용도：사진, 256색 이상이 필요한 이미지, 반투명 효과가 필요한 경우
2.5 SVG
정식 명칭：Scalable Vector Graphics（1999년）
형식 유형：벡터（래스터 아님）
투명도：지원
애니메이션：지원（CSS 또는 SMIL）
SVG는 다른 형식과 본질적으로 다릅니다. 픽셀을 기록하는 것이 아니라 수학적 방정식으로 도형·경로·색상을 묘사합니다. 따라서 무한히 확대해도 품질 저하가 없고, 아이콘과 로고는 보통 몇 KB에 불과합니다. 사진류의 복잡한 이미지는 표현할 수 없습니다.
적합한 용도：아이콘, 로고, 일러스트, 인포그래픽, 다양한 크기로 사용해야 하는 그래픽
부적합한 용도：사진, 래스터 스타일의 아트워크
3. 형식 비교 한눈에 보기
| 형식 | 압축 | 투명도 | 애니메이션 | 최적 용도 |
|---|---|---|---|---|
| JPG | 손실 | 없음 | 없음 | 사진·색상이 풍부한 이미지 |
| PNG | 무손실 | 있음 | 없음 | 아이콘·스크린샷·투명 배경 |
| WebP | 둘 다 가능 | 있음 | 있음 | 웹 이미지 최적화（현대 브라우저） |
| GIF | 무손실（256색） | 부분 | 있음 | 단순 루프 애니메이션 |
| SVG | 벡터 | 있음 | 있음 | 아이콘·로고·일러스트 |
4. 상황별 선택 가이드
4.1 SNS 게시 이미지 업로드
JPG를 사용하세요. SNS 플랫폼（인스타그램, X 등）은 업로드 시 자체 압축을 적용합니다. 큰 PNG 파일을 업로드하면 이중 압축으로 오히려 화질이 더 떨어질 수 있습니다. 품질 80~90%의 JPG로 업로드하는 것이 일반적으로 최선입니다.
4.2 웹사이트 로고·아이콘
벡터 이미지라면 SVG, 래스터 이미지라면 PNG를 사용하세요. 둘 다 투명 배경을 지원하며, SVG는 어떤 크기로도 품질 손실 없이 확대할 수 있습니다.
4.3 웹 페이지 이미지（로딩 속도 최적화）
WebP를 사용하고, HTML의 <picture> 태그로 JPG 또는 PNG를 폴백으로 지정하세요. 현대 브라우저는 WebP를 네이티브 지원하며, 구형 브라우저는 자동으로 폴백을 사용합니다.
4.4 스크린샷·텍스트 이미지
PNG를 사용하세요. 텍스트 가장자리가 선명하게 유지됩니다. 손실 압축은 텍스트처럼 고대비 경계에 압축 아티팩트를 생성합니다.
4.5 루프 애니메이션
플랫폼에 따라 다릅니다. 대부분의 SNS는 GIF를 지원합니다. 선택권이 있다면 WebP 애니메이션이 파일 크기는 더 작고 화질은 더 좋습니다.
5. 자주 묻는 질문
JPG로 저장하면 화질이 떨어지는데, 복원할 수 있나요？
불가능합니다. 손실 압축은 비가역적입니다. 버려진 데이터는 복원할 수 없습니다. 사진 편집 시에는 RAW나 PSD 같은 원본 형식을 반드시 보관하고, 최종 출력 단계에서만 JPG로 저장하는 것이 기본입니다.
같은 이미지인데 PNG가 JPG보다 훨씬 큰 이유는?
사진은 수백만 가지의 미묘한 색상 변화를 담고 있으며, JPG의 손실 압축 알고리즘은 바로 이런 콘텐츠에 가장 효과적입니다. PNG의 무손실 압축은 모든 픽셀의 정확한 색상값을 보존해야 하므로, 사진류 콘텐츠에 대한 압축률이 매우 낮습니다.
온라인 이미지 도구로 형식을 변환할 수 있나요？
가능합니다. 현대의 브라우저 기반 이미지 도구는 JPG·PNG·WebP 등 형식 간 상호 변환을 지원하며, 모든 처리가 브라우저 내에서 완료됩니다. 파일을 서버에 업로드하지 않아도 되므로 개인 정보 보호에도 유리합니다.
6. 정리
이미지 형식 선택의 핵심 로직은 간단합니다：
- 사진 → JPG（작은 파일, 충분한 화질）
- 아이콘·스크린샷·투명 배경 → PNG（무손실, 정밀）
- 웹 최적화 → WebP（두 장점을 모두 갖춘 현대적 선택）
- 벡터 그래픽 → SVG（무한 확대, 가장 작은 아이콘 형식）
- 루프 애니메이션 → GIF 또는 WebP 애니메이션（플랫폼 지원 여부에 따라）
다음에 이미지를 저장하기 전에 「이것은 사진인가 그래픽인가」 「투명 배경이 필요한가」 「웹에서 빠르게 로드해야 하는가」를 생각해 보세요. 그 답이 자연스럽게 최적의 형식을 알려줄 것입니다.