이미지

JPG, PNG, WEBP 차이: 언제 어떤 이미지 형식을 써야 할까

같은 사진인데 JPG는 300KB, PNG는 2MB. 왜 이렇게 다를까요? 이미지 형식마다 잘하는 일이 다르기 때문이에요. 상황별로 무엇을 고르면 되는지 정리했어요.

한눈에 보는 이미지 형식

형식압축 방식투명 배경잘 맞는 곳
JPG손실 압축✗사진, 제출용 이미지, 이메일
PNG무손실 압축✓로고, 아이콘, 캡처 화면, 글자가 많은 이미지
WEBP손실·무손실 둘 다✓웹사이트, 블로그, 쇼핑몰 상세페이지
GIF256색 제한✓ (반투명 ✗)짧은 움짤 (요즘은 영상이 더 효율적)
SVG벡터✓로고, 아이콘, 도형 위주 그림

손실 압축과 무손실 압축

JPG는 사람 눈이 잘 알아채지 못하는 미세한 색 변화를 덜어 내서 용량을 줄여요. 이걸 손실 압축이라고 해요. 사진처럼 색이 자연스럽게 변하는 그림에서는 원본과 구별하기 어려울 만큼 작게 줄일 수 있지만, 저장할 때마다 조금씩 정보가 사라져요. 같은 JPG를 열고 저장하기를 여러 번 반복하면 화질이 점점 나빠지는 이유예요.

PNG는 정보를 하나도 버리지 않는 무손실 압축이에요. 같은 색이 넓게 이어진 로고나 캡처 화면은 아주 작게 줄어들지만, 색이 복잡한 사진은 줄일 여지가 적어 용량이 커져요.

그래서 이런 일이 생겨요. 글자가 많은 캡처 화면을 JPG로 저장하면 글자 주변에 얼룩(노이즈)이 생겨요. 반대로 휴대폰 사진을 PNG로 저장하면 용량이 몇 배로 커져요. 형식을 거꾸로 고른 거예요.

상황별 추천

블로그·쇼핑몰에 사진 올릴 때 → WEBP나 JPG. WEBP는 같은 화질의 JPG보다 25~35% 작아서 페이지가 빨리 열려요. 네이버 블로그나 일부 쇼핑몰 관리자처럼 WEBP를 받지 않는 곳이라면 JPG를 쓰세요.

로고를 홈페이지에 넣을 때 → SVG가 가장 좋고, 없으면 PNG. 배경이 투명해야 어떤 색 배경 위에도 자연스럽게 올라가요.

업무용 캡처 화면 → PNG. 글자가 또렷하게 남아요.

관공서·회사 제출 → JPG. 거의 모든 시스템이 받아요. 투명 배경 PNG를 JPG로 바꾸면 투명했던 부분은 흰색으로 채워져요.

인쇄용 → 원본 해상도의 JPG(화질 최상) 또는 PNG, 로고는 벡터(AI, EPS, PDF).

형식을 바꾸는 방법

이미지 형식 변환에 파일을 여러 장 넣고 바꿀 형식만 고르면 돼요. JPG와 WEBP는 화질을 정할 수 있는데, 기본값 92%면 눈으로 원본과 구별하기 어려워요. 용량을 더 줄이고 싶다면 이미지 용량 줄이기에서 크기 줄이기와 압축을 함께 하는 게 훨씬 효과적이에요.

자주 하는 오해

"PNG로 바꾸면 화질이 좋아진다?" — 아니에요. 이미 JPG로 저장되며 사라진 정보는 돌아오지 않아요. PNG로 바꾸면 '더 나빠지지 않을' 뿐이에요.

"해상도(DPI)를 300으로 바꾸면 인쇄 품질이 좋아진다?" — DPI는 '1인치에 몇 픽셀을 찍을지'라는 표시일 뿐, 픽셀 수가 그대로면 실제 선명도는 같아요. 인쇄 품질은 가로·세로 픽셀 수가 결정해요. A4(21×29.7cm)를 300DPI로 인쇄하려면 약 2,480×3,508픽셀이 필요해요.

자주 묻는 질문

AVIF라는 형식도 있던데요?

AVIF는 WEBP보다도 용량이 더 작은 최신 형식이에요. 최신 크롬·엣지·사파리·파이어폭스는 볼 수 있지만, 이미지 편집 프로그램이나 업로드 시스템 중에는 아직 못 읽는 곳이 많아요. 웹사이트에 쓰기엔 좋지만, 남에게 파일로 주는 용도라면 JPG가 여전히 가장 안전해요.

투명 배경 PNG를 JPG로 바꾸면 어떻게 돼요?

JPG는 투명을 표현할 수 없어서 투명했던 부분이 한 가지 색으로 채워져요. 기본은 흰색이고, 이미지 형식 변환에서 원하는 색으로 바꿀 수 있어요. 로고처럼 배경이 비어 있어야 하는 이미지는 JPG로 바꾸지 마세요.

GIF 움짤을 가볍게 만들 수 있나요?

GIF는 256색 제한 때문에 용량 대비 화질이 좋지 않아요. 몇 초짜리 움직이는 이미지는 MP4 영상이나 움직이는 WEBP로 만드는 게 훨씬 작고 선명해요.

정리

이럴 땐이 형식
사진을 어디든 보내야 할 때JPG
로고·캡처·투명 배경PNG (로고는 가능하면 SVG)
내 웹사이트·블로그WEBP
인쇄소에 로고 전달AI·EPS·PDF (벡터)

글쓴이 · 손끝공방 운영자

컴퓨터로 일하며 매번 검색하던 자잘한 작업들을 직접 도구로 만들어 쓰기 시작했습니다. 손끝공방의 모든 도구는 직접 써 보고 다듬은 뒤 올리고, 가이드 글은 실제로 겪은 문제를 바탕으로 씁니다.