JPG vs PNG vs WebP vs AVIF: 어떤 포맷을 언제 써야 할까

네 글자, 네 약속. JPG는 사진의 단골, PNG는 그래픽의 철벽,WebP는 현대의 올라운더, AVIF는 가장 작은 파일을 만드는 신세대. 잘못 매칭하면 파일이 불어나고, 눈에 보이는 노이즈가 생기고, 업로드가 실패합니다.

이 글에서는 각 포맷을 1분 안에 설명하고, 브라우저에서의 지원 범위까지 정리합니다. 더 깊은 압축 메커니즘은품질 손실 없이 압축하는 방법에서 다루고 있습니다.

JPG – 사진의 클래식

JPG(정식 명칭 JPEG)는 1992년에 표준화되어 지금까지 웹 이미지의 3분의 1을 맡고 있습니다. 작동 방식은 단순합니다. 이미지를 8×8 블록으로 나누고, 각 블록에 이산 코사인 변환을 적용한 뒤 결과를 거칠게 양자화합니다. 고주파(세밀한 디테일)는 더 강하게, 저주파(형태)는 약하게 반올림되며, 사람의 시각이 후자에 더 민감하기 때문에 사진에서는 자연스럽게 잘 줄어듭니다.

단점 두 가지. 투명도를 지원하지 않고 비가역이라는 점입니다. 여러 번 저장하면 조금씩 열화합니다. 반면 거의 모든 브라우저, 카메라, CMS가 열어줍니다. mozjpeg 같은 최신 인코더는 같은 시각 품질에서 옛 라이브러리보다 10~20% 더 작게 만듭니다.

적합한 용도: 사진, 히어로 이미지, 그라데이션이 있는 큰 웹 그래픽.

적합하지 않은 용도: 로고, 스크린샷, 아이콘처럼 모서리나 텍스트가 있는 이미지.

PNG – 무손실이고 투명하다

PNG는 무손실 압축의 대명사로서 JPG의 대안으로 만들어졌습니다. 정보를 버리는 대신 冗長성을 제거합니다. 각 줄에서 이웃 픽셀로부터 현재 픽셀을 예측하고(Sub, Up, Average, Paeth), 작은 차이만 저장한 뒤 마지막에 ZIP과 같은 deflate로 한 번 더 압축합니다.

결과적으로 플랫한 색 UI 스크린샷은 원본의 몇 % 수준으로 줄어들고, 투명도가 있는 로고도 모서리가 선명하게 유지됩니다. 단점은 사진처럼 본질적으로 冗長성이 낮은 콘텐츠에서는 JPG보다 5~10배 커지는 일이 흔하다는 점입니다.

적합한 용도: 로고, UI 스크린샷, 아이콘, 투명 배경 이미지.

적합하지 않은 용도: 사진, 투명도가 필요 없는 큰 배너 이미지.

WebP – 현대의 올라운더

WebP는 2010년 구글이 공개했고, 비가역과 무손실을 모두 지원합니다. 비가역 모드는 VP8의 인트라 예측을 써서 블록을 이웃 정보로 추측하고 차분만 부호화하며, 같은 인지도에서 JPG보다 25~35%, 무손실 모드는 PNG보다 20~30% 더 작습니다.

브라우저 지원은 이미 충분합니다. Chrome, Firefox, Safari, Edge 모두 문제없이 엽니다. 구식 클라이언트(일부 메일러 등)를 노린다면 JPG/PNG 폴백을 제공하면 됩니다. 투명, 애니메이션, 알파 채널까지 지원해서 사실상 JPG와 PNG의 후손입니다.

AVIF – 가장 작은 신세대

AVIF는 스트리밍 4K 영상에 쓰이는 AV1 비디오 코덱을 정지 화상에 적용한 것입니다. 같은 시각 품질에서 JPG보다 40~50% 작고, 무손실 모드에서는 무손실 WebP마저 능가합니다.

단점은 인코딩 시간이 길고, 구식 도구(일부 CMS, 특정 이미지 편집기)는 아직 안정적으로 열지 못한다는 점입니다. Safari는 16 버전부터 지원하기 시작했기에, 일부 방문자는 JPG 폴백이 필요합니다. 그럼에도 일반 웹 배포에서는 매력적인 선택이고, WebP 대비 바이트 이득은 모든 Core Web Vitals 측정에서 분명하게 드러납니다.

어떤 포맷을 언제 쓸까

경험칙은 이렇습니다. 사진인가? 비가역. WebP나 AVIF가 현재 표준이고, JPG는 구식 클라이언트용 폴백입니다. 에지나 투명도가 있는 그래픽인가? 무손실.PNG 또는 무손실 WebP. 애니메이션? 짧은 루프는 WebP, 수 초 이상은 MP4. 망설여지면 직접 시도해 보는 게 정답입니다.ImagElite의 변환 도구는 파일 크기와 미리보기를 나란히 보여주므로, 어떤 포맷이 내 자료에 잘 맞는지 시각적으로 결정할 수 있습니다. 모두 브라우저에서 동작하므로 이미지가 기기 밖으로 나가지 않습니다.