이미지 포맷 (JPEG, PNG, SVG, WebP) 이란?

개요 / 배경

이미지는 크게 두 방식으로 저장된다.

• 래스터(Raster): 픽셀(점)의 집합으로 이미지를 표현. JPEG, PNG, WebP
• 벡터(Vector): 수학 공식(선, 곡선, 도형)으로 이미지를 표현. SVG

등장 배경

JPEG (1992)

• 인터넷 초창기, 사진 파일이 너무 커서 전송이 불가능
• 사람 눈이 색상 변화보다 명암 변화에 민감하다는 점을 이용해 색상 정보를 ‘허용 가능한 수준으로’ 버리는 손실 압축 개발

PNG (1996)

• GIF 포맷의 특허 문제 + 투명도 미지원 문제
• 무손실이면서 투명도를 지원하는 오픈 포맷으로 개발

SVG (1999)

• 고해상도 디스플레이가 등장하며 픽셀 기반 이미지가 흐릿해지는 문제
• 해상도에 무관한 벡터 기반 포맷을 W3C 표준으로 채택

WebP (2010)

• 모바일 시대, 데이터 절약과 빠른 로딩 중요
• 구글이 JPEG 대비 25~34% 더 작은 파일 크기를 목표로 개발

동작 원리

JPEG 압축 과정

원본 이미지
  → ① RGB → YCbCr 색공간 변환 (명암/색상 분리)
  → ② 색상(Cb, Cr) 채널 해상도 절반으로 축소 (눈이 잘 못 느낌)
  → ③ 8x8 픽셀 블록으로 분할
  → ④ DCT (이산 코사인 변환) - 공간 → 주파수 영역
  → ⑤ 고주파수(세밀한 디테일) 정보 버리기 (손실 발생)
  → ⑥ Huffman 코딩으로 최종 압축
  → .jpg 파일

PNG 압축 과정

원본 이미지
  → ① 픽셀 데이터 필터링 (주변 픽셀과의 차이값으로 변환)
  → ② DEFLATE 알고리즘 압축 (zip과 동일한 방식)
  → ③ 원본과 완전히 동일하게 복원 가능
  → .png 파일

SVG 구조

수학 공식 (XML 텍스트)
  → 브라우저/렌더러가 실시간으로 계산
  → 어떤 크기로든 완벽하게 그림

WebP 압축 과정

원본 이미지
  → VP8 (손실) 또는 VP8L (무손실) 코덱 적용
  → 예측 코딩 + 변환 코딩 + 엔트로피 코딩
  → JPEG보다 ~30% 더 작은 파일

관련 개념 비교

왜 JPEG → WebP 변환 시 파일이 더 커질까?

핵심 이유: “이미 압축된 것을 다시 압축하는” 문제

JPEG는 저장될 때 이미 손실 압축이 적용된 상태이다. 이 파일을 WebP로 변환하면:

JPEG 파일
  → ① JPEG 압축 해제 (디코딩) → 픽셀 데이터 복원
  → ② 이 픽셀 데이터를 WebP로 인코딩

원인 1: JPEG 압축 해제 시 “아티팩트” 노출

JPEG는 8×8 블록 단위로 압축하면서 경계에 블로킹 아티팩트를 만든다.

JPEG 인코딩 시:  "이 영역은 비슷한 색이니 뭉개도 됨" → 정보 버림
JPEG 디코딩 시:  버린 정보를 근사값으로 복원 → 블록 경계에 노이즈 발생
WebP 인코딩 시:  이 노이즈를 "진짜 디테일"로 인식하고 보존하려 함 → 파일 커짐

WebP 입장에서는 JPEG 아티팩트가 “실제로 존재하는 복잡한 픽셀 패턴”처럼 보이기 때문에, 이를 충실히 인코딩하려다 오히려 커진다.

원인 2: JPEG의 압축률이 이미 매우 공격적인 경우

JPEG quality 50~70 수준의 이미 많이 압축된 파일은 WebP가 추가로 압축할 여지가 거의 없다.

원본 사진 (10MB)
  → JPEG q=60으로 저장: 300KB (97% 압축)
  → 이 300KB를 WebP로 변환: 320KB (오히려 증가)

이유: JPEG가 이미 "압축 가능한 정보"를 대부분 제거했음
     WebP는 남은 픽셀 데이터 + 아티팩트 노이즈를 압축해야 함

반대로 고품질 JPEG(quality 90+)는 WebP 변환 시 확실히 작아진다. 아직 압축 여지가 많기 때문이다.

원인 3: 무손실 WebP로 변환하는 경우

변환 설정을 lossless=True로 하면 JPEG 아티팩트까지 완벽하게 보존하려 하므로 파일이 폭발적으로 커진다.

개념 정리

이미지 포맷을 어떻게 선택하나요?

이미지 포맷 선택은 이미지의 특성과 사용 목적에 따라 달라집니다.

사진처럼 색상이 풍부하고 투명도가 필요 없는 경우엔 JPEG 또는 WebP가 적합합니다. JPEG는 손실 압축으로 파일 크기를 크게 줄이고, WebP는 같은 품질을 더 작은 크기로 제공합니다.

투명도가 필요하거나 픽셀 데이터를 완벽하게 보존해야 하는 경우엔 PNG를 사용합니다. 무손실 압축이라 여러 번 저장해도 화질이 떨어지지 않습니다.

아이콘, 로고, 차트처럼 선명한 선과 도형으로 이루어진 그래픽은 SVG가 최적입니다. 어떤 크기에서도 깨지지 않고, 파일 자체가 XML 텍스트라 CSS나 JavaScript로 조작도 가능합니다.

핵심 문장

• JPEG는 손실 압축, PNG는 무손실 압축, SVG는 벡터, WebP는 JPEG+PNG의 장점을 합친 모던 포맷
• SVG는 사진이 아닌 단순한 그래픽(아이콘, 로고)에만 적합
• JPEG → WebP 변환은 “업그레이드”가 아니라 “이미 가공된 재료를 다시 가공”하는 것 — 원본 품질이 낮을수록 오히려 역효과