JPEG - 사진을 위해 설계된 손실 압축 포맷

마릴린벅시

2025. 8. 12. 16:22ㆍ잡스럽고 잼있는 지식

JPEG = Joint Photographic Experts Group
본질적으로 사진 처리를 위한 포맷

JPEG는 본질적으로 사진과 같은 현실 이미지를

효율적으로 저장하기 위해 만들어진 포맷입니다.

확장자는 .jpg와 .jpeg를 모두 쓰지만, .jpg가 더 일반적으로 쓰입니다.

그런데 "손실"이라니 뭔가 어감이 아주 부정적인데요,

JPEG는 과연 이미지를 어떻게 손실 시키는 것일까요?

그리고 과연 부정적인 점만 있을까요?

1. JPEG의 핵심 - 손실 압축

손실 압축: 데이터를 일부 버리고 압축 효율을 높이는 방식
→ 인간의 눈이 잘 구분하지 못하는 정보를 제거하거나 단순화
대부분 시각적으로 품질 저하가 거의 보이지 않음

무손실 압축은 원본 정보를 100% 보존하지만, 손실 압축은 일부 데이터를 버립니다.

JPEG는 사람이 잘 구분하지 못하는 디테일을 제거해 파일 크기를 줄입니다.

2. 8×8 블록 기반 구조

JPEG는 이미지를 8×8 픽셀 블록 단위로 나누어 인코딩합니다.

예를 들어 32×32 이미지라면 블록을 4개로 나눕니다.
만약 이미지가 8x8보다 작은 경우에도 8x8블록 단위로 만들고,
빈 곳은 0으로 채우거나, 가장자리 값을 복제해서 채웁니다.

이렇게 만들어진 8x8(64픽셀)의 블록은 아래와 같이 요약됩니다 :

이 블록의 평균 밝기(DC)는 이 정도고,
가로로 천천히 어두워지는 변화(저주파)가 이만큼,
세로로 살짝 줄무늬 같은 변화(조금 더 고주파)가 이만큼,
등등...

즉, "픽셀값 목록"대신, 변화와 강도 목록(계수)로 바꿔 저장합니다.

이 변환을 DCT(이산 코사인 변환)이라고 합니다.

이렇게 블록의 정보를 저장하면 블록 간의 세부 정보 손실이 잘 티가 나지 않습니다.

이유는 아래와 같습니다 :

사진의 대부분은 하늘, 피부처럼 부드러운 변화(저주파)가 많다.
반대로 모공, 잔머리같은 미세한 흔들림(고주파)는 있어도 덜 중요하게 느껴진다.
그래서 "부드러운 변화"는 크게 남겨두고, "자잘한 변화"는 작게(혹은 버려도) 눈에 잘 띄지 않는다.
=> 결과, 파일은 작아지고, 육안 품질은 꽤 유지됨.

3. 고주파 정보 줄이기

위에서 JPEG는 고주파(high frequency) 정보를 줄인다고 설명했습니다.

저주파	색·밝기 변화가 부드럽게	하늘, 피부, 그라디언트
고주파	색·밝기 변화가 급격	글자 테두리, 나뭇잎, 머리카락

이는 강한 경계를 살리고, 섬세한 디테일(얼굴 모공, 나뭇잎 잎맥 등)을 줄이는 과정이라고 볼 수 있습니다.

4. Luma / Chroma 분리 & 서브샘플링(Subsampling)

JPEG는 이미지를 두 가지 정보로 분리합니다.

1. Luma(밝기 정보)

사람의 눈은 밝기에 민감합니다.
때문에 이 정보는 손실 거의 없이 저장합니다.

2. Chroma(색상 정보)

사람의 눈은 색상 정보에는 덜 민감합니다.
때문에 해상도를 줄여서 저장합니다. (서브샘플링)
예를 들어 :
- Luma: [L1][L2][L3][L4] → 전부 저장
- Chroma 원본: [C1][C2][C3][C4]
- 서브샘플링: [C1][C3]만 저장 → 복원 시 중간 색은 “대충 이어 붙임”

5. 인간 시각 시스템과 양자화

양자화란?

뇌는 불필요한 디테일은 무시하고, 핵심 정보만 저장하는 압축기와 같습니다.
정원에 있을 때 꽃 색깔은 기억해도, 잎사귀 각도나 미묘한 녹색 차이는 기억하지 못하는 것과 같죠.
JPEG도 이와 같은 원리로 보존할 정보와 버릴 정보를 구분하여 양자화 합니다.

6. 강한 압축의 결과 : 압축 아티팩트

JPEG의 압축률을 강하게 높이면 많은 색상정보와 고주파정보를 생략하게 됩니다.

그러면서 8x8 단위로 나눠진 블록들이 서로 자연스럽게 연결되지 않는

압축 아티팩트 현상이 발생하게 됩니다.

위 이미지를 자세히 보면 모자이크처럼 네모블럭들이 경계를 이룬 것을 볼 수 있습니다.

이것이 압축 아티팩트 현상입니다.

7. Progressive JPEG

렌더링 방식을 개선한 JPEG 변형입니다.

Progressive JPEG의 확장자도 .jpeg, .jpg로 동일합니다.

하지만 클라이언트에서 렌더링 되는 방식에 차이가 있습니다.

기본 JPEG :

이미지 상단부터 하단까지 차례대로 표시 됨
전송이 진행될수록 이미지가 위에서 아래로 점점 채워지는 방식

Progressive JPEG :

전체 이미지를 여러번에 걸쳐 전체 크기로 반복 렌더링함
처음엔 흐릿한 전체 이미지가 즉시 보이고,
이후 전송이 진행되면서 점점 더 선명해지는 방식

Progressive JPEG 장점 :

전체 이미지가 먼저 보여 더 빠른 느낌을 줌
PJPEG로 저장하면 용량이 더 작아지는 경우가 있음

Progressive JPEG 단점:

렌더링 시 클라이언트에 약간 더 많은 연산 부담을 주지만, 큰 체감은 없음.

어떻게 Progressive JPEG로 저장하나?

구글에서 만든 이미지 최적화 도구 https://squoosh.app/ 를 사용하면,

Progressive JPEG로 저장할 수 있는 옵션이 있습니다.

언제 JPEG를 쓸까?

JPEG는 용량도 가볍고, 이미지 품질도 나쁘지 않아서 많이 쓰이는 포맷입니다.

그러나 투명도(알파 채널)를 지원하지 않고,

경계가 선명하지 않으며 아티팩트가 쉽게 발생한다는 특징 때문에 아이콘/텍스트에도 부적합합니다.

때문에 JPEG는 사진, 스냅샷, 현실 이미지 표현에 최적인 포맷입니다.

이젠 WebP, AVIF등 차세대 이미지 포맷들이 더 좋은 품질과 더 낮은 용량으로

치고 올라오고 있지만, JPEG는 역사가 긴 만큼

모든 브라우저, OS등에서 호환되기 때문에 안전하게 사용되고 있습니다.

결론

JEPG : "아직은 날 밀어내려면 멀었어~!"

참고

web.dev

이미지 형식: JPEG | web.dev

웹에서 가장 일반적인 이미지 형식에 대해 알아보세요.