블로그 썸네일을 만들어서 JPG로 저장했더니 흰색 배경이 생겨서 다시 했습니다. 회사 로고를 PNG로 저장했더니 파일이 너무 크다고 했습니다. 사진을 PNG로 올렸더니 왜 이렇게 무겁냐고 했습니다. 4년 동안 그냥 "대충 PNG가 더 좋은 거 아닌가"라고 생각하며 썼는데, 결국 인쇄소에서 제대로 한 소리 듣고 나서야 공부했습니다.

가장 핵심적인 차이 하나

JPG와 PNG의 차이를 딱 하나로 설명하라면 투명도 지원 여부입니다.

JPG는 투명도를 지원하지 않습니다. JPG로 저장하면 투명한 영역이 흰색(또는 설정에 따라 다른 색)으로 채워집니다. 배경 제거한 로고를 JPG로 저장하면 흰 배경이 생기는 이유가 이겁니다.

PNG는 투명도를 지원합니다. 배경이 없는 이미지를 만들 때, 다른 이미지 위에 올려야 하는 레이어 이미지를 만들 때 PNG를 씁니다.

압축 방식의 차이

이것도 중요합니다. JPG는 손실 압축, PNG는 무손실 압축입니다.

JPG(손실 압축): 사람 눈이 잘 못 느끼는 색상 정보를 선택적으로 버려서 파일을 작게 만듭니다. 한번 저장하면 버린 정보는 복원이 안 됩니다. 다시 편집하고 저장할 때마다 조금씩 더 손상됩니다.

PNG(무손실 압축): 이미지 데이터를 하나도 버리지 않고, 중복 패턴을 묶어서 파일을 작게 만듭니다. 저장을 몇 번을 반복해도 화질이 변하지 않습니다.

용도별 최적 선택

JPG를 써야 하는 경우:

• 풍경 사진, 인물 사진 등 사진류 전반
• 색상이 자연스럽게 변하는 이미지
• 웹 배경 이미지
• 파일 크기를 최소화해야 하는 경우
• 투명도가 필요 없는 경우

사진을 PNG로 저장하면 JPG보다 파일이 3~5배 커지면서 화질 차이는 거의 없습니다. 사진 저장에 PNG를 쓰는 건 낭비입니다.

PNG를 써야 하는 경우:

• 배경을 투명하게 해야 하는 로고, 아이콘
• 텍스트가 포함된 이미지 (선명도 중요)
• 선명한 경계선이 있는 그래픽 작업물
• 스크린샷 (특히 텍스트나 인터페이스 포함)
• 여러 번 편집할 원본 파일

텍스트가 있는 이미지에서 차이가 극명합니다

제가 가장 충격을 받은 건 텍스트 이미지였습니다. 같은 텍스트 이미지를 JPG 품질 80%로 저장하면 글자 주변에 흐릿한 후광 같은 게 생깁니다. 이를 JPEG 아티팩트라고 하는데, 특히 흰 배경에 검정 텍스트에서 두드러집니다.

PNG로 저장한 동일 이미지는 텍스트 경계가 칼같이 선명합니다. 회사 자료나 발표 자료처럼 텍스트가 중요한 이미지라면 PNG가 맞습니다.

WebP는 알아두면 좋습니다

2010년대 중반부터 구글이 밀고 있는 WebP는 JPG와 PNG 둘 다의 장점을 가진 형식입니다.

• JPG처럼 사진 계열에서 작은 파일 크기
• PNG처럼 투명도 지원
• 같은 화질 기준 JPG보다 25~35% 작음

2024년 기준 Chrome, Firefox, Safari, Edge 모두 지원합니다. 웹사이트에 올리는 이미지라면 WebP가 가장 효율적입니다.

단점은 아직 모든 소프트웨어에서 지원하지 않습니다. 포토샵 구버전, 일부 메신저, 오래된 이미지 뷰어에서는 열리지 않을 수 있습니다. 공유 목적이라면 여전히 JPG나 PNG가 안전합니다.

정리

투명 배경 필요하면 PNG, 사진이면 JPG, 웹 최적화면 WebP. 편집을 여러 번 반복해야 하면 PNG로 작업하고 마지막에 JPG로 내보내기. 이 규칙만 기억하면 대부분의 상황에서 올바른 선택을 할 수 있습니다.

인쇄소에서 혼났던 날이 기억납니다. 담당자가 "투명 배경이 있는 로고를 JPG로 주시면 안 되죠"라고 했을 때, 그때 처음으로 이 두 형식의 차이를 제대로 이해했습니다. 좀 더 일찍 알았으면 좋았을 텐데 싶었습니다.