WebP - JPEG, PNG, GIF를 한 번에 대체하려는 구글의 이미지 포맷

1. WebP가 왜 나왔을까?

WebP는 원래 JPEG 대체를 목표로 구글이 만든 손실 이미지 포맷입니다.
목표는 단순합니다.

"같은 품질이라면 JPEG보다 파일 크기를 작게"

그런데 개발하다 보니… 기능이 점점 늘어나서 이렇게 됐습니다.

• 무손실 압축 → PNG 대체 가능
• 알파 채널(반투명) → PNG 대체 가능
• 애니메이션 → GIF 대체 가능

즉, 사진·로고·애니메이션까지 한 포맷으로 처리할 수 있는 포맷이 된 거죠.

 

WebP는 인코딩 단계에서 픽셀 정보를 축소하는 손실이 발생합니다.

그러나 압축 과정에서는 손실이 일어나지 않죠.

GIF와 비슷해보이는데 어째서

GIF는 무손실 포맷, WebP는 손실 포맷이라고 말하는 걸까요?

이 이유에 대해서는 맨 밑에 설명하겠습니다 ^^.

---

2. WebP의 손실 압축 구조

WebP의 손실 압축은 VP8 비디오 코덱의 키 프레임 압축 기술을 그대로 가져왔습니다.
JPEG와 구조가 비슷하지만, 좀 더 정교하고 똑똑한 방식을 씁니다.

 

앞선 글에서 JPEG는 이미지를 8x8(64픽셀)단위로 나눈 뒤

각 블록에 대한 정보를 요약하는 방식으로 인코딩한다고 했습니다.

WebP도 이미지를 블록으로 나누어 처리하는 방식은 동일하나, JEPG와 차이가 있습니다.

 

JPEG vs WebP 블록 구조

• JPEG → 밝기(Luma)·색상(Chroma) 분리, 이미지를 8×8 블록으로 나누어 처리
• WebP →
  • 밝기는 16×16 블록으로
  • 색상은 8×8 블록으로
  • 내부적으로 다시 4×4 블록으로 세분화
    → 더 작은 블록 단위로 세밀하게 조정 가능

---

3. WebP의 핵심 기술

(1) 블록 예측

JPEG는 각 블록을 독립적으로 저장합니다. 
WebP는 주변 블록을 보고 현재 블록을 예측한 뒤,

예측과 실제 이미지의 차이(diff)만 저장합니다.

 

간단히 말하면

위 블록이 파랑이고, 왼쪽 블록도 파랑이면, 이 블록도 아마 파랗겠지. 라고 가정하는 방식이죠.

이것을 다양한 방향으로(대각선 블록 참조, 오른쪽-아래 블록 참조 등) 가정하는 것을 다중 예측 모드라고 합니다.

 

다중 예측 모드 작동 과정 :

1. 현재 블록 주변(윗쪽, 왼쪽)의 데이터를 샘플링함
2. 인접 블록의 픽셀을 기반으로 수평, 수직, 대각선 등 다양한 방향 예측 모드를 적용한다. (아래 이미지 참고)
3. 예측 결과와 실제 이미지를 비교함
4. 비교 결과 실제 이미지와 가장 가까운 이미지에 쓰인 예측 방식을 선택함
5. 최종 저장 시 아래 두 가지를 저장함
   1. 선택된 예측 방식
   2. 실제 이미지와의 차이 정보

 

https://web.dev/learn/images/webp?hl=ko&authuser=1

 

사진처럼 여러 "예측 모드"가 존재합니다.

여러 방법 (Vertical, Horizontal, Right-Down...)으로 그려본 뒤

실제 이미지와 비교해보고 가장 가까운 예측 모드를 선택하는 것이죠.

이렇게 예측 모드 + 차이 정보만 저장하니 아주 효율적이게 됩니다.

---

(2) 적응형 블록 양자화

JPEG는 모든 블록에 똑같은 압축 강도를 씁니다.
→ 그래서 흐린 하늘 같은 부드러운 부분(저주파 정보 영역)이 툭툭 끊긴 단색 블록처럼 보이기도 함.

 

WebP는 이미지를 최대 4개 영역으로 나누고,
각 영역마다 압축 강도(양자화 정도)를 다르게 적용합니다.

• 중요한 디테일 → 압축 약하게 (품질 보존)
• 덜 중요한 부분 → 압축 강하게 (용량 절감)

---

(3) 복원 시 과정

렌더링 엔진은 :

1. 파일에 저장된 예측 방식에 따라 동일한 방식으로 예측을 수행함
2. 저장된 "차이값"을 예측 값에 더함
3. 원래의 이미지 블록이 복원 됨

이건 마치 Git에서 파일 전체를 다시 저장하는 대신,

변경된 부분(diff)만 저장하고 적용하는 방식과 비슷합니다.

 

원본:

111151111
122456389

 

예측 방식에 따라 예측 수행 :

111111111
123456789

 

저장된 차이(diff)값 계산:

_ _ _ _ +4 _ _ _ _
_ _ -1 _ _ _ -4 _ _

 

결과:

“2×9 격자, 예측 모드 1 사용.  
예측값과 다른 곳은 3개뿐이고, 그 차이만 따로 저장됨.”

 

---

4. 품질과 용량

• 같은 품질에서 JPEG보다 확실히 작은 용량 가능
• 압축률을 높여도 아티팩트가 적음
• 무손실, 투명도, 애니메이션까지 지원 → JPEG·PNG·GIF 기능을 통합

---

5. WebP의 한계

• 구형 브라우저 지원 문제 (특히 IE, 구버전 Safari)
  → 하지만 지금은 대부분 해결됨
• 압축·디코딩 과정이 JPEG보다 살짝 무거움
  → 최신 기기에서는 거의 차이 없음

---

6. GIF와 WebP, 손실? 무손실?

1. 공식적으로 GIF가 "무손실"이라 불리는 이유 :

• GIF표준은 256색 팔레트 이미지를 LZW 무손실 압축으로 저장합니다.
• GIF는 양자화 과정에서 픽셀이 표현할 수 있는 색상 종류만 남겨둡니다.
• 이 과정에서 색 정보가 손실됩니다.
• 그러나, 팔레트로 변환된 뒤의 데이터는 1픽셀도 안 바뀌고 그대로 복원 가능하죠.
• 그래서 원본이 이미 256컬러 이하라면, GIF 변환 시 진짜 무손실이 됩니다.

 

2. WebP가 "손실  포맷"인 이유:

• WebP의 손실모드는 압축 과정에 양자화가 포함돼 있어 원본이 어떤 포맷이든 픽셀 값이 변형됩니다.
• 원본이 16색이든, 256색이든, 양자화 과정이 들어가면 정보가 줄어듭니다.
• 이 때 픽셀의 색상/밝기의 정밀도와 세부 패턴 정보가 손실됩니다.
• 그래서 포멧 레벨에서 "손실"이라 부르는 것입니다.

---

결론

WebP는 단순히 JPEG 대체가 아니라,
"사진+투명도+애니메이션"까지 가능한 올인원 이미지 포맷입니다.

웹 성능 최적화를 위한다면 WebP가 짱이죠!

이제 면접에 가서 이렇게 말해볼 수 있겠네요.

저는 마치 WebP처럼 다재다능한 인재입니다. 😊

---

참고

web.dev

이미지 형식: WebP  |  web.dev