사진을 저장하려는데 JPG와 PNG 중 무엇을 골라야 할까. 웹사이트에서는 WebP가 가볍다고 하고, 로고 파일을 받으면 SVG라는 낯선 확장자가 붙는다. 네 형식은 단순히 화질 순서로 줄 세울 수 없다. 사진은 JPG 또는 WebP, 투명 배경과 화면 캡처는 PNG, 로고·아이콘은 SVG에서 시작하면 대부분의 선택이 쉬워진다.
이번 글은 정의만 나열하지 않았다. 같은 1200×800 사진을 PNG, JPG 품질 80·30, WebP 품질 80으로 직접 저장해 용량을 비교했다. 투명 배경과 확대 결과도 실제 그림으로 확인한다. 샘플 한 장의 수치가 모든 사진에 그대로 적용되지는 않지만, 각 형식이 어디서 강하고 약한지는 분명히 보인다.
네 형식의 차이를 한 표로 먼저 보기
JPG, PNG, WebP는 픽셀로 이루어진 래스터 이미지다. 정해진 가로·세로 픽셀 수보다 크게 확대하면 결국 흐려지거나 계단처럼 깨진다. SVG는 경로와 도형을 XML 텍스트로 설명하는 벡터 형식이라 단순한 로고와 아이콘을 여러 크기로 다시 그릴 수 있다.
| 형식 | 가장 잘 맞는 용도 | 투명 배경 | 확대 | 압축 |
|---|---|---|---|---|
| JPG | 사진 | 불가 | 픽셀 깨짐 | 손실 |
| PNG | 캡처·투명 이미지 | 가능 | 픽셀 깨짐 | 무손실 |
| WebP | 웹 사진·웹 그래픽 | 가능 | 픽셀 깨짐 | 손실·무손실 |
| SVG | 로고·아이콘·단순 도형 | 가능 | 선명 | 벡터 구조 최적화 |
MDN 이미지 형식 가이드는 PNG가 무손실 압축과 알파 투명도를 지원하고, JPEG가 사진 압축에 널리 쓰이며, WebP가 손실·무손실 압축과 투명도를 지원한다고 정리한다. 형식마다 저장하는 정보와 압축 방식이 다르므로 “PNG가 항상 최고 화질” 같은 한 문장으로 결론 내릴 수 없다.
JPG란? 사진을 작게 저장하는 현실적인 기본값
JPG와 JPEG는 같은 형식을 가리킨다. 오래된 운영체제에서 확장자를 세 글자로 쓰던 관습 때문에 .jpg가 널리 쓰였고 .jpeg도 정상이다. JPEG는 사람의 눈이 밝기 변화보다 일부 색상 차이에 덜 민감하다는 특성을 이용해 사진 데이터를 줄인다.
장점은 사진에서 용량 대비 품질이 좋다는 것이다. 여행 사진, 음식 사진, 인물 사진처럼 색과 명암이 복잡하게 이어지는 장면에 잘 맞는다. 단점은 손실 압축이다. 저장할 때 일부 정보를 버리기 때문에 낮은 품질로 반복 저장하면 블록과 번짐이 쌓인다. 투명 배경도 지원하지 않는다.
품질 수치는 프로그램마다 해석이 조금씩 다르다. 80이라는 숫자가 모든 도구에서 같은 화질과 용량을 보장하지 않는다. 따라서 숫자만 외우기보다 실제 표시 크기로 눈에 띄는 손상이 없는지 확인해야 한다.
작은 글자, UI 선, 로고처럼 경계가 또렷한 그래픽을 JPG로 저장하면 주변에 모기처럼 번지는 압축 흔적이 생길 수 있다. JPG는 사진에는 강하지만 화면 캡처와 아이콘의 만능 형식은 아니다.
PNG란? 무손실과 투명 배경이 필요한 이미지
PNG는 저장하고 다시 열어도 원래 픽셀 정보를 보존하는 무손실 형식이다. 화면 캡처, 도표, 작은 글자, 단색 경계처럼 픽셀이 또렷해야 하는 이미지에 유리하다. 알파 채널을 이용한 부드러운 반투명 표현도 지원한다.
하지만 무손실이라는 말이 “모든 이미지에서 가장 효율적”이라는 뜻은 아니다. 사진처럼 픽셀 변화가 복잡한 장면은 PNG 용량이 크게 늘어난다. 이번 1200×800 샘플은 PNG가 704KB였고 JPG 품질 80은 108KB였다. 사진을 PNG로 바꾼다고 원본에 없던 디테일이 생기지도 않는다. 이미 압축된 JPG를 PNG로 저장하면 손실 흔적을 그대로 보존한 큰 파일이 될 뿐이다.
투명 배경과 흰색 배경은 다르다
체커보드 무늬는 이미지에 체크무늬가 들어갔다는 뜻이 아니라 편집기가 투명 영역을 보여주는 관례다. 투명한 PNG를 어두운 배경 위에 올리면 바깥 배경이 보인다. 흰색으로 채운 JPG는 어두운 배경 위에서 흰 사각형이 그대로 나타난다.
제품 누끼, 로고, 스티커처럼 배경이 바뀌는 콘텐츠에는 PNG가 편하다. 다만 단순한 로고와 아이콘이라면 PNG보다 SVG가 더 작고 크기 변경도 자유로울 수 있다.
WebP란? 웹에서 용량을 줄이기 위한 현대적인 선택
WebP는 Google이 개발한 웹 이미지 형식이다. Google의 WebP 공식 문서는 손실과 무손실 압축, 알파 투명도와 애니메이션을 지원한다고 설명한다. 사진뿐 아니라 투명한 웹 그래픽에도 사용할 수 있다는 점이 JPG보다 유연하다.
이번 샘플에서는 WebP 품질 80이 32KB, JPG 품질 80이 108KB, PNG가 704KB였다. WebP가 JPG의 약 30% 크기로 나온 셈이다. 그러나 이 비율은 사진의 질감, 해상도, 인코더와 설정에 따라 달라진다. WebP가 언제나 정확히 몇 퍼센트 작다고 단정하면 안 된다.
웹페이지에서는 이미지가 작을수록 다운로드 시간이 줄고 핵심 콘텐츠가 빨리 보일 가능성이 커진다. web.dev의 이미지 형식 안내는 콘텐츠에 맞는 형식 선택과 압축이 전송량을 줄이는 중요한 방법이라고 설명한다. 다만 이미지 크기만으로 성능이 끝나는 것은 아니다. 실제 표시 크기에 맞는 해상도, srcset, 지연 로딩, 캐시와 CDN도 함께 작동한다.
WebP의 주의점은 편집기와 업로드 플랫폼이다. 현대 브라우저 지원은 넓지만 오래된 프로그램, 사내 문서 시스템, 일부 메신저나 블로그 편집기는 업로드 때 거부하거나 JPG로 다시 변환할 수 있다. 플랫폼이 WebP를 받는지, 애니메이션과 투명도가 유지되는지 실제로 시험해야 한다.
SVG란? 이미지인데 왜 코드처럼 보일까
SVG는 픽셀 배열 대신 원, 사각형, 곡선, 색상과 좌표를 XML 문법으로 적는다. 그래서 텍스트 편집기로 열면 <svg>, <path>, <circle> 같은 코드가 보인다. W3C SVG 2 명세는 SVG를 2차원 벡터와 혼합 벡터·래스터 그래픽을 기술하는 XML 기반 언어로 정의한다.
브라우저는 그 경로를 현재 크기에 맞춰 다시 그리므로 로고를 24px 아이콘으로 쓰다가 대형 배너로 확대해도 경계가 선명하다. CSS로 색을 바꾸거나 일부 요소를 애니메이션으로 움직일 수도 있다. 단순한 도형에서는 파일 크기도 작다.
하지만 SVG가 사진을 대체하지는 않는다. 수백만 개의 색과 복잡한 질감을 경로로 표현하면 구조가 지나치게 커지고 편집도 어려워진다. SVG 안에 스크립트와 외부 자원을 넣을 수 있다는 점도 중요하다. 출처를 모르는 SVG를 HTML에 그대로 삽입하지 말고 신뢰할 수 있는 자산을 사용하며 최적화·정제 과정을 거쳐야 한다.
PNG가 JPG보다 무조건 화질이 좋은가?
PNG는 무손실이므로 같은 원본 픽셀을 보존하는 데 유리하다. 그러나 ‘좋은 화질’은 용도와 관련이 있다. 사진을 적절한 품질의 JPG로 저장하면 눈으로 보기에는 충분히 자연스러우면서 용량이 훨씬 작을 수 있다. 반대로 작은 글자와 단색 선이 많은 캡처는 PNG가 더 깨끗하다.
핵심은 원본보다 정보가 늘어나지 않는다는 사실이다. 저화질 JPG를 PNG로 변환한다고 복원되지 않는다. 확장자만 바꾸는 것은 압축 손실을 치료하는 작업이 아니다.
블로그에는 JPG, PNG, WebP 중 무엇이 좋을까
대표 사진과 본문 사진은 플랫폼이 안정적으로 지원하면 WebP가 전송량을 줄이는 데 유리하다. 호환성이 최우선이거나 플랫폼이 WebP를 다시 변환한다면 적절히 압축한 JPG가 안전하다. 앱 화면 캡처, 표, 글자가 들어간 도표는 PNG가 또렷하다. 직접 운영하는 웹사이트의 로고와 단순 아이콘은 SVG를 우선 검토한다.
네이버 블로그처럼 외부 플랫폼은 업로드 과정에서 이미지를 자체 형식과 크기로 변환할 수 있다. 원본 WebP 파일을 올렸다는 사실보다 게시 후 실제 표시 품질과 로딩이 더 중요하다. 작은 글자가 있는 도표는 모바일에서 확대해 보고, 대표 이미지는 목록 카드에서 중요한 피사체가 잘리지 않는지 확인하자.
실제 상황별 선택 순서
사진이면 JPG와 WebP를 비교한다. 웹 전송량이 중요하고 지원 환경이 충분하면 WebP, 범용 파일 전달과 호환성이 중요하면 JPG가 편하다. 투명한 제품 컷과 캡처라면 PNG 또는 WebP를 본다. 로고·아이콘·단순 도형이면 SVG가 우선이다. 상대가 어떤 프로그램으로 열지 모르는 납품물이라면 JPG나 PNG 대안도 함께 제공한다.
이 여백이 말을 하고 있어요. 이미지를 크게 저장하는 것보다 콘텐츠 주변의 여백과 실제 표시 크기를 먼저 정해야 한다. 300px로 보일 이미지를 4000px로 올리는 것은 화질을 높이는 일이 아니라 불필요한 다운로드를 만드는 일일 수 있다.
자주 묻는 질문
WebP는 왜 용량이 작은가?
예측과 압축 방식이 JPEG보다 현대적이며 손실·무손실을 모두 지원한다. 다만 이미지마다 결과가 다르므로 같은 크기와 비슷한 체감 품질로 직접 비교해야 한다.
WebP를 PNG로 바꾸면 투명 배경이 유지되나?
원본 WebP에 알파 투명도가 있고 변환 도구가 알파를 보존하면 가능하다. 변환 과정에서 JPG를 거치거나 배경색을 합성하면 투명도가 사라진다.
SVG에 사진을 넣을 수 있나?
기술적으로 SVG 안에 래스터 이미지를 포함할 수 있다. 그렇다고 사진이 벡터로 바뀌는 것은 아니다. 포함된 사진 부분은 확대하면 여전히 픽셀 한계가 있다.
확장자만 .jpg에서 .png로 이름을 바꾸면 되나?
안 된다. 파일 내부 인코딩은 그대로라 프로그램이 열지 못하거나 잘못 인식할 수 있다. 이미지 편집기나 검증된 변환 도구로 다시 인코딩해야 한다.
SEO에는 WebP가 더 좋은가?
확장자 하나가 검색 순위를 보장하지 않는다. 다만 적절한 압축과 크기로 페이지가 빨리 표시되면 사용자 경험과 성능에 도움이 된다. 의미 있는 파일명, 주변 문맥, 정확한 alt 텍스트도 함께 챙겨야 한다.
픽셀의 최종 추천
사진 저장은 JPG부터, 웹사이트 사진 최적화는 WebP부터 비교한다. 화면 캡처와 투명한 그래픽은 PNG, 로고와 아이콘은 SVG가 기본값이다. 하지만 최종 선택은 원본 종류, 플랫폼 지원, 실제 표시 크기, 허용 가능한 손실을 함께 본 뒤 정해야 한다.
PNG가 언제나 고화질이고 WebP가 언제나 가장 작으며 SVG가 모든 이미지에 적합하다는 식의 규칙은 틀리다. 가장 좋은 형식은 필요한 정보를 보존하면서 독자가 내려받아야 할 바이트를 가장 적게 만드는 형식이다. 같은 이미지를 두세 가지 설정으로 저장하고 실제 화면에서 나란히 보는 것이 가장 빠르고 정확하다.
그리고 원본 파일은 별도로 보관하자. 웹용으로 작게 줄인 JPG나 WebP만 남겨 두면 나중에 더 큰 배너나 인쇄물을 만들 때 되돌릴 수 없다. 편집 가능한 원본과 실제 배포 파일을 구분해 두는 습관이 확장자 선택만큼 중요하다.
참고 자료
본문 비교 사진은 CC0 공개 이미지를 동일한 1200×800 크기로 변환해 사용했다. 파일 크기는 이 샘플과 사용한 인코더 설정의 실측값이며 다른 사진에서는 달라질 수 있다.
