이미지·디자인게시일 수정일 읽는 시간 약 8분

PNG·JPEG·WebP의 차이와 용도별 사용법|이미지 형식 변환의 기본

같은 이미지라도 저장 형식만 바꾸면 파일 크기가 몇 분의 일로 줄어들 때가 있습니다. PNG·JPEG·WebP 각각의 성격과 헷갈릴 때 고르는 법, 변환할 때 잃게 되는 것을 정리했습니다.

세 가지 형식의 성격

PNGJPEGWebP
압축 방식무손실(열화 없음)손실(열화 있음)무손실·손실 모두 지원
투명지원미지원지원
잘 맞는 이미지도표·로고·스크린숏사진·그러데이션둘 다
파일 크기큰 편작음작음
지원 환경거의 모든 곳거의 모든 곳주요 브라우저는 지원

차이의 핵심은 "무손실인가 손실인가"와 "투명을 지원하는가" 두 가지입니다. PNG는 정보를 전혀 버리지 않고 압축하므로 화질은 완벽하지만 그만큼 사진은 용량이 커집니다. JPEG는 사람 눈에 잘 띄지 않는 정보를 버려서 작게 만들기 때문에 사진에는 매우 효율적이지만, 윤곽이 뚜렷한 도표나 글자에서는 노이즈(모스키토 노이즈)가 눈에 띕니다.

헷갈릴 때 고르는 법

  • 투명이 필요하다 → PNG 또는 WebP(JPEG는 고를 수 없음)
  • 사진이고 아무튼 가볍게 하고 싶다 → WebP, 다음으로 JPEG
  • 글자가 있는 로고·도표·스크린숏 → PNG 또는 WebP 무손실
  • 받는 쪽 환경이 오래됐거나 모른다(인쇄소 입고, 사내의 오래된 업무 시스템 등) → PNG 또는 JPEG
  • 웹사이트에 올릴 이미지 → WebP를 첫 번째 후보로

WebP는 주요 브라우저에서 지원하므로 웹 게시용으로는 기본적으로 첫 번째 후보가 됩니다. 반면 상대방의 앱이나 시스템에 불러오게 할 때는 아직 지원하지 않는 경우가 남아 있습니다. "웹에 올린다면 WebP, 파일로 건넨다면 PNG/JPEG"로 기억해 두면 헷갈리지 않습니다.

품질 설정은 어느 정도가 적당할까

JPEG와 WebP에는 품질(quality) 설정이 있습니다. 100에 가까울수록 열화가 적고, 낮출수록 가벼워집니다. 실용적인 기준은 다음과 같습니다.

품질보이는 정도잘 맞는 용도
95~100거의 열화 없음. 용량 절감 효과는 작음인쇄용, 소재의 중간 저장
80~90확대하지 않으면 모를 정도웹 게시의 표준 설정
60~75평평한 부분에 노이즈가 보이기 시작함섬네일, 목록 표시용
60 미만열화가 확실히 보임가벼움을 극단적으로 우선할 때만

브라우저에서 변환하는 순서

  1. 1

    이미지 선택하기

    PNG, JPEG, WebP 등 가지고 있는 이미지 파일을 고릅니다. 스마트폰 사진도 그대로 쓸 수 있습니다.

  2. 2

    변환할 형식 고르기

    PNG·JPEG·WebP 중에서 고릅니다. 위의 사용법을 참고하세요.

  3. 3

    품질 조정하기

    JPEG와 WebP에서는 품질 슬라이더를 쓸 수 있습니다. PNG는 무손실 압축이라 품질 설정이 없습니다.

  4. 4

    변환 전후 용량을 비교하고 내려받기

    변환 후 파일 크기와 줄어든 양이 표시됩니다. 기대한 효과가 나오지 않았다면 형식이나 품질을 바꿔 다시 시도하세요.

변환 처리는 모두 브라우저 안에서 이루어지므로 이미지가 서버에 업로드되지 않습니다.

변환할 때 주의할 점

  • JPEG로 변환하면 투명이 사라집니다. 투명했던 부분은 흰색으로 채워지므로 투명을 남기고 싶다면 PNG나 WebP를 고르세요.
  • 손실 압축은 되돌릴 수 없습니다. JPEG→PNG로 변환해도 잃어버린 정보는 복원되지 않고 용량만 늘어납니다.
  • 재압축을 반복하면 열화가 쌓입니다. 편집 중간 파일은 PNG 등 무손실 형식으로 저장하고, 내보내기의 마지막 단계에서 손실 형식으로 변환하는 것이 기본입니다.
  • 원본 이미지는 반드시 남겨 두세요. 나중에 다른 형식·다른 품질로 다시 내보낼 수 있습니다.

"PNG로 하면 고화질이 된다"는 오해가 흔합니다. PNG는 화질을 떨어뜨리지 않는 형식이지, 이미 열화된 이미지를 회복시키는 형식이 아닙니다. 화질을 높이고 싶다면 변환이 아니라 원본 데이터로 돌아가야 합니다.

AVIF·HEIC·GIF·SVG는 어떻게 자리매김할까

받는 이미지가 PNG·JPEG·WebP만 있는 것은 아닙니다. iPhone으로 찍으면 HEIC, 웹에서 저장하면 AVIF인 경우가 늘고 있습니다. 각각 "무엇을 위해 만들어진 형식인지"를 알아 두면 변환할지 말지를 빨리 판단할 수 있습니다.

형식주로 어디서 오는가강점걸려 넘어지기 쉬운 점
AVIF웹사이트에서 저장같은 모습에서 가장 가벼움아직 지원하지 않는 앱이 많음
HEICiPhone·iPad 사진JPEG보다 고화질이고 가벼움Windows나 오래된 소프트웨어에서 안 열림
GIF배포 소재·애니메이션짧은 애니메이션을 파일 하나로 다룰 수 있음색이 256색까지라 사진에는 맞지 않음
SVG로고·아이콘 원본 데이터확대해도 윤곽이 무너지지 않음사진에는 쓸 수 없음

AVIF가 열리지 않을 때의 변환 순서는 AVIF 형식 다루는 법, iPhone의 HEIC를 Windows에서 열리게 하는 순서는 HEIC를 JPEG로 변환하는 방법, WebP가 열리지 않을 때의 원인 찾기는 WebP가 열리지 않을 때의 대처법에 정리했습니다. 로고용 SVG만은 원리가 근본적으로 다르므로 SVG와 PNG·JPEG의 차이에서 따로 다룹니다.

변환해도 용량이 줄지 않을 때 볼 곳

형식을 바꿨는데 거의 가벼워지지 않았다는 고민은 흔합니다. 원인은 형식이 아니라 이미지 자체의 크기나 내용에 있는 경우가 대부분입니다.

  • 픽셀 수가 너무 크다: 4000px 너비의 사진을 그대로 올리고 있다. 표시에 필요한 너비까지 줄이는 편이 효과가 훨씬 크다
  • 사진을 PNG로 저장했다: 사진은 정보량이 많아 무손실 압축으로는 줄지 않는다. JPEG나 WebP로 바꾸기
  • 도표나 스크린숏을 JPEG로 저장했다: 평평한 면이 많은 이미지는 PNG가 더 작아질 때가 있다
  • 이미 압축된 이미지를 다시 압축하고 있다: 줄일 여지가 남아 있지 않다

자주 묻는 질문

PNG와 JPEG 중 무엇을 써야 하나요?
사진이라면 JPEG, 로고나 도표, 스크린숏처럼 윤곽이 뚜렷한 이미지나 투명이 필요한 이미지라면 PNG가 알맞습니다. JPEG는 손실 압축이라 글자나 가는 선이 있으면 노이즈가 눈에 띕니다.
WebP로 변환하면 얼마나 가벼워지나요?
이미지 내용에 따라 다르지만, 비슷한 화질에서 JPEG보다 20~30% 정도 작아지는 사례가 많이 보고되어 있습니다. 다만 효과는 이미지마다 차이가 크므로 실제로 변환해 용량을 비교하는 것이 확실합니다.
변환하면 화질이 떨어지나요?
PNG로의 변환은 무손실 압축이라 그 과정에서 열화는 없습니다. JPEG나 WebP의 손실 설정에서는 품질 설정값에 따라 열화됩니다. 품질 85 전후라면 보통 볼 때 차이를 거의 느끼지 못합니다.
이미지 형식 변환 도구에 이미지가 업로드되나요?
업로드되지 않습니다. 변환 처리는 모두 브라우저 안에서 이루어지며 이미지 파일이 서버로 전송되지 않습니다.
투명을 유지한 채 파일을 가볍게 하려면?
WebP를 고르세요. WebP는 투명을 지원하면서 손실 압축도 걸 수 있어 투명 PNG보다 크게 가벼워질 수 있습니다. 제출처가 WebP를 지원하지 않는다면 투명 PNG 그대로 픽셀 수를 줄이는 것이 현실적입니다.
AVIF로 변환하는 편이 좋을까요?
자신의 웹사이트에 올릴 이미지라면 유력한 선택지입니다. 반면 상대에게 파일로 건네는 용도라면 아직 열리지 않는 환경이 남아 있으니 피하는 편이 무난합니다. 받을 사람이 정해지지 않았을 때는 JPEG나 PNG가 안전합니다.

이 글에서 소개한 도구

함께 읽으면 좋은 글