Google은 웹페이지를 더 빠르게 로드하기 위해 끊임없이 노력하고 있습니다. 이를 위한 한 가지 방법은 웹 이미지를 더 작게 만드는 것입니다. 이미지는 대부분의 웹페이지에서 최대 60%~65% 의 바이트로 구성되며 페이지 크기는 총 렌더링 시간의 주요 요소입니다. 페이지 크기는 특히 이미지가 작을수록 대역폭과 배터리 수명을 절약하는 휴대기기에서 중요합니다.
WebP는 Google에서 개발하고 Chrome, Opera, Android에서 지원되는 새로운 이미지 형식으로, 웹에서 더 작은 이미지를 더 빠르게 사용할 수 있도록 최적화되어 있습니다. WebP 이미지는 동일한 시각적 품질에서 PNG 및 JPEG 이미지에 비해 크기가 약 30% 더 작습니다. 또한 WebP 이미지 형식은 다른 형식과 기능 패리티를 가집니다. 지원되는 옵션은 다음과 같습니다.
손실 압축: 손실(lossy) 압축은 VP8 키 프레임 인코딩을 기반으로 합니다. VP8은 VP6 및 VP7 형식의 후속 제품으로 On2 Technologies에서 만든 동영상 압축 형식입니다.
무손실 압축: 무손실 압축 형식은 WebP팀에서 개발했습니다.
투명도: 8비트 알파 채널은 그래픽 이미지에 유용합니다. 알파 채널은 현재 다른 형식에서는 사용할 수 없는 기능인 손실 RGB와 함께 사용할 수 있습니다.
애니메이션: 트루 컬러 애니메이션 이미지를 지원합니다.
메타데이터: EXIF 및 XMP 메타데이터 (예: 카메라에서 사용됨)를 포함할 수 있습니다.
색상 프로필: ICC 프로필이 삽입되어 있을 수 있습니다.
더 나은 이미지 압축과 이러한 모든 기능을 지원하기 때문에 WebP는 PNG, JPEG, GIF와 같은 대부분의 이미지 형식을 완벽하게 대체할 수 있습니다. 더 좋은 점은 WebP가 투명도가 있는 손실(lossy) 이미지 지원과 같이 새로운 이미지 최적화 기회를 지원한다는 사실을 알고 계셨나요? 예. WebP는 이미지 형식의 스위스 육군 칼입니다.
그렇다면 이 마법은 어떻게 만들어질까요? 우리 옷을 묶어 비하인드 스토리를 살펴보죠.
손실 WebP
WebP의 손실(lossy) 압축은 (동영상) 프레임을 예측하는 데 VP8과 동일한 방법을 사용합니다. VP8은 블록 예측에 기반하며 여느 블록 기반 코덱과 마찬가지로 프레임을 매크로 블록이라고 하는 작은 세그먼트로 나눕니다.
각 매크로 블록 내에서 인코더는 이전에 처리된 블록을 기반으로 중복된 모션 및 색상 정보를 예측할 수 있습니다. 이미지 프레임은 각 매크로 블록의 주변 공간에서 이미 디코딩된 픽셀만 사용하고 그중 알 수 없는 부분을 채우려고 한다는 점에서 '핵심'입니다. 이를 예측 코딩이라고 합니다 (VP8 동영상의 프레임 내 코딩 참고).
그런 다음 블록에서 중복 데이터를 빼서 압축 효율을 높입니다. 압축된 형태로 전송하기 위해 잔여라고 하는 약간의 차이만 남습니다.
수학적 가역 변환 (이산화 코사인 변환을 의미하는 유명한 DCT)을 적용한 후 잔차는 일반적으로 훨씬 더 효과적으로 압축할 수 있는 많은 0 값을 포함합니다. 그런 다음 그 결과가 양자화되고 엔트로피 코딩됩니다. 흥미롭게도 양자화 단계는 비트가 손실(lossy)으로 버려지는 유일한 단계입니다(아래 다이어그램에서 QPj로 나누기를 검색). 다른 모든 단계는 반전 가능하며 손실이 없습니다.
다음 다이어그램은 WebP 손실 압축과 관련된 단계를 보여줍니다. JPEG와 비교하여 구별되는 특징은 빨간색 원으로 표시됩니다.
WebP는 블록 양자화를 사용하고 다양한 이미지 세그먼트에 적응적으로 비트를 분산합니다. 즉, 낮은 엔트로피 세그먼트의 경우 더 적은 비트를, 높은 엔트로피 세그먼트의 경우 높은 비트를 배포합니다. WebP는 산술 엔트로피 인코딩을 사용하여 JPEG에 사용되는 Huffman 인코딩에 비해 더 나은 압축을 달성합니다.
VP8 인트라 예측 모드
VP8 인트라 예측 모드는 다음과 같은 세 가지 유형의 매크로 블록과 함께 사용됩니다.
- 4x4 루마
- 16x16 루마
- 8x8 크로마
네 가지 일반적인 내부 예측 모드가 이러한 매크로 블록에서 공유됩니다.
H_PRED (수평 예측). 블록의 각 열에 왼쪽 열 L의 사본을 채웁니다.
V_PRED (세로형 예측). 블록의 각 행을 위 행 A의 사본으로 채웁니다.
DC_PRED (DC 예측). A 위 행의 픽셀 평균과 L 왼쪽 열의 평균을 사용하여 블록에 단일 값을 채웁니다.
TM_PRED (TrueMotion 예측). On2 Technologies에서 개발한 압축 기술에서 이름을 얻은 모드입니다. TM_PRED는 A 행과 L 열 외에도 블록 위와 왼쪽에 있는 픽셀 P를 사용합니다. P부터 시작하는 A의 픽셀 간 수평 차이는 각 행을 시작할 L부터의 픽셀을 사용하여 전파됩니다.
아래 다이어그램은 WebP 손실 압축에 사용되는 다양한 예측 모드를 보여줍니다.
4x4 루마 블록의 경우 V_PRED 및 H_PRED와 비슷하지만 다른 방향의 픽셀 예측에 상응하는 6개의 추가 intra 모드가 있습니다. 이러한 모드에 관한 자세한 내용은 VP8 비트스트림 가이드를 참조하세요.
적응형 블록 양자화
이미지 품질을 개선하기 위해 이미지를 시각적으로 유사한 특징을 가진 영역으로 분할합니다. 이러한 세그먼트마다 압축 매개변수 (양자화 단계, 필터링 강도 등)는 독립적으로 조정됩니다. 이렇게 하면 비트를 가장 유용한 위치에 재분산하여 효율적인 압축이 이루어집니다. VP8은 최대 4개의 세그먼트를 허용합니다 (VP8 비트스트림의 제한).
WebP (손실)가 JPEG보다 나은 이유
예측 코딩은 WebP가 JPEG보다 앞서는 주된 이유입니다. 블록 적응형 양자화도 큰 차이를 만듭니다. 필터링은 중간/낮은 비트 전송률에서 도움이 됩니다. 부울 산술 인코딩은 Huffman 인코딩에 비해 5%~10% 의 압축 이득을 제공합니다.
무손실 WebP
WebP 무손실 인코딩은 여러 가지 기술을 사용하여 이미지를 변환하는 것을 기반으로 합니다. 그런 다음 변환 매개변수와 변환된 이미지 데이터에 대해 엔트로피 코딩을 수행합니다. 이미지에 적용되는 변환에는 픽셀의 공간 예측, 색상 공간 변환, 로컬에서 표시되는 팔레트 사용, 여러 픽셀을 하나의 픽셀로 패킹, 알파 교체가 포함됩니다. 엔트로피 코딩에는 거리 값의 2D 인코딩과 간결한 희소 값을 사용하는 LZ77-Huffman 코딩의 변형을 사용합니다.
예측자 (공간) 변환
공간 예측은 인접한 픽셀이 상관관계가 있는 경우가 많다는 사실을 이용하여 엔트로피를 줄이는 데 사용됩니다. 예측자 변환에서 현재 픽셀 값은 이미 디코딩된 픽셀 (스캔-라인 순서)에서 예측되며 잔여 값 (실제 - 예측)만 인코딩됩니다. 예측 모드는 사용할 예측 유형을 결정합니다. 이미지는 여러 정사각형 영역으로 분할되며 한 정사각형의 모든 픽셀은 동일한 예측 모드를 사용합니다.
가능한 예측 모드에는 13가지가 있습니다. 널리 사용되는 픽셀은 왼쪽, 상단, 왼쪽 상단, 오른쪽 상단 픽셀입니다. 나머지는 왼쪽, 상단, 왼쪽 상단, 오른쪽 상단의 조합(평균)입니다.
색상 (상관관계없음) 변환
색상 변환의 목표는 각 픽셀의 R, G, B 값을 데코레이션하는 것입니다. 색상 변환은 녹색 (G) 값을 그대로 유지하고 녹색을 기준으로 빨간색(R)을 변환하고 녹색을 기준으로 파란색 (B)을 변환한 다음 빨간색을 기준으로 변환합니다.
예측자 변환의 경우와 마찬가지로, 먼저 이미지가 블록으로 나뉘고 블록의 모든 픽셀에 동일한 변환 모드가 사용됩니다. 각 블록에는 녹색에서 빨간색으로, 녹색에서 파란색, 빨간색으로 파란색의 세 가지 유형의 색상 변환 요소가 있습니다.
녹색 변환 빼기
'녹색 빼기 변환'은 각 픽셀의 빨간색과 파란색 값에서 녹색 값을 뺍니다. 이 변환이 있으면 디코더는 녹색 값을 빨간색과 파란색 모두에 추가해야 합니다. 이는 위에서 언급한 일반 색상 데코레이션 변환의 특수한 경우로, 컷오프를 보장할 만큼 자주 발생합니다.
색상 색인 생성 (팔레트) 변환
고유한 픽셀 값이 많지 않은 경우 색상 색인 배열을 만들고 픽셀 값을 배열의 색인으로 대체하는 것이 더 효율적일 수 있습니다. 색상 색인 변환을 사용하면 이러한 작업이 가능합니다. 색상 색인 생성 변환은 이미지의 고유한 ARGB 값 수를 확인합니다. 이 숫자가 기준점 (256) 미만이면 ARGB 값의 배열을 만든 다음 픽셀 값을 상응하는 색인으로 바꾸는 데 사용됩니다.
색상 캐시 코딩
무손실 WebP 압축은 새 픽셀을 재구성하기 위해 이미 본 이미지 프래그먼트를 사용합니다. 흥미로운 일치 항목이 없으면 로컬 팔레트를 사용할 수도 있습니다. 이 팔레트는 최근 색상을 재사용하도록 지속적으로 업데이트됩니다. 아래 그림에서는 스캔이 내려가면서 최근 사용된 32가지 색상으로 점진적으로 업데이트되는 로컬 색상 캐시를 확인할 수 있습니다.
LZ77 역방향 참조
역방향 참조는 길이 및 거리 코드의 튜플입니다. 길이는 스캔 줄 순서에서 복사할 픽셀 수를 나타냅니다. 거리 코드는 이전에 본 픽셀의 위치를 나타내는 숫자이며, 이 위치로부터 픽셀을 복사합니다. 길이 및 거리 값은 LZ77 프리픽스 코딩을 사용하여 저장됩니다.
LZ77 프리픽스 코딩은 큰 정수 값을 프리픽스 코드와 추가 비트의 두 부분으로 나눕니다. 접두사 코드는 엔트로피 코드를 사용하여 저장되고, 추가 비트는 엔트로피 코드 없이 있는 그대로 저장됩니다.
아래 다이어그램은 단어 일치 (픽셀 대신)가 적용된 LZ77(2D 변형)을 보여줍니다.
알파를 포함하는 손실(lossy) WebP
손실 WebP (RGB 색상)와 무손실 WebP (알파 포함 무손실 RGB) 외에도 RGB 채널에는 손실 있는 인코딩을 허용하고 알파 채널에는 무손실 인코딩을 허용하는 또 다른 WebP 모드가 있습니다. 이러한 가능성 (손실이 있는 RGB 및 무손실 알파)은 현재 기존 이미지 형식에서는 사용할 수 없습니다. 오늘날 투명도가 필요한 웹마스터는 이미지를 PNG로 무손실 인코딩해야 하므로 크기가 크게 팽창할 수 있습니다. WebP 알파는 픽셀당 낮은 비트로 이미지를 인코딩하고 이러한 이미지의 크기를 줄이는 효과적인 방법을 제공합니다. 알파 채널의 무손실 압축은 손실 (품질 90) WebP 인코딩보다 22% 바이트만 추가합니다.
전반적으로 투명 PNG를 손실이 있는 알파 WebP로 대체하면 크기가 평균 60~70% 절약됩니다. 이 기능은 아이콘이 풍부한 모바일 사이트(예: everything.me)에서 매력적인 기능으로 확인되었습니다.
