Loading
2022. 11. 2. 22:56 - lazykuna

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, 병렬 처리λ₯Ό 염두에 λ‘” 데이터 νŒŒν‹°μ…”λ‹ λ“±μœΌλ‘œ μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μ‹œμΌ°λ‹€κ³  ν•©λ‹ˆλ‹€. μžμ„Έν•œ ν…Œν¬λ‹‰μ€ λ…Όλ¬Έ μ°Έκ³ 

μ°Έμ‘°

λŒ“κΈ€μ„ μž…λ ₯ν•˜μ„Έμš”