이미지 파일 포맷 총정리 — PNG, JPG, WebP, AVIF, GIF, SVG

모든 이미지 포맷은 파일 크기, 품질, 그리고 투명도나 애니메이션 같은 기능 사이의 맞교환 묶음이다. 잘못 고르면 부풀려진 파일, 흐릿한 텍스트, 혹은 표시되지 않는 그래픽을 얻는다. 흔한 포맷을 하나씩 쉬운 말로 짚고, 손닿는 곳에 둘 수 있는 표를 이어 붙인다.

두 큰 계열

개별 포맷에 앞서, 대부분을 설명해 주는 구분 하나:

• 래스터 이미지는 픽셀의 격자다. 사진은 래스터다. 충분히 확대하면 네모가 보인다. PNG, JPG, WebP, AVIF, GIF는 모두 래스터다.
• 벡터 이미지는 수학이다. 좌표로 정의된 선, 곡선, 도형이다. 어떤 크기로도 흐려지지 않고 확대된다. SVG가 웹의 벡터 포맷이다.

또 하나 핵심 개념은 손실 대 무손실이다. 손실 포맷(JPG, 대개 AVIF/WebP)은 파일을 줄이려고 일부 세부를 버린다. 무손실 포맷(PNG, GIF, 무손실 WebP)은 모든 픽셀을 정확히 지킨다.

포맷을 하나씩

JPG (JPEG) — 사진의 주력. 손실이고, 작고, 말 그대로 어디서나 읽힌다. 투명도 없음, 애니메이션 없음. 반복 재저장하면 서서히 열화된다. 사진, 그리고 최대 호환성이 필요한 곳에 써라.

PNG — 무손실, 투명도 지원. 스크린샷, 로고, 아이콘, 도표 등 텍스트나 뚜렷한 가장자리가 있는 모든 것에 맞는 선택. PNG로 저장한 사진은 크므로 사진에는 쓰지 마라.

WebP — 두 일을 다 하는 최신 포맷. 손실 모드는 크기에서 JPG를 앞서고(약 25~35% 작음), 무손실 모드는 투명도를 지원하며 콤팩트하게 유지된다. 애니메이션도 처리한다. 이제 브라우저에서 보편적으로 지원된다. 웹에 이상적이고, 이메일이나 오래된 소프트웨어엔 덜 그렇다.

AVIF — 여기서 가장 새롭고 최고의 압축기. 비슷한 품질에서 JPEG의 대략 절반 크기이고, 투명도와 HDR을 지원한다. 브라우저는 잘 표시할 수 있지만 캔버스에서 안정적으로 인코딩하지는 못한다. 그래서 브라우저 기반 도구는 AVIF를 요청하면 WebP로 대체한다. 진짜 AVIF 인코딩에는 서버나 네이티브 앱이 필요하다.

GIF — 오래됐고 256색으로 제한되지만, 단순 애니메이션의 고전이다. 짧은 반복을 넘어서는 것은 WebP(또는 동영상)가 더 작고 선명하다. 작은 애니메이션 아이콘엔 괜찮고, 사진엔 형편없다.

SVG — 벡터라서 흐림 없이 무한히 확대되고, 단순 그래픽은 아주 작게 유지된다. 로고, 아이콘, 일러스트에 완벽하다. 픽셀이 아니라 코드이므로 사진을 표현할 수 없다.

비교표

빠르게 고르는 법

• 사진? 호환성엔 JPG, 웹엔 WebP.
• 스크린샷, 로고, 텍스트? PNG(래스터) 또는 SVG(진짜 벡터 그래픽이라면).
• 투명도 필요? PNG, WebP, AVIF, 또는 SVG — 절대 JPG는 아님.
• 애니메이션? 품질과 크기엔 WebP, 레거시 단순함엔 GIF뿐.
• 웹사이트에 게시? 대개 WebP가 현명한 기본값.

서로 변환하기

포맷이 틀렸을 때 고치려고 아무것도 업로드할 필요 없다. 이미지 변환기는 Canvas를 사용해 브라우저 안에서 바로 PNG, JPG, WebP 사이를 전환한다. 계정도 없고, 전송되는 것도 없으며, 첫 방문 이후 오프라인에서 작동한다. 일괄 처리를 지원하고, AVIF를 요청하면 WebP로 대체한다(JPG/PNG보다 작고 어디서나 지원됨). 브라우저가 AVIF를 안정적으로 인코딩하지 못하기 때문이다.

위 표를 염두에 두면 포맷 선택은 더 이상 추측이 아니게 된다. 포맷을 내용(사진 대 그래픽)에, 그다음 목적지(웹, 이메일, 인쇄)에 맞추면 거의 매번 올바르게 고를 것이다.