Google은 원래 JPEG보다 작은 파일을 생성할 수 있는 JPEG를 대체하기 위해 손실 이미지 형식으로 WebP를 개발했습니다. JPEG로 인코딩된 비슷한 품질의 이미지 파일을 사용합니다. 이후 형식 업데이트에서 무손실 압축 옵션이 도입되었습니다. PNG 형식의 알파 채널 투명도 및 GIF 형식의 애니메이션(모두 JPEG 스타일의 손실 있는 압축과 함께 사용할 수 있음)을 지원합니다. WebP는 믿을 수 없을 다재다능한 형식입니다.
WebP의 손실 압축 알고리즘은 VP8 동영상 코덱이 를 사용하여 동영상의 키프레임을 압축할 수 있습니다. 높은 수준에서는 JPEG 인코딩과 유사합니다. WebP는 '블록'이라는 측면에서 작동합니다. 개별 픽셀이 아니라 휘도와 색차는 비슷하게 있습니다. WebP의 루마 블록은 16x16인 반면, 크로마 블록은 8x8이며, 이러한 '매크로블록'은 입니다 4x4 하위 블록으로 더 세분화됩니다
WebP가 JPEG와 근본적으로 다른 점은 '블록 예측'이라는 두 가지 특징에 있습니다. '적응형 블록 양자화'를 살펴보겠습니다
예측 차단
블록 예측은 값을 기반으로 각 색차 및 휘도 블록의 콘텐츠를 예측하는 프로세스입니다. 현재 블록의 위와 왼쪽에 있는 블록의 집합을 나타냅니다. 짐작하시겠지만 알고리즘은 '현재 블록 위에 파란색이 있고 왼쪽에 파란색이 있다면 이 블록이 파란색이라고 가정하겠습니다."
실제로 PNG와 JPEG 모두 어느 정도는 이런 종류의 예측을 수행합니다. 하지만 WebP는 주변 요소를 샘플링한다는 점에서 블록' 여러 개의 다른 '예측 모드'를 통해 현재 블록을 채우고 사실상 '그리기'를 시도합니다. 찾을 수 있습니다. 그런 다음 각 예측 모드에서 제공되는 결과를 실제 이미지 데이터와 비교합니다. 예측 일치가 선택되었습니다.
![WebP의 다양한 블록 예측 메서드의 다이어그램](https://web.dev/static/learn/images/webp/image/a-diagram-webps-various-05ac7c823c177.png?authuser=0000&hl=ko)
물론 가장 근접한 예측 일치라고 해서라도 완전히 정확하지는 않을 것입니다. 따라서 예측된 결과와 해당 블록의 실제 값은 파일에 인코딩됩니다. 이미지를 디코딩할 때 렌더링 엔진은 동일한 데이터를 사용하여 동일한 예측 로직으로 인해 블록마다 동일한 예측값이 도출됩니다. 예측 값과 파일에 인코딩된 예상 이미지가 예측에 적용됩니다. 이는 Git 커밋이 미분을 나타내는 방식과 유사합니다. 패치가 아닌 새 파일 사본이 아닌 로컬 파일에 적용됩니다.
예를 들면, 진정한 예측 알고리즘과 관련된 복잡한 수학을 파헤치는 대신, 우리는 WebP와 같은 인코딩을 발명할 것입니다. 를 사용하고, 이를 사용하여 기존 형식에서 했던 것처럼 숫자 그리드를 효율적으로 전달할 수 있습니다. Google 알고리즘 에는 '예측 모드 1'이라고 부르는 단일 예측 모드가 있습니다. 각 블록의 값은 위 블록 값의 합입니다. 1부터 시작하겠습니다.
이제 다음과 같은 실제 이미지 데이터로 시작한다고 가정해 보겠습니다.
111151111
122456389
예측 모델을 사용하여 2x9 그리드의 콘텐츠를 결정하면 다음과 같은 결과를 얻게 됩니다.
111111111
123456789
DORA의 데이터는 우리가 발명한 예측 알고리즘에 적합합니다. 예측된 데이터는 실제 데이터와 거의 일치합니다. 물론 완벽하게 맞는 것은 아닙니다. 실제 데이터에 예측 데이터와 다른 블록이 여러 개 있습니다. 따라서 사용할 예측 방법뿐 아니라 예측값과 달라야 하는 블록의 차이도 포함됩니다.
_ _ _ _ +4 _ _ _ _
_ _ -1 _ _ _ -4 _ _
앞서 설명한 기존 형식 인코딩과 동일한 종류의 평이한 언어를 사용하세요.
예측 모드 1을 사용하는 2x9 그리드 +4~1x5, -1~2x3, -4~2x7입니다.
결과적으로 놀라울 정도로 효율적인 인코딩된 파일이 만들어집니다.
적응형 블록 양자화
JPEG 압축은 이미지의 모든 블록에 동일한 수준의 양자화를 적용하는 포괄적 작업입니다. 이미지 물론 일관성 있는 구성이라는 사실은 당연합니다. 하지만 실제 사진은 우리 주변의 세계보다 더 균일하지 않습니다. 실제로 이는 JPEG 압축 설정이 고주파 세부정보에 의해 결정되지 않음을 의미합니다. 즉, JPEG 압축이 뛰어납니다. 하지만 압축 아티팩트가 나타날 가능성이 가장 높은 이미지 부분을 활용합니다.
이 과장된 예에서 볼 수 있듯이 전경에 있는 군주의 날개는 비교적 선명하고 약간 거칠게 보입니다. 고해상도 원본과 비교할 때 원본과 비교하지 않으면 눈에 띄지 않습니다. 마찬가지로 우유 꽃의 자세한 꽃송이와 전경의 잎사귀는 압축의 흔적을 볼 수 있습니다. 압박이 적정 수준 이상으로 높아져도 전경에 있는 물체는 그래도 괜찮아 보입니다. 사진 왼쪽 상단의 저주파수 정보(흐린 녹색 배경의 나뭇잎)는 최악이라고 할 수 있습니다. 훈련받지 않은 시청자도 품질 문제를 즉시 알아차릴 수 있습니다. 배경의 미세한 그라데이션은 들쭉날쭉한 단색 블록으로 내림됩니다.
이를 피하기 위해 WebP는 양자화에 적응형 접근 방식을 취합니다. 즉, 이미지를 시각적으로 유사한 최대 4개의 이미지로 나눕니다. 이러한 세그먼트의 압축 매개변수는 독립적으로 미세 조정됩니다. WebP에서 동일한 대용량 압축 사용:
두 이미지 파일의 크기는 거의 같습니다. 군주의 날개 모양과 모양이 비슷해요. 아주 가까이 살펴보면 최종 결과에서 약간의 차이를 발견할 수 있지만 전체적인 품질에는 실질적 차이가 없습니다. WebP에서 유제품 꽃은 약간 선명하지만 두 가지를 나란히 비교하여 품질의 차이를 정말로 찾는 것입니다. 배경이 다름 JPEG의 명백한 아티팩트가 겨우 흔적이 남지 않았습니다. WebP는 파일 크기는 동일하지만 고품질 이미지를 비교하지 않았다면 심리시각 시스템이 감지할 수 없는 몇 가지 세부 사항을 제공하거나 매우 밀접하게 관련되어 있습니다.
WebP 사용
WebP의 내부 기능은 JPEG 인코딩보다 훨씬 복잡할 수 있지만 WebP 인코딩의 모든 복잡성은 단일 '품질' JPEG와 마찬가지로 0~100 사이의 값으로 표현됩니다. 다시 한번 말씀드리지만 중요한 단일 '품질'에만 제한된다는 것은 아닙니다. 설정을 변경합니다. 모든 것을 고칠 수 있고 WebP 인코딩의 세부 정보를 살펴봅니다. 이는 일반적으로 보이지 않는 이러한 설정이 어떤 영향을 미칠 수 있는지 더 잘 이해하기 위해서입니다. 파일 크기 및 품질
Google에서는 개별 파일 또는 이미지의 전체 디렉터리를 변환하거나 압축할 수 있는 cwebp
명령줄 인코더를 제공합니다.
$ cwebp -q 80 butterfly.jpg -o butterfly.webp
Saving file 'butterfly.webp'
File: butterfly.jpg
Dimension: 1676 x 1418
Output: 208418 bytes Y-U-V-All-PSNR 41.00 43.99 44.95 41.87 dB
(0.70 bpp)
block count: intra4: 7644 (81.80%)
Intra16: 1701 (18.20%)
Skipped: 63 (0.67%)
bytes used: header: 249 (0.1%)
mode-partition: 36885 (17.7%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 8%| 22%| 26%| 44%| 9345
quantizer: | 27 | 25 | 21 | 13 |
filter level: | 8 | 6 | 19 | 16 |
명령줄을 사용하고 싶지 않다면 Squoosh가 WebP 인코딩에도 도움이 될 것입니다. 이를 통해 다양한 인코딩, 설정, 품질 수준 및 JPEG 인코딩과의 파일 크기 차이를 나란히 비교한 내용을 살펴봤습니다