웹 이미지 포맷 고르기 — PNG·JPG·WebP·AVIF는 무엇이 다른가

이미지2026년 9월 8일

스크린샷을 JPG로 저장했더니 글자가 뭉개졌다

같은 이미지를 어떤 포맷으로 저장하느냐에 따라 결과가 크게 달라집니다. 사진을 PNG로 저장하면 용량이 열 배로 뛰고, 스크린샷을 JPG로 저장하면 글자 가장자리에 얼룩이 낍니다.

포맷을 외워서 고르는 대신 각 포맷이 어떻게 압축하는지 알면 판단이 쉬워집니다. 압축 방식이 곧 그 포맷이 잘하는 일과 못하는 일을 정합니다.

손실과 무손실 — 가장 큰 갈림길

포맷을 가르는 첫 번째 기준입니다.

• 무손실(lossless) — 원본 데이터를 한 비트도 잃지 않습니다. 저장하고 다시 열어도 픽셀 값이 그대로입니다. PNG, GIF
• 손실(lossy) — 사람 눈이 잘 알아채지 못하는 정보를 버려서 용량을 줄입니다. 한 번 버린 정보는 되돌릴 수 없습니다. JPG

WebP와 AVIF는 두 방식을 모두 지원합니다.

손실 압축에서 중요한 성질이 하나 있습니다. 저장할 때마다 다시 나빠집니다. JPG를 열어서 편집하고 다시 JPG로 저장하면 화질이 또 한 단계 떨어집니다. 원본은 무손실로 보관하고, 최종 결과물만 손실 포맷으로 내보내는 것이 안전합니다.

JPG — 사진을 위해 설계된 포맷

JPG는 1992년에 나온 포맷인데 아직도 널리 쓰입니다. 사진에 최적화된 방식으로 압축하기 때문입니다.

압축 과정을 아주 줄여서 설명하면 이렇습니다.

1. 이미지를 8×8 픽셀 블록으로 나눕니다
2. 각 블록에서 색을 밝기와 색상 정보로 분리합니다
3. 색상 정보를 절반 이하로 줄입니다 — 사람 눈은 밝기 변화에는 민감하지만 색 변화에는 둔합니다
4. 블록 안의 완만한 변화는 남기고 급격한 변화는 버립니다

마지막 단계가 핵심입니다. 사진에서는 색이 대체로 완만하게 변하므로 버려도 티가 잘 나지 않습니다. 하지만 글자나 선처럼 급격히 변하는 경계는 그 정보가 바로 사라집니다.

그래서 JPG의 강점과 약점이 갈립니다.

투명을 지원하지 않는다는 점도 자주 걸립니다. 투명한 PNG를 JPG로 바꾸면 투명했던 부분이 검게 나옵니다. 변환할 때 흰 배경을 먼저 깔아야 합니다. (아래 이미지 포맷 변환기는 JPG로 내보낼 때 흰 배경을 자동으로 깔아 줍니다.)

블록 단위로 처리하기 때문에 품질을 낮추면 8×8 격자 무늬가 보이기 시작합니다. 하늘이나 피부처럼 색이 완만한 부분에서 먼저 나타납니다.

PNG — 한 픽셀도 잃지 않는 포맷

PNG는 무손실입니다. 압축 방식도 다릅니다. 같은 색이 반복되는 구간을 묶어서 줄입니다. 사진처럼 픽셀마다 색이 다른 이미지에서는 묶을 것이 없어 효과가 적고, 색 수가 적은 이미지에서는 크게 줄어듭니다.

여기서 PNG의 성격이 나옵니다.

• 색이 적을수록 작아집니다. 단색 배경의 로고나 아이콘은 아주 작아집니다
• 사진에서는 커집니다. 같은 사진이 JPG의 5~10배가 되는 일이 흔합니다
• 투명을 지원합니다. 그것도 256단계의 반투명까지

정리하면 PNG는 글자·선·색 경계가 중요한 이미지를 위한 포맷입니다. 스크린샷, UI 캡처, 도표, 아이콘이 여기 해당합니다.

WebP — 두 방식을 모두 갖춘 대체재

구글이 2010년에 내놓은 포맷입니다. 손실과 무손실을 모두 지원하고, 투명도 지원하며, 애니메이션도 됩니다. 사실상 JPG·PNG·GIF를 한꺼번에 대체하려고 만든 것입니다.

발표된 수치로는 같은 화질에서 JPG보다 25~35% 정도 작습니다. 무손실 모드에서는 PNG보다 25% 안팎 작습니다. 실제 이미지에 따라 편차가 있지만, 줄어드는 방향인 것은 대체로 맞습니다.

지금 시점에서 웹에 올릴 이미지의 기본값으로 삼기에 무리가 없습니다. 주요 브라우저가 모두 지원한 지 오래됐습니다.

다만 웹 밖으로 나가면 이야기가 다릅니다.

• 이메일에 넣는 이미지 — 오래된 메일 클라이언트가 표시하지 못할 수 있습니다
• 파일로 전달하는 이미지 — 상대방의 이미지 뷰어나 편집 프로그램이 못 열 수 있습니다
• 오래된 시스템에 올리는 이미지 — 업로드 자체가 막히는 경우가 있습니다

이럴 때는 JPG나 PNG가 안전합니다.

AVIF — 더 작지만 아직 기본값은 아니다

AV1 영상 코덱에서 파생된 포맷입니다. 압축률이 가장 좋습니다. 조건에 따라 다르지만 JPG의 절반 안팎까지 줄어드는 경우가 보고됩니다. 넓은 색 영역과 HDR도 지원합니다.

그런데 아직 기본으로 삼기에는 걸리는 점들이 있습니다.

• 인코딩이 느립니다. 같은 이미지를 JPG로 저장하는 것보다 훨씬 오래 걸립니다. 이미지를 대량으로 처리하는 서버에서는 부담이 됩니다
• 만드는 도구가 제한적입니다. 브라우저에서 AVIF로 저장하는 기능은 지원이 고르지 않아, 되는 것처럼 보이다가 다른 포맷이 나오기도 합니다
• 작은 이미지에서는 이점이 적습니다. 헤더 부담 때문에 아이콘처럼 작은 파일에서는 오히려 WebP가 나을 수 있습니다

지금은 큰 히어로 이미지처럼 용량 절감 효과가 큰 곳에 골라서 쓰고, 나머지는 WebP로 두는 방식이 현실적입니다. <picture>로 AVIF를 먼저 제시하고 WebP를 대체로 두면 지원하는 브라우저만 AVIF를 받아갑니다.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="설명">
</picture>

그 밖의 포맷

GIF — 256색까지만 표현합니다. 사진에는 부적합하고, 지금은 애니메이션 용도로만 남아 있습니다. 그마저도 같은 길이의 동영상(MP4·WebM)이 훨씬 작아서, 움직임이 필요하면 영상을 쓰는 편이 낫습니다.

SVG — 다른 범주입니다. 픽셀이 아니라 그리는 방법을 적어 둔 벡터 형식이라 아무리 확대해도 깨지지 않습니다. 아이콘·로고·도형에 쓰고, 사진에는 쓸 수 없습니다. 텍스트 파일이라 CSS로 색을 바꿀 수도 있습니다.

HEIC — 아이폰이 기본으로 쓰는 형식입니다. 압축률은 좋지만 웹에서는 사파리를 빼면 표시되지 않습니다. 아이폰 사진을 웹에 쓸 거라면 변환이 필요하고, 애초에 설정 → 카메라 → 포맷 → 높은 호환성으로 바꿔 두면 JPG로 촬영됩니다.

실무에서 고르는 순서

외울 것은 많지 않습니다. 두 가지만 순서대로 물어보면 됩니다.

1. 이 이미지에 글자나 뚜렷한 선이 있는가?

있다면 → PNG (또는 WebP 무손실). 스크린샷, 도표, UI 캡처, 아이콘. 없다면 → 다음 질문으로.

2. 웹 페이지에만 쓸 것인가?

그렇다면 → WebP. 아니라면(이메일·파일 전달·외부 시스템) → JPG.

여기에 하나만 덧붙이면 됩니다. 포맷을 정하기 전에 크기부터 확인하세요. 4000px짜리 사진을 800px로 보여주고 있다면, 포맷을 바꾸는 것보다 크기를 줄이는 쪽이 훨씬 큰 차이를 만듭니다. 가로를 절반으로 줄이면 픽셀 수는 4분의 1이 됩니다.

품질 값은 75~85 사이에서 시작해 결과를 보고 조정하면 됩니다. 90을 넘으면 용량만 늘고 눈에 보이는 차이는 거의 없습니다.

이미지 포맷 변환기로 같은 이미지를 여러 설정으로 바꿔 용량을 비교해 볼 수 있습니다. 파일이 서버로 올라가지 않으므로 사진을 그대로 두고 시험해도 됩니다.

요약

• 포맷의 성격은 압축 방식이 정한다. 압축 방식을 알면 강점과 약점이 따라 나온다
• JPG는 8×8 블록으로 나눠 완만한 변화를 남기고 급격한 변화를 버린다 → 사진에 강하고 글자에 약하다. 투명 미지원
• PNG는 반복되는 색을 묶는 무손실 방식 → 색이 적을수록 작아지고, 사진에서는 커진다
• WebP는 손실·무손실 둘 다 되고 JPG보다 25~35% 작다. 웹용 기본값으로 무리 없다
• AVIF는 더 작지만 인코딩이 느리고 만드는 도구가 제한적이다. 큰 이미지에 골라 쓴다
• 손실 포맷은 저장할 때마다 나빠진다. 원본은 무손실로 보관한다
• 포맷보다 크기를 먼저 확인한다. 가로를 절반으로 줄이면 픽셀은 4분의 1이 된다