JPG·PNG·WebP 차이와 선택 기준 — 손실과 투명도

사진을 PNG로 저장했더니 파일이 몇 배로 커지고, 로고를 JPG로 저장했더니 투명하던 배경이 흰색으로 채워진 적이 있는 분을 위한 글입니다. 결론부터 말하면 세 포맷의 차이는 취향이 아니라 두 가지 구조적 성질에서 갈립니다.

하나는 저장할 때 정보를 버리는가(손실 압축)이고, 다른 하나는 투명한 픽셀을 담을 수 있는가(알파 채널)입니다. 이 두 축만 알면 사진·로고·스크린샷을 각각 어떤 포맷으로 저장할지 스스로 판단할 수 있습니다.

요약 ① JPG는 손실 압축만 있고 알파 채널이 없습니다 — 색이 부드럽게 이어지는 사진용입니다. ② PNG는 무손실이고 알파 채널이 있습니다 — 경계가 뚜렷한 로고·아이콘·스크린샷용입니다. ③ WebP는 손실·무손실 두 모드를 모두 갖고 두 모드 다 투명도를 지원해, 웹에 올릴 때 기본값으로 쓸 수 있습니다.

세 포맷을 가르는 두 개의 축

포맷을 고르는 기준은 사실상 두 개뿐입니다. 나머지는 여기서 파생됩니다.

손실 압축은 사람 눈이 잘 알아채지 못하는 정보를 실제로 버려서 용량을 줄이는 방식입니다. 한 번 버린 정보는 다시 열어도 돌아오지 않습니다.

무손실 압축은 픽셀 값을 하나도 바꾸지 않고 반복되는 패턴만 짧게 적어 두는 방식입니다. 압축을 풀면 원래 픽셀이 정확히 복원됩니다.

알파 채널은 픽셀마다 "얼마나 비치는가"를 따로 저장하는 네 번째 값입니다. JPG에는 이 자리가 아예 없어서, 투명 배경을 저장할 방법이 없습니다.

사진은 왜 JPG인가

사진은 옆 픽셀과 색이 조금씩만 다른 그림입니다. 하늘의 그라데이션처럼 완전히 똑같은 색이 길게 반복되는 구간은 거의 없습니다.

PNG의 무손실 압축은 "앞 픽셀과 같거나 비슷하다"는 규칙을 찾아 줄이는 방식이라, 반복이 없는 사진에서는 줄일 거리가 별로 없습니다. 그래서 사진을 PNG로 저장하면 용량이 크게 늘어납니다.

JPG는 반대로 그림을 작은 블록으로 나눠 주파수 성분으로 바꾼 뒤(이산 코사인 변환), 눈에 덜 띄는 고주파 성분을 버립니다. 또 많은 인코더가 색 정보를 밝기보다 낮은 해상도로 줄여 저장합니다(크로마 서브샘플링).

사진에서는 이렇게 버린 정보가 잘 보이지 않습니다. 그래서 같은 사진이면 JPG가 훨씬 작아지고, 이것이 카메라와 웹이 사진에 JPG를 쓰는 이유입니다.

로고·스크린샷은 왜 PNG인가

로고·아이콘·스크린샷은 사진과 성질이 정반대입니다. 같은 색 면이 넓게 이어지고, 글자와 선의 경계가 칼같이 떨어집니다.

이런 그림에서는 무손실 압축이 잘 먹힙니다. 반복되는 단색 면을 짧게 적을 수 있고, 색 수가 적으면 PNG의 인덱스 모드(팔레트에 색을 최대 256개까지 등록하는 방식)로 더 줄어듭니다.

반대로 JPG는 경계에서 문제가 생깁니다. 급격한 색 변화는 고주파 성분인데 JPG가 바로 그 부분을 버리기 때문에, 글자 테두리에 얼룩이 번지고 색이 뭉개집니다. 문서 캡처를 JPG로 저장했을 때 글자가 지저분해지는 이유입니다.

여기에 투명도 문제가 겹칩니다. 배경이 비치는 로고가 필요하다면 JPG는 선택지에서 아예 빠집니다.

WebP는 언제 쓰나

WebP는 앞의 두 성질을 한 포맷 안에 모두 담았습니다. 손실 모드와 무손실 모드를 고를 수 있고, 두 모드 모두 알파 채널을 지원합니다.

그래서 웹에 올릴 이미지라면 사진이든 로고든 WebP 하나로 정리할 수 있습니다. 사진은 손실 모드, 로고·스크린샷은 무손실 모드로 저장하면 됩니다.

다만 손실 WebP에도 같은 한계가 있습니다. 손실 WebP는 규격상 8비트 Y'CbCr 4:2:0 형식만 사용하므로, 색 정보가 가로·세로 각각 절반 해상도로 줄어 저장됩니다.

글자가 많은 이미지를 손실 WebP로 저장하면 JPG와 비슷하게 경계가 흐려집니다.

브라우저 지원은 이제 걸림돌이 아닙니다. 마지막까지 남아 있던 Safari가 14(2020년, macOS Big Sur)부터 WebP를 표시합니다.

한 가지 규격상 제한은 있습니다. WebP 이미지의 최대 크기는 가로세로 각각 16383픽셀입니다.

고르는 순서

세 포맷을 놓고 고민할 필요 없이, 위에서부터 순서대로 답하면 하나가 남습니다.

1. 투명한 배경이 필요한가? 필요하면 JPG는 탈락입니다. PNG 또는 WebP가 남습니다.
2. 글자·선·단색 면이 주된 그림인가? 그렇다면 무손실이 맞습니다. PNG, 또는 무손실 WebP를 씁니다.
3. 사진처럼 색이 부드럽게 이어지는가? 그렇다면 손실이 맞습니다. JPG 또는 손실 WebP를 씁니다.
4. 웹 페이지에 올리는가, 파일로 건네주는가? 웹이면 WebP, 파일로 주고받는다면 받는 쪽이 확실히 여는 JPG·PNG가 안전합니다.

도구 없이 직접 확인하는 방법

포맷 선택은 결국 "이 그림에서 어느 쪽이 더 작은가"로 검산할 수 있습니다. 특별한 프로그램 없이 확인하는 순서입니다.

1단계 — 지금 파일이 실제로 무슨 포맷인지 봅니다

확장자는 이름일 뿐이라 .jpg 를 .png 로 바꿔도 내용은 그대로입니다. macOS는 파일 우클릭 후 '정보 가져오기', 윈도우는 '속성'에서 실제 종류를 확인합니다.

2단계 — 투명 영역이 있는지 봅니다

이미지 뷰어나 편집기에서 배경이 회색 격자무늬로 보이면 알파 채널이 있는 파일입니다. 흰색으로 보인다면 그건 투명이 아니라 흰색 픽셀입니다.

3단계 — 같은 그림을 두 포맷으로 저장해 용량을 비교합니다

macOS는 미리보기에서 파일 → 내보내기, 윈도우는 그림판에서 다른 이름으로 저장을 쓰면 JPG와 PNG로 각각 저장할 수 있습니다. 저장한 뒤 파일 크기를 나란히 놓고 보면 답이 나옵니다.

다만 저장 형식 목록에 WebP가 없는 경우가 많습니다. 목록에 안 보인다면 WebP 비교는 아래 콘솔 방법이나 브라우저에서 변환하는 도구를 씁니다.

브라우저 개발자 도구(대개 F12) 콘솔로도 같은 비교를 할 수 있습니다. 페이지에 이미 떠 있는 이미지 하나를 골라 아래를 붙여 넣으면 됩니다.

const img = document.images[0];
const c = document.createElement("canvas");
c.width = img.naturalWidth;
c.height = img.naturalHeight;
c.getContext("2d").drawImage(img, 0, 0);
["image/jpeg", "image/webp", "image/png"].forEach((type) =>
  c.toBlob((b) => console.log(type, b.size), type, 0.7)
);

콘솔에 포맷 이름과 바이트 수가 한 줄씩 찍힙니다. 변환이 비동기라 찍히는 순서는 뒤바뀔 수 있으니 숫자 앞의 포맷 이름을 보고 읽습니다. PNG는 무손실이라 뒤의 품질 값(0.7)이 적용되지 않습니다.

다른 사이트에서 불러온 이미지는 보안 제한에 걸리므로, 같은 사이트의 이미지로 시험해야 합니다.

4단계 — 400% 확대해 경계를 봅니다

글자나 로고 테두리 주변에 없던 얼룩·번짐이 보이면 손실 압축이 들어간 파일입니다. 이 그림은 무손실로 저장해야 하는 그림입니다.

저희 도구로 확인하기. 이미지를 끌어다 놓으면 원본 용량과 압축 후 용량, 절감 비율이 한 줄로 나오고, 품질 슬라이더와 JPG·WebP 버튼으로 같은 그림을 두 포맷으로 곧바로 비교할 수 있습니다.

직접 해보기 →

자주 막히는 지점

가장 많이 되돌릴 수 없는 실수는 두 번째 줄입니다. JPG는 열어서 다시 저장할 때마다 새로 손실이 얹히기 때문에, 원본을 여러 번 편집·저장하면 조금씩 뭉개집니다.

편집 중인 작업 파일은 무손실 포맷으로 두고, 마지막에 한 번만 JPG로 내보내는 편이 안전합니다.

정리

• 포맷 선택은 손실 여부와 투명도 지원이라는 두 축으로 결정됩니다.
• JPG는 손실만 지원하고 알파 채널이 없어, 색이 부드럽게 이어지는 사진에 맞습니다.
• PNG는 무손실이고 알파 채널이 있어, 글자·선·단색 면이 많은 로고와 스크린샷에 맞습니다.
• WebP는 손실·무손실 두 모드와 투명도를 모두 갖춰 웹 배포에 적합하며, 최대 크기는 16383×16383픽셀입니다.
• 손실 WebP도 색 정보를 줄여 저장하므로, 글자가 많은 이미지는 무손실 쪽을 고릅니다.
• 확신이 안 서면 같은 그림을 두 포맷으로 저장해 용량과 확대 화면을 직접 비교하면 됩니다.

자주 묻는 질문

투명한 PNG를 JPG로 바꿨더니 배경이 흰색이 됐습니다

JPG에는 알파 채널이 없어서 투명한 픽셀을 담을 자리 자체가 없습니다. 그래서 변환할 때 투명 영역을 단색으로 메운 뒤 저장합니다.

이 도구도 JPG를 고르면 캔버스를 흰색으로 먼저 칠한 다음 저장하므로 투명 배경이 흰색이 됩니다. 투명도를 유지해야 한다면 PNG를 그대로 두거나, 이 도구의 WebP 버튼을 고르면 됩니다.

사진을 PNG로 저장하면 화질이 더 좋아지나요?

아닙니다. 무손실은 "지금 가지고 있는 픽셀을 그대로 보존한다"는 뜻이지 "화질을 올린다"는 뜻이 아닙니다. 이미 JPG로 저장된 사진을 PNG로 바꾸면 앞서 버려진 정보는 돌아오지 않고, 용량만 늘어납니다.

다만 앞으로 여러 번 편집할 작업 파일이라면, 손실이 더 쌓이지 않게 무손실로 두는 의미는 있습니다.

WebP를 지금 써도 문제가 없나요?

브라우저에 표시하는 용도라면 문제없습니다. 마지막까지 지원하지 않던 Safari가 14(2020년, macOS Big Sur)부터 WebP를 표시합니다.

다만 웹 밖으로 나가는 파일 — 메신저 첨부, 문서 삽입, 인쇄용 입고 — 은 받는 쪽 프로그램이 열지 못할 수 있으니 JPG나 PNG로 보내는 편이 안전합니다.

압축한 이미지가 서버로 올라가나요?

아니요. 이 도구는 브라우저 안에서 이미지를 캔버스에 그린 뒤 다시 인코딩하는 방식이라, 파일이 서버로 전송되거나 저장되지 않습니다.

대신 다시 인코딩하는 과정이라 촬영 정보(EXIF) 같은 부가 데이터는 결과 파일에 남지 않습니다. 위치 정보가 담긴 사진을 공유하기 전이라면 이 점이 오히려 도움이 됩니다.