포맷 선택이 중요한 이유
이미지 포맷 하나 잘못 고르면 웹사이트가 느려지고, 파일 용량은 불어나고, 화질까지 떨어집니다. 반대로 상황에 맞는 포맷을 쓰면 같은 화질에 절반 이하의 용량도 가능하죠. 포맷별 특징을 제대로 알면 매번 최적의 선택을 내릴 수 있습니다.
JPG(JPEG) — 사진의 기본
JPG는 손실 압축 방식을 씁니다. 사람 눈이 잘 구분하지 못하는 미세한 정보를 버려서 파일 크기를 줄이는 원리입니다. 사진처럼 색이 점진적으로 변하는 이미지에 특히 효과적이고, 품질 80~85 정도면 원본과 거의 차이를 느끼기 어렵습니다.
문제는 텍스트, 로고, 단색 그래픽입니다. 선명한 경계 주변에 번지는 듯한 아티팩트가 생기고, 압축률을 높일수록 심해집니다. 투명도도 지원하지 않아서 투명 영역은 흰색 같은 단색으로 채워집니다.
적합한 용도: 사진, 색 전환이 부드러운 이미지, SNS 업로드, 이메일 첨부.
PNG — 무손실과 투명도
PNG는 무손실 압축이라 모든 픽셀이 원본 그대로 보존됩니다. 로고, 아이콘, 스크린샷, 텍스트가 들어간 이미지에 적합하고, 알파 채널 투명도를 지원해서 배경 합성이 자유롭습니다.
단점은 용량입니다. 사진을 PNG로 저장하면 JPG 대비 5~10배 커질 수 있는데, 눈에 보이는 화질 차이는 없습니다. PNG 압축은 동일한 색의 넓은 영역에서 잘 작동하기 때문에, 색이 수백만 가지인 사진에는 비효율적입니다.
PNG-8(최대 256색)과 PNG-24/32(수백만 색 + 알파 채널) 두 종류가 있습니다. 색이 적은 단순 그래픽에는 PNG-8이 용량 면에서 훨씬 유리합니다.
적합한 용도: 로고, 아이콘, 스크린샷, 텍스트 포함 그래픽, 투명 이미지, UI 요소.
WebP — 현실적인 최적해
구글이 2010년에 공개한 WebP는 손실/무손실 압축, 투명도, 애니메이션을 모두 지원합니다. JPG, PNG, GIF의 장점을 하나로 합친 셈이죠. 손실 WebP는 동일 화질 기준 JPG보다 25~35% 작고, 무손실 WebP는 PNG보다 약 26% 작습니다.
현재 Chrome, Firefox, Safari, Edge 모든 주요 브라우저에서 지원하기 때문에 호환성 걱정 없이 쓸 수 있습니다. 다만 오래된 이미지 편집 소프트웨어나 OS 기본 뷰어에서 아직 지원하지 않는 경우가 간간이 있습니다.
적합한 용도: 웹 이미지 전반, JPG와 PNG를 대체할 범용 포맷, 용량이 중요한 모든 상황.
AVIF — 차세대 포맷
AV1 비디오 코덱 기반의 AVIF는 현존하는 이미지 압축 기술 중 최고 수준입니다. JPG 대비 최대 50%까지 용량을 줄이면서 비슷한 화질을 유지하고, HDR, 넓은 색역, 투명도까지 지원합니다.
단점은 인코딩 속도입니다. AVIF 생성은 JPG나 WebP보다 훨씬 느려서 실시간 처리에는 부적합합니다. 빌드 타임에 미리 변환해두는 정적 웹사이트라면 가장 좋은 선택이 될 수 있습니다. Chrome과 Firefox는 이미 지원하고, Safari도 16.4부터 대응합니다.
적합한 용도: 성능 최우선 웹사이트, 빌드 시 변환 가능한 정적 에셋, HDR 콘텐츠.
GIF — 애니메이션의 유산
GIF는 256색 제한에 무손실 압축을 쓰는 포맷입니다. 사진에는 부적합하지만, 간단한 애니메이션 때문에 아직 쓰이고 있습니다. 다만 WebP 애니메이션이나 MP4가 훨씬 작은 용량에 더 좋은 화질을 제공하므로, 새로 만드는 콘텐츠에 GIF를 고집할 이유는 점점 줄어들고 있습니다.
정적 이미지로는 PNG가 거의 모든 면에서 GIF보다 낫습니다.
SVG — 벡터 그래픽
SVG는 위의 포맷들과 근본적으로 다릅니다. 픽셀 데이터가 아니라 수학적 도형(선, 곡선, 사각형, 텍스트)으로 이미지를 표현하기 때문에 어떤 크기로 확대해도 깨지지 않습니다. CSS로 스타일링하고 JavaScript로 애니메이션도 줄 수 있어서 웹 개발에서 매우 유용합니다.
회사 로고를 SVG로 만들면 2~5KB 정도인데, 같은 로고를 PNG로 적당한 해상도에 저장하면 50KB가 넘기도 합니다. 단, 사진 같은 복잡한 래스터 이미지에는 적합하지 않습니다.
적합한 용도: 로고, 아이콘, 일러스트, 차트, 크기 조절이 필요한 모든 그래픽.
포맷 선택 가이드
사진이라면 WebP(JPG 폴백). 투명도가 필요하면 WebP(PNG 폴백). 간단한 애니메이션은 WebP 애니메이션 또는 MP4. 로고와 아이콘은 SVG. 정적 웹 에셋의 극한 압축이 필요하면 AVIF(WebP 폴백).
뭘 써야 할지 모르겠다면 WebP가 가장 안전한 선택입니다. 모든 용도에서 준수한 성능을 보이고, 브라우저 호환성도 완벽하니까요.