[공부]WebP가 왜 더 가볍고 화질 좋은가(그냥 용량 적어지는 거아니야?)

서론: 공부하다 보니 개념이 너무 복잡하여 최대한 이해하기  쉬운 방향성으로 정리 하였다

 

웹용 이미지 형식  |  WebP  |  Google for Developers

 

공식 문서에서 설명

WebP는 웹 이미지에 뛰어난 무손실 및 손실(lossy) 압축을 제공하는 최신 이미지 형식입니다. 웹마스터와 웹 개발자는 WebP를 사용해 더 작고 풍부한 이미지를 제작하여 웹을 더 빠르게 만들 수 있습니다.

WebP 무손실 이미지는 PNG 이미지보다 26% 더 작습니다. WebP 손실(lossy) 이미지는 동등한 SSIM 품질 색인에서 비슷한 JPEG 이미지보다 25~34% 더 작습니다.

 

무손실 WebP는 22% 더 많은 바이트 비용만으로 투명도 (알파 채널이라고도 함)를 지원합니다. 손실 RGB 압축이 허용되는 경우 손실 WebP는 투명도도 지원하여 일반적으로 PNG보다 3배 작은 파일 크기를 제공합니다.

손실, 무손실, 투명도는 모두 애니메이션 WebP 이미지에서 지원되므로 GIF 및 APNG보다 크기를 줄일 수 있습니다.

 

공식문서에서의설명에 대해 느낀점

 

기존 png 형태보다 좋음 근데 어떻게 왜 좋은지에 대한 글의 내용이 너무 복잡하다 느낌

 

 

공식문서의 기술적 설명

압축 기술  |  WebP  |  Google for Developers

 

 

WebP의 손실 압축은 (동영상) 프레임을 예측하는 데 VP8과 동일한 방법을 사용합니다. VP8은 블록 예측을 기반으로 하며, 다른 블록 기반 코덱과 마찬가지로 VP8은 프레임을 마이크로블록이라는 더 작은 세그먼트로 나눕니다.

각 마크로블록 내에서 인코더는 이전에 처리된 블록을 기반으로 중복된 모션 및 색상 정보를 예측할 수 있습니다. 이미지 프레임은 각 마이크로블록의 즉각적인 공간 이웃에서 이미 디코딩된 픽셀만 사용하고 알 수 없는 부분을 채우려고 한다는 점에서 '키'입니다. 이를 예측 코딩이라고 합니다 (VP8 동영상의 프레임 내 코딩 참고).

그러면 중복 데이터를 블록에서 뺄 수 있으므로 더 효율적인 압축이 가능합니다. 압축된 형식으로 전송할 나머지 작은 차이인 잔차만 남습니다.

수학적으로 역변환 가능한 변환 (디스크리트 코사인 변환을 나타내는 유명한 DCT)을 적용한 후에는 일반적으로 많은 0 값이 포함되며, 이를 훨씬 더 효과적으로 압축할 수 있습니다. 그런 다음 결과를 정규화하고 엔트로피 인코딩합니다. 흥미롭게도 양자화 단계에서만 비트가 손실되게 삭제됩니다 (아래 다이어그램에서 QPj로 나눈 값을 검색하세요). 다른 모든 단계는 역전 가능하고 무손실입니다.

다음 다이어그램은 WebP 손실 압축과 관련된 단계를 보여줍니다. JPEG와 비교하여 차별화되는 기능은 빨간색으로 원으로 표시되어 있습니다.

 

 

 

이미지를 봐도 이해가 바로 되진않지만 jpeg 처리 이미지를 쪼개서 각 정보를 담는데 비슷한것끼리 모아서 중복되는것을 모아서
jpeg는 중복인지 여부를 구분하지 않고 전부 저장하지만 Webp에서는 공식문서에서 설명한 기술들을사용하여
중복 된 부분들은 별도로 똑같이 저장하지 않고(즉 구체적이지않고 비슷한부분은 하나의 세그먼크로 처리) 동일하게 처리하고,

디테일한 중복되지 않은 분들은 따로 저장을 해서 손실은 적으면서 용량을줄일 수있는 방식인것같다.

 

 

 

 

이런정보들이 맞는 지 확인을 해보았고 나의 언제나 친절한 선생님인 claude ai 를 통해 좀더 Webp의 핵심기술을 

비유적으로 표현으로 해달라고 하니 아래와같았다.

 

 

---

WebP = 똑똑한 압축 방법

JPEG: "모든 정보를 다 기록해!"
WebP: "앞에 쓴 거랑 비슷하면 '위랑 똑같음'만 쓰자!"

→ 같은 내용인데 훨씬 짧게 쓸 수 있음!

 

 

1. 가장 쉬운 비유: 일기 쓰기 📝

JPEG 방식으로 일기 쓰기

월요일: 오늘 날씨가 맑았다. 기분이 좋았다.
화요일: 오늘 날씨가 맑았다. 기분이 좋았다.
수요일: 오늘 날씨가 맑았다. 기분이 좋았다.
목요일: 오늘 날씨가 맑았다. 기분이 좋았다.
금요일: 오늘 날씨가 맑았다. 기분이 좋았다.

→ 총 5줄 × 각 20자 = 100자

WebP 방식으로 일기 쓰기

월요일: 오늘 날씨가 맑았다. 기분이 좋았다.
화요일: 월요일이랑 똑같음
수요일: 월요일이랑 똑같음
목요일: 월요일이랑 똑같음
금요일: 월요일이랑 똑같음

→ 총 1줄(20자) + 4줄(각 10자) = 60자

40자 절약! (40% 감소)

이게 바로 WebP의 핵심입니다!

• 앞에 나온 것과 비슷하면 "위랑 같음"만 쓰기
• 다를 때만 새로 쓰기

 

2. 사진으로 이해하기 📸

하늘 사진 예시

하늘 사진의 파란색:

위쪽:     [파랑] [파랑] [파랑] [파랑]
중간:     [파랑] [파랑] [파랑] [파랑]
아래쪽:   [파랑] [파랑] [파랑] [파랑]

JPEG의 방법:

위쪽 1번째: 파란색 RGB(100, 150, 200) 기록
위쪽 2번째: 파란색 RGB(100, 150, 200) 기록
위쪽 3번째: 파란색 RGB(100, 150, 200) 기록
... (반복 반복 반복)

→ 같은 색을 계속 반복해서 기록
→ 낭비!

WebP의 방법:

위쪽 1번째: 파란색 RGB(100, 150, 200) 기록
위쪽 2번째: "왼쪽이랑 똑같음" ✅
위쪽 3번째: "왼쪽이랑 똑같음" ✅
... (간단!)

→ 한 번만 기록하고 나머지는 "같음"
→ 엄청 절약!

 

 

3. 더 쉬운 비유들

비유 1: 카톡 메시지

친구와의 대화:

나: 오늘 치킨 먹을래?
친구: ㅇㅇ
나: 몇 시에 먹을까?
친구: ㅇㅇ

• "ㅇㅇ" = "응" = "그래" = "좋아"
• 길게 안 쓰고 짧게 써도 의미 통함!
• WebP도 이렇게 간단하게 표현

 

빨간 사과 그리기:

JPEG 방식:
1번 칸: 빨강으로 칠하기
2번 칸: 빨강으로 칠하기
3번 칸: 빨강으로 칠하기
... (100번 칸까지 계속)

WebP 방식:
1번 칸: 빨강으로 칠하기
2~100번 칸: "1번이랑 같은 색"

→ 설명이 훨씬 짧음!

 

 

문서 작성:

JPEG:
- 같은 내용을 계속 타이핑
- 손가락 아픔
- 시간 오래 걸림

WebP:
- 한 번 쓰고 Ctrl+C, Ctrl+V
- 빠르고 간편
- 결과는 똑같음!

 

 

그라데이션 하늘:

┌─────────────────────┐
│ 파랑 파랑 파랑 파랑 │
│ 파랑 파랑 파랑 파랑 │
│ 파랑 파랑 파랑 파랑 │
└─────────────────────┘

JPEG: 
"파랑, 파랑, 파랑..." (16번 기록)

WebP:
"파랑" + "나머지 15개는 위랑 같음"

→ 훨씬 짧음!

비법 2: "중요한 부분은 자세히, 안 중요한 부분은 대충"

사진 속 얼굴과 배경:

얼굴 (중요):
└─ 세세하게 저장 (눈, 코, 입 선명)

배경 하늘 (덜 중요):
└─ 대충 저장 (어차피 파란색)

→ 파일 크기는 줄고, 얼굴은 선명!

---

. 숫자로 보는 효과

실제 예시

같은 사진을 압축:

JPEG:
📁 100KB
화질: ★★★☆☆

WebP:
📁 70KB (30% 작음!)
화질: ★★★★☆ (더 좋음!)

왜?
- 똑똑하게 반복 제거
- 중요한 부분만 자세히

웹사이트

---

6. 왜 화질이 더 좋아 보이는가?

격자무늬 문제 해결

JPEG의 문제:

사진을 잘 보면 격자무늬가 보임:

┌───┬───┬───┐
│   │   │   │  ← 선이 보임!
├───┼───┼───┤
│   │   │   │
└───┴───┴───┘

특히 품질 낮추면 더 심함

WebP의 해결:

격자무늬가 안 보임:

┌───────────┐
│           │  ← 부드러움!
│           │
└───────────┘

같은 크기인데 더 깔끔

---

7. 단점도 있나요?

약간의 단점

1. 변환하는데 시간이 조금 더 걸림
   - JPEG: 1초
   - WebP: 1.5초
   └─ 하지만 한 번만 변환하면 됨!

2. 아주 오래된 브라우저는 지원 안 함
   - 최신 브라우저: 다 됨 ✅
   - 10년 전 브라우저: 안 됨 ❌
   └─ 하지만 요즘은 거의 다 지원!

3. 포토샵 같은 곳에서 바로 열기 어려움
   └─ 온라인 변환기 쓰면 됨!

---

8. 실생활 비유 총정리

비유 1: 물건 싸기 📦

JPEG:
각 물건마다 큰 박스 사용
┌────┐ ┌────┐ ┌────┐
│사과│ │사과│ │사과│
└────┘ └────┘ └────┘
→ 박스 3개 필요

WebP:
비슷한 물건은 한 박스에
┌─────────────┐
│사과 사과 사과│
└─────────────┘
→ 박스 1개면 충분!

비유 2: 설명하기 🗣️

JPEG:
"빨간색, 빨간색, 빨간색, 빨간색..."
(10번 반복)

WebP:
"빨간색이 10개"
(한 번에 설명)

→ 같은 의미, 짧은 설명!

비유 3: 메모하기 📝

숙제 기록:

JPEG 방식:
월: 수학 숙제 2페이지
화: 수학 숙제 2페이지  
수: 수학 숙제 2페이지
목: 수학 숙제 2페이지

WebP 방식:
월~목: 수학 숙제 2페이지

→ 4줄이 1줄로!

 

 

결론: 압축기술이 우리는 아무생각없이 사용하긴 하지만 이러한 노력들이 있었고 우리가 더 낮은 용량에서 더좋은 화질을 누릴수있었고
이런 통찰적인 개념을 가기고 내가 앞으로 만들어가 서비스에서도 적용해보고싶다.