JPG PNG 차이와 WEBP까지, 용도별 이미지 형식 선택법
JPG와 PNG의 가장 큰 차이는 압축 방식입니다. JPG는 눈에 잘 띄지 않는 정보를 버려 용량을 줄이는 손실 압축을 씁니다. 그래서 사진에 적합합니다. 또 JPG는 투명 배경을 지원하지 않습니다. PNG는 원본 픽셀을 그대로 보존하는 무손실 압축이라 화면 캡처, 로고, 글자가 많은 이미지에 잘 맞고 투명 배경도 지원합니다.
WEBP는 구글이 만든 비교적 새로운 형식입니다. 손실 압축과 무손실 압축, 투명 배경, 움짤(애니메이션)을 모두 지원하고, 같은 화질이라면 대체로 파일이 더 작습니다. 다만 오래된 프로그램이나 일부 업무용 소프트웨어, 업로드 양식에서는 열리지 않거나 접수되지 않을 수 있습니다.
정리하면 사진은 JPG, 캡처와 로고는 PNG, 웹사이트에 올릴 이미지는 WEBP를 기본으로 고르면 됩니다. 받는 사람이 어떤 프로그램을 쓸지 모를 때는 WEBP보다 JPG나 PNG가 안전합니다.
JPG, PNG, WEBP 차이 한눈에 비교
| 항목 | JPG | PNG | WEBP |
|---|---|---|---|
| 압축 방식 | 손실 | 무손실 | 손실·무손실 중 선택 |
| 투명 배경 | 지원 안 함 | 지원(알파 채널) | 지원(알파 채널) |
| 애니메이션 | 지원 안 함 | 기본 PNG는 안 됨(APNG로 가능) | 지원 |
| 색 깊이 | 일반적으로 채널당 8비트 | 채널당 최대 16비트 | 채널당 8비트 |
| 강점 | 사진 용량이 작고 어디서나 열림 | 글자·선이 선명하게 유지됨 | 웹용 용량을 줄이기 좋음 |
| 약점 | 다시 저장할수록 열화, 글자 번짐 | 사진은 용량이 큼 | 구형 프로그램에서 안 열릴 수 있음 |
| 확장자 | .jpg, .jpeg | .png | .webp |
알파 채널은 픽셀마다 '얼마나 투명한지'를 저장하는 별도의 정보입니다. 이 정보가 있어야 로고 바깥이 투명하게 비치거나 그림자가 반투명하게 겹쳐 보입니다.
손실 압축과 무손실 압축, 화질 차이는 어디서 생기나
JPG: 사람 눈이 덜 민감한 정보를 버립니다
JPG는 이미지를 8×8 픽셀 블록으로 나눈 뒤 각 블록의 세밀한 변화를 단순하게 만들어 용량을 줄입니다. 색 정보는 밝기 정보보다 낮은 해상도로 저장하는 경우가 많습니다. 하늘이나 피부처럼 색이 부드럽게 이어지는 사진에서는 거의 티가 나지 않습니다.
반면 흰 바탕의 검은 글자나 가는 선처럼 경계가 뚜렷한 곳에서는 얼룩이 생깁니다. 글자 주변이 뿌옇게 번지거나 블록 모양 자국이 보이는 것이 이 때문입니다. 대부분의 프로그램은 품질 값(흔히 0~100)을 고를 수 있게 하는데, 숫자가 같아도 프로그램마다 실제 결과는 다를 수 있습니다.
PNG: 픽셀을 하나도 바꾸지 않고 줄입니다
PNG는 ZIP 압축과 같은 계열의 DEFLATE 방식을 씁니다. 같은 색이 넓게 이어지는 캡처 화면이나 도표는 매우 잘 줄어듭니다. 하지만 픽셀마다 색이 미묘하게 다른 사진은 반복되는 패턴이 적어 별로 줄어들지 않습니다. 형식에 대한 공식 정의는 W3C의 PNG 명세에서 확인할 수 있습니다.
WEBP: 두 방식을 모두 갖춘 형식입니다
WEBP의 손실 모드는 영상 압축 기술을 바탕으로 주변 블록을 보고 내용을 예측해 저장합니다. 무손실 모드는 별도의 알고리즘을 씁니다. 구글이 공개한 WebP 소개 자료에 따르면, 무손실 WEBP는 PNG보다 약 26% 작고, 손실 WEBP는 같은 SSIM(구조적 유사도) 화질 기준에서 JPG보다 약 25~34% 작습니다. 다만 이는 구글이 정한 조건에서 나온 결과이므로 실제 이미지에서는 차이가 더 크거나 작을 수 있습니다.
파일 크기 예시 계산
가로 4000, 세로 3000픽셀인 사진을 압축하지 않고 저장하면 크기는 다음과 같습니다.
- 픽셀 수: 4,000 × 3,000 = 12,000,000개
- 픽셀당 용량: 빨강·초록·파랑 각 1바이트씩, 총 3바이트
- 비압축 크기: 12,000,000 × 3 = 36,000,000바이트, 약 36MB(약 34.3MiB)
이 사진을 각 형식으로 저장하면 대략 다음과 같은 경향이 나타납니다. 아래 표는 이해를 돕기 위한 예시이며, 실제 크기는 사진 내용과 품질 설정, 사용하는 프로그램에 따라 크게 달라집니다.
| 형식 | 일반 사진(예시 경향) | 화면 캡처(예시 경향) |
|---|---|---|
| JPG | 비압축보다 크게 줄어 수 MB 수준이 흔함 | 크기는 줄지만 글자 주변이 번짐 |
| PNG | 비압축보다 조금 줄어드는 데 그쳐 JPG의 몇 배가 되기도 함 | 작고 선명함 |
| WEBP | 손실 모드로 JPG보다 작아지는 경우가 많음 | 무손실 모드로 PNG보다 작아지는 경우가 많음 |
투명 배경과 움짤 지원 차이
투명도를 단계별로 표현하려면 알파 채널이 필요합니다. PNG와 WEBP는 픽셀마다 투명도를 여러 단계(8비트 기준 256단계)로 저장할 수 있어서 부드러운 그림자나 안티앨리어싱(계단 현상을 줄이려고 가장자리를 반투명하게 섞는 처리)이 자연스럽게 보입니다. JPG는 알파 채널이 없어서 모든 픽셀이 불투명합니다.
움짤의 전통적인 형식은 GIF입니다. GIF는 한 프레임에 최대 256색만 쓸 수 있고, 투명도도 '완전 투명 아니면 불투명' 둘 중 하나뿐입니다. 그래서 사진 같은 움짤은 색이 거칠어지고 가장자리가 계단처럼 보이기 쉽습니다. WEBP 애니메이션은 풀컬러와 반투명을 지원하고 같은 내용이라면 대체로 GIF보다 작습니다.
PNG에도 애니메이션 PNG(APNG)라는 방식이 있습니다. 주요 최신 브라우저는 APNG를 재생하지만, 이를 지원하지 않는 메신저나 이미지 뷰어에서는 첫 장면만 정지 이미지로 보입니다. 메신저나 커뮤니티는 업로드한 움짤을 영상으로 바꾸거나 다시 압축하기도 하는데, 처리 방식은 서비스마다 다릅니다.
어디서나 열리는 형식과 그렇지 않은 형식
JPG와 PNG는 스마트폰, PC, 문서 프로그램, 인쇄 장비 등 사실상 모든 환경에서 열립니다. 상대 환경을 모를 때 이 두 형식을 고르면 문제가 생길 일이 거의 없습니다.
WEBP는 크롬, 엣지, 파이어폭스, 사파리 등 주요 최신 브라우저에서 표시됩니다. 다만 사파리는 다른 브라우저보다 늦게 지원을 시작해서 업데이트하지 않은 오래된 아이폰이나 맥에서는 보이지 않을 수 있습니다. 브라우저 밖에서는 운영체제 기본 뷰어, 문서 작성 프로그램, 이미지 편집 프로그램의 버전에 따라 열리지 않을 수 있습니다. 쇼핑몰이나 기관의 파일 업로드 양식이 JPG·PNG만 받는 경우도 있습니다.
웹페이지에서 이미지를 저장했더니 .webp 파일이 되는 것은 그 사이트가 용량을 줄이려고 WEBP로 이미지를 제공하기 때문입니다. 이 파일을 다른 곳에 올려야 한다면 먼저 JPG나 PNG로 변환해야 합니다.
용도별 이미지 형식 선택표: 사진·캡처·로고·웹·인쇄·메일
| 용도 | 1순위 | 대안 | 피할 형식 | 이유 |
|---|---|---|---|---|
| 스마트폰·카메라 사진 | JPG | WEBP | PNG | PNG는 화질 이득이 거의 없고 용량만 커짐 |
| 화면 캡처, 문서 스크린샷 | PNG | WEBP(무손실) | JPG | JPG는 글자 가장자리가 번짐 |
| 로고, 아이콘, 도장 이미지 | PNG | WEBP, 원본 벡터 파일(SVG 등) | JPG | 투명 배경과 선명한 경계가 필요함 |
| 웹사이트·블로그 게시 | WEBP | 사진은 JPG, 그래픽은 PNG | 사진을 PNG로 올리기 | 용량이 작을수록 페이지가 빨리 열림 |
| 움짤 | WEBP 애니메이션 | GIF(호환성 우선일 때) | APNG(브라우저 외 메신저·커뮤니티에서 지원 불확실) | 색 표현과 용량 모두 유리함 |
| 인쇄 | 고품질 JPG 또는 PNG | PDF(인쇄소 요구 시) | WEBP | 인쇄소 접수 형식에 없을 수 있음. CMYK를 요구하면 PNG는 쓸 수 없음 |
| 메일 첨부, 서류 제출 | 사진은 JPG, 캡처는 PNG | — | WEBP | 받는 쪽 프로그램에서 안 열릴 위험이 있음 |
인쇄할 때는 형식보다 픽셀 수를 먼저 확인합니다
인쇄 품질은 형식보다 해상도의 영향을 더 많이 받습니다. 필요한 픽셀 수는 '인쇄 크기(인치) × 요구 dpi'로 구합니다. dpi는 1인치에 찍히는 점의 수입니다. 이미지 기준으로는 ppi(1인치당 픽셀 수)라고도 하며, 인쇄소에서는 흔히 dpi로 부릅니다. 10×15cm 사진을 300dpi로 뽑는 경우를 계산하면 다음과 같습니다.
- 가로: 15 ÷ 2.54 = 약 5.906인치, 5.906 × 300 = 약 1,772픽셀
- 세로: 10 ÷ 2.54 = 약 3.937인치, 3.937 × 300 = 약 1,181픽셀
300dpi는 흔히 요구되는 값이지만 인쇄소마다 기준과 색상 방식(RGB·CMYK) 요구가 다르므로 접수 안내를 먼저 확인해야 합니다. PNG는 RGB만 지원하므로 인쇄소가 CMYK 파일을 요구하면 CMYK JPG나 PDF로 준비해야 합니다. JPG로 보낼 때는 품질을 최고 수준에 가깝게 설정해 압축 얼룩을 줄이는 편이 좋습니다.
메일 첨부는 용량 한도를 고려합니다
메일 서비스마다 첨부 용량 한도가 다르고, 한도를 넘으면 대용량 첨부(다운로드 링크)로 바뀌기도 합니다. 휴대폰 사진 여러 장을 보낸다면 사진 용량 줄이기 도구로 화질을 조절해 압축하면 한도에 맞추기 쉽습니다.
형식을 바꿀 때 생기는 화질 저하
핵심 원칙은 하나입니다. 한 번 손실 압축으로 버려진 정보는 어떤 형식으로 바꿔도 돌아오지 않습니다.
| 변환 | 화질 변화 | 용량 변화 | 주의할 점 |
|---|---|---|---|
| JPG → PNG | 더 나빠지지도 좋아지지도 않음 | 대개 커짐 | 이미 생긴 번짐이 그대로 보존됨 |
| PNG → JPG | 손실 발생 | 사진은 작아짐 | 투명 배경 사라짐, 글자 번짐 |
| JPG → WEBP(손실) | 손실 한 번 더 추가 | 대개 작아짐 | 품질 값을 너무 낮추지 않기 |
| WEBP(손실) → JPG | 손실 한 번 더 추가 | 비슷하거나 커짐 | 손실을 두 번 거치는 셈 |
| JPG 편집 후 JPG로 다시 저장 | 저장할 때마다 손실 누적 | 비슷함 | 회전만 해도 다시 압축하는 프로그램이 있음 |
| PNG ↔ WEBP(무손실) | 일반적인 8비트 PNG는 변화 없음 | 대개 WEBP가 작음 | 투명도는 유지됨. 16비트 PNG는 8비트로 줄어듦, 변환 도구에 따라 색 프로필이 빠질 수 있음 |
화질 저하를 최소화하는 순서는 다음과 같습니다.
- 원본 파일(카메라 원본, 투명 PNG 등)을 따로 보관합니다.
- 편집하는 동안에는 PNG처럼 무손실 형식으로 중간 저장합니다.
- 최종 용도가 정해지면 원본에서 한 번만 원하는 형식으로 변환합니다.
- 다른 용도가 생기면 변환된 파일이 아니라 원본에서 다시 변환합니다.
여러 장을 한꺼번에 PNG·JPG·WEBP 사이에서 바꿔야 할 때는 이미지 확장자 변환 도구를 쓸 수 있습니다.
투명 배경이 흰색이나 검은색으로 바뀌는 이유와 해결법
JPG에는 투명이라는 개념이 없습니다. 그래서 투명 PNG를 JPG로 바꾸면 변환 프로그램이 투명했던 부분을 어떤 색으로든 채워야 합니다. 흰색으로 채우는 프로그램도 있고, 알파 채널만 버리는 프로그램도 있습니다. 알파 채널만 버리면 투명 픽셀 속에 숨어 있던 색값이 그대로 드러나는데, 이 값이 검정인 경우가 많아서 배경이 까맣게 보입니다.
파일에는 문제가 없는데 검게 보이는 경우도 있습니다. 투명 PNG를 다크 모드 화면이나 어두운 배경의 뷰어로 열면 그 배경색이 투명한 부분으로 비쳐 보이기 때문입니다. 또 로고 가장자리의 반투명 픽셀이 흰 배경에 맞춰 만들어졌다면, 어두운 배경에 올렸을 때 흰 테두리가 남기도 합니다.
로고를 JPG로 내보내야 할 때는 다음 순서로 작업합니다.
- 정말 JPG가 필요한지 확인합니다. 투명 배경이 필요하면 PNG나 WEBP를 그대로 씁니다.
- 이미지가 놓일 실제 배경색(예: 문서의 흰 바탕, 명함의 남색 바탕)을 확인합니다.
- 편집 프로그램에서 그 배경색으로 채운 레이어를 이미지 아래에 깔고 합칩니다. 변환 도구에 배경색 지정 옵션이 있다면 그 옵션을 써도 됩니다.
- 결과물을 실제 배경 위에 놓고 가장자리에 테두리나 얼룩이 없는지 확인합니다.
- 투명 PNG 원본은 지우지 말고 함께 보관합니다.
이미지 형식 고르기 빠른 점검표
- 사진인가요? 일반 용도는 JPG, 웹 게시용은 WEBP를 씁니다.
- 글자, 선, 표, 캡처 화면인가요? PNG를 씁니다.
- 배경이 투명해야 하나요? PNG나 WEBP를 씁니다. JPG는 쓸 수 없습니다.
- 움직이는 이미지인가요? WEBP 애니메이션을 쓰고, 호환성이 우선이면 GIF를 씁니다.
- 받는 사람의 환경을 모르나요? WEBP 대신 JPG나 PNG를 보냅니다.
- 인쇄용인가요? 픽셀 수(인쇄 크기 × dpi)와 접수 형식을 확인하고, CMYK를 요구하면 PNG 대신 CMYK JPG나 PDF를 준비합니다.
- 16비트 PNG를 변환하나요? WEBP·JPG로 바꾸면 8비트가 되므로 원본을 남겨 둡니다.
- 여러 번 편집할 파일인가요? 무손실 형식으로 작업하고 마지막에 한 번만 변환합니다.
자주 묻는 질문
파일 이름의 확장자만 .webp에서 .jpg로 바꾸면 JPG가 되나요?
아닙니다. 확장자는 이름표일 뿐이고 파일 내부의 데이터는 여전히 WEBP입니다. 일부 프로그램은 내용을 보고 열어 주지만, 형식을 엄격하게 검사하는 업로드 양식이나 구형 프로그램에서는 오류가 납니다. 반드시 변환 도구나 편집 프로그램으로 다시 저장해야 합니다.
JPG와 JPEG는 다른 형식인가요?
같은 형식입니다. 예전 운영체제에서 확장자를 세 글자로 제한하던 관습 때문에 .jpg가 널리 쓰였고, .jpeg는 원래 이름을 그대로 쓴 확장자입니다. 둘 중 무엇으로 저장해도 내용과 화질은 같습니다.
아이폰 사진이 HEIC로 저장되는데 JPG와 어떻게 다른가요?
HEIC는 JPG보다 압축 효율이 높은 형식으로, 아이폰 카메라가 고효율 설정일 때 사용합니다. 윈도우 PC나 일부 서비스에서는 별도 지원 없이 열리지 않을 수 있습니다. 호환성이 중요하다면 카메라 설정의 포맷 항목에서 호환성 우선 방식을 고르면 JPG로 저장됩니다. 정확한 메뉴 이름은 iOS 버전에 따라 다를 수 있습니다.
PNG가 JPG보다 항상 화질이 좋은가요?
PNG는 저장할 때 화질을 떨어뜨리지 않을 뿐이고, 원본보다 좋게 만들지는 않습니다. 이미 JPG로 압축된 사진을 PNG로 바꾸면 화질은 그대로인데 용량만 커집니다. 처음부터 무손실 원본에서 저장했을 때만 PNG의 화질상 이점이 있습니다.
웹사이트에 이미지를 올릴 때 WEBP만 써도 되나요?
주요 최신 브라우저는 WEBP를 표시하므로 대부분의 방문자에게는 문제가 없습니다. 다만 매우 오래된 기기를 쓰는 방문자가 많거나, 사용하는 블로그·쇼핑몰 플랫폼이 WEBP 업로드를 받지 않는다면 JPG·PNG를 함께 준비해야 합니다. 플랫폼에 따라 업로드한 이미지를 자동으로 다른 형식으로 바꿔 제공하기도 하므로 사용하는 서비스의 안내를 확인하십시오.