Webp(VP8 코덱)이 이미지를 압축하는 방식

🚨 해당 분야에 대해 아는 내용이 거의 없으므로 검증되지 않은 내용 및 잘못된 내용이 존재할 수 있습니다. 피드백 남겨주시면 개선하도록 하겠습니다.

최근 Webp 코덱의 입지가 빠르게 늘어나고 있는데, jpg의 손실압축도, Png의 무손실압축도, gif의 움짤기능도 모두 지원하는 “만능 포멧”입니다. 과연 어떤 알고리즘이길래 이렇게 다방면으로 쓰일 수 있는지 궁금했는데, 오늘 이 참에 알아보았습니다.

1. 스펙

위에서 언급한 바와 같이

• 손실압축
• 무손실압축
• 동영상 기능 (소리 없는)
• 알파채널

을 모두 지원합니다. 거의 무안단물급이라는 말이죠..

하지만 무손실과 손실 압축 알고리즘은 다르고, 동영상은 또 움짤과는 다릅니다. 각기가 다른 알고리즘을 사용하다 보니, 이 포멧은 꽤 복잡할 수밖에 없습니다. 이러한 복잡한 과정이 어떻게 진행되는지 궁금해서 겉핥기로 알아보았습니다.

2. 무손실 압축

기본적으로 무손실 압축은 일반적인 Deflate 압축 알고리즘 사용하는데, 여기에 추가적으로 여러 “인코딩” 방법들을 사용합니다. 이에 대해서는 크게 아래의 4가지 인코딩 방법이 있습니다.

enum TransformType {
  PREDICTOR_TRANSFORM             = 0,
  COLOR_TRANSFORM                 = 1,
  SUBTRACT_GREEN                  = 2,
  COLOR_INDEXING_TRANSFORM        = 3,
};

구체적인 설명은 아래와 같습니다.

예측자 변환 (predictor transform)

이건 동영상에서 쓰는 방식이긴 한데, 정지화상에도 사용하는 건 굉장히 참신한 아이디어 같네요. 인접한 공간이 유사한 경우(엔트로피 계산하여), 잔여 값(실제 - 예측)만 인코딩하여 저장하는 방식입니다. 이를 통해 동일한 패턴이 여러번 반복되는 이미지는 크게 압축률을 높일 수 있습니다.

예를 들면, 위 사진에서 왼쪽 열을 기반으로 새로운 칸을 채우는 것이 제일 실제 이미지와 유사하다는 것을 계산해내어, Vertical-Left 라는 예측자만으로 여러 픽셀을 한번에 표현할 수 있습니다.

참고로 이는 손실 압축에도 사용되는 매커니즘입니다. (다만 손실 압축은 손실을 동반한 보다 단순한 인코딩을 사용합니다)

색상 변환 (color transform)

RGB 각 값에 상관관계를 부여하는 압축방식이라고 합니다. 이게 어떤 경우에 효과가 있는지는 솔직히 잘 모르겠지만, 특수한 일부 이미지에 대해서는 효과가 꽤 좋을 것 같네요.

초록색 변환 (subtract green)

초록색 값을 기준으로 다른 색상 값을 재생성하는 인코딩 방법입니다.

void AddGreenToBlueAndRed(uint8 green, uint8 *red, uint8 *blue) {
  *red  = (*red  + green) & 0xff;
  *blue = (*blue + green) & 0xff;
}

솔직히 어떤 경우에 유용한지는 잘 모르겠습니다. 색상 변환보다도 더 희소한 케이스일듯?

색상 캐시 (indexing transform)

gif와 유사한 방식이지만, global 한 팔레트가 아니라 local/window 단위로 팔레트가 적용되어 훨씬 효율적으로 이미지를 인코딩 할 수 있게 됩니다. gif의 장점을 잘 차용해 온 형태라고 볼 수 있을 것 같습니다.

PNG와 어떻게 다른가?

PNG는 단순 Deflate 알고리즘을 사용하여 이미지를 압축하는 무손실 압축으로 알려져 있습니다. 특정 윈도우에 대해 LZ77 알고리즘으로 압축하여 색상 팔레트 형성 후 허프만코드로 압축하는 방식입니다. (허프만코드로 압축하는 구체적인 예는 jpeg 편 참고)

이러한 테크닉들로 무손실 압축인데도 png 대비 크기가 60% ~ 70%에 불과하다고 합니다.

3. 손실 압축 = VP8 코덱

VP8 코덱은 동영상 코덱 중 하나인데, Webp는 손실 압축을 할 때 이 VP8 키프레임 인코딩을 사용하게 됩니다. 동영상에서 사용되는 영상 압축 테크닉을 정지화상에 사용하지 못 할 이유는 없잖아요?

움짤도 마찬가지로 이를 사용하는데, 움짤은 보통 키프레임만으로 이루어진 포멧입니다. 보간(Prediction)이 들어간 경우 일부 장치에서 인식을 못 한다고 하기도 하고, 리소스 소모가 심하기도 하여 통상적으로는 잘 사용하지 않는 것이 관례입니다. 사실상 보간 프레임까지 사용하면 그건 “움짤” 보다는 “동영상”에 더 가깝지 않나 싶기도 하네요.

키프레임 인코딩

위의 정지 화상 인코딩과 더불어서 몇 가지 추가적인 테크닉이 적용됩니다.

적응형 블록 양자화

jpeg의 양자화와 비슷한 테크닉이지만, 주목할 만한 키워드는 바로 “적응형”이라는 것입니다. 유사한 특징을 가진 영역으로 나누어서, 각 영역에 최적화된 형태로 양자화시켜 저장함으로서 손실을 최소화하며 저장할 수 있게 됩니다.

DCT, WHT 기술을 통해 손실을 최소화하는 형태로 저장을 한다고 합니다. 이를 통해 16x16 데이터를 여러개의 2-D 데이터로 인코딩이 가능하다고 합니다 😲. 자세한 내용은 해당 논문을 참고 바랍니다.

재미있는 점은 jpeg와 마찬가지로, 여기서도 luma / chroma 의 해상도가 다릅니다. 16x16 의 macroblock에 대해서, luma는 16x16로 압축을 하고 chroma는 8x8 블록으로 압축을 합니다.

Prediction

Prediction이란, 이미지의 일부분을 재사용하여 다른(시간 및 공간) 영역을 효율적으로 표시하는 방법을 의미합니다.

여기서 키프레임간의 보간(예측)을 위해서는 “TM_PRED”라는 것을 사용하고, 이미지 내부에서의 예측을 위해서는 “SPLITMV”라는 방식을 사용한다고 합니다. 이러한 레퍼런스 프레임들을 이용하여 보간 프레임들을 만들게 되죠.

보다 구체적으로는 보간을 위해서는 “기준 프레임(Reference Frame)” 이라는 개념이 필요한데, 실제 표시가 되고 핵심이 되는 프레임을 “Golden Reference Frame” 이라고 일컫고, 오로지 디코딩 목적으로만 쓰이는 “Alternative Reference frame” 이라는 개념 또한 존재합니다.

이미지간 보간(Inter)시에는 각 픽셀별로 bicubic interpolation을 사용하고, 이를 근처 여러 픽셀들에게 재 사용할 수 있도록 인코딩한다고 합니다. 변화량을 기록하는 대신 인터폴레이션을 사용한다는 게 꽤 참신하네요.

이미지 자체를 구성(Intra)할 때는 크게 4가지 전략이 사용된다고 합니다.(H, V, DC, TM). 여기서 TM_PRED 가 특이한데, 대각선 방향의 픽셀을 사용하여 보간을 한다고 합니다.

• 다만 궁금한 점은, intra prediction으로 인코딩 할 수 있는 상황을 어떻게 판독하는지에 대한 정보는 찾지 못했습니다. 특정 window size로 일일이 cosine similarity 같은 것을 이용하여 특정 조건을 만족할 경우 수행되는 걸까…
• 그리고 Reference Frame을 어떻게 판독하는 것인지에 대한 설명도 잘 안 나와있네요 🤔 이 부분도 아마 다른 코덱과 유사하게 엔트로피 사용해서 하지 않을까 지레 짐작합니다.

이외에도 …

Flexible reference frame, 병렬 처리를 염두에 둔 데이터 파티셔닝 등으로 성능 최적화를 시켰다고 합니다. 자세한 테크닉은 논문 참고

참조

• https://developers.google.com/speed/webp/docs/compression
• https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification
• https://static.googleusercontent.com/media/research.google.com/ko//pubs/archive/37073.pdf
• LZ77 알고리즘