English
Vision & 3D

Image Compression이미지 압축

600×400 사진은 날것의 색으로 72만 바이트지만, JPEG로는 3만 바이트 안팎이 됩니다. 이 페이지에는 브라우저용으로 짠 JPEG 인코더가 통째로 들어 있어, 진짜 .jpg 파일을 만들면서 색 나누기, 8×8 블록과 DCT, 양자화, 엔트로피 부호화를 한 단계씩 직접 만져 봅니다.

밝기 먼저, 색은 나중에

눈은 밝기에는 예민하고 색에는 둔합니다. 그래서 JPEG는 먼저 픽셀의 빨강·초록·파랑을 밝기 하나(Y)와 색 차이 둘(Cb는 파랑 쪽, Cr은 빨강 쪽)로 다시 씁니다. 4:2:0에서는 색을 가로 절반, 세로 절반 크기로만 남깁니다. 본격적인 압축 전에 이것만으로 데이터가 절반이 됩니다.

Y = 0.299R + 0.587G + 0.114B · Cb = 128 − 0.1687R − 0.3313G + 0.5B · Cr = 128 + 0.5R − 0.4187G − 0.0813B

체험 1: 인코더

JPEG output

이 페이지가 방금 만든 .jpg를 브라우저 자체 디코더로 연 것입니다. 누르거나 끌어서 확대할 곳을 고릅니다.

원본, 4배
JPEG, 4배

곡선: 지금 그림을 이 페이지 인코더로 품질 5부터 95까지 압축한 파일 크기(파랑)와 PSNR(분홍). 점이 지금 설정입니다.

체험 2: 채널 하나씩 보기

채널 그림의 한 점을 누르면 그 픽셀을 두 색 체계로 읽습니다.

체험 3: 어느 채널을 흐려도 될까

왼쪽은 밝기(Y)만, 오른쪽은 색(Cb·Cr)만 해상도를 줄였다가 다시 늘렸습니다. 숫자로는 둘 다 잃지만, 눈에 띄는 쪽은 한쪽입니다.

요약JPEG는 밝기와 색을 나눕니다.색은 해상도를 낮춰 저장하고, 사진에서는 대부분 알아채지 못합니다.같은 만큼 밝기를 흐리면 바로 보입니다.

참고문헌

  1. ITU-T Recommendation T.81 (1992) | ISO/IEC 10918-1. Digital compression and coding of continuous-tone still images.
  2. Hamilton, E. (1992). JPEG File Interchange Format, Version 1.02. C-Cube Microsystems.
  3. Mullen, K.T. (1985). The contrast sensitivity of human colour vision to red–green and blue–yellow chromatic gratings. Journal of Physiology 359.

블록을 물결의 합으로

각 채널을 8×8 블록으로 자릅니다. 블록마다 정해진 물결 무늬 64개를 섞은 것으로 다시 씁니다(이산 코사인 변환, DCT). 왼쪽 위 무늬는 평평한, 곧 블록의 평균입니다. 오른쪽·아래로 갈수록 빠르게 출렁입니다. 사진은 대부분 매끄러워서 블록의 힘이 왼쪽 위 숫자 몇 개에 몰립니다. 아직 잃은 것은 없습니다. DCT는 정확히 되돌릴 수 있습니다.

F(u,v) = ¼ C(u) C(v) Σₓ Σᵧ f(x,y) cos((2x+1)uπ/16) cos((2y+1)vπ/16) · C(0) = 1/√2, otherwise 1

체험 1: 무늬 64개

무늬를 누르면 크게 봅니다. 밝으면 양수, 어두우면 음수.

체험 2: 사진에서 블록 하나 꺼내기

픽셀(Y)
DCT 계수
원래 블록

체험 3: 블록을 직접 칠하기

이 블록의 DCT (반올림)

칸을 누르거나 끌어서 칠합니다.

요약8×8 픽셀 블록이 물결 세기 64개가 됩니다.매끄러운 블록은 거의 모든 것을 저주파 숫자 몇 개에 담습니다.날카로운 가장자리와 잔무늬는 계수 여러 개에 퍼집니다.

참고문헌

  1. Ahmed, N., Natarajan, T., Rao, K.R. (1974). Discrete cosine transform. IEEE Transactions on Computers C-23(1).
  2. Wallace, G.K. (1991). The JPEG still picture compression standard. Communications of the ACM 34(4).
  3. Rao, K.R., Yip, P. (1990). Discrete Cosine Transform: Algorithms, Advantages, Applications. Academic Press.

정보를 잃는 곳

물결 세기마다 양자화 표의 숫자로 나누고 반올림합니다. 잔무늬 물결은 큰 수로 나누므로 대부분 0이 됩니다. 품질 설정은 표 전체를 키우거나 줄입니다. 정보를 잃는 단계는 여기 하나뿐이고, JPEG 깨짐이 네모와 물결 모양인 이유도 이것입니다.

Fq(u,v) = round(F(u,v) / Q(u,v)) · scale = q < 50 ? 5000/q : 200 − 2q · Q = clamp(⌊(Q₅₀·scale + 50)/100⌋, 1, 255)

체험 1: 지금 품질의 표

밝기(Y) 표
색(Cb·Cr) 표

체험 2: 블록 하나를 나누고 반올림하기

DCT
반올림 뒤
원래
양자화 뒤
오차 ×4

체험 3: 모든 블록에서 앞의 N개만 남기기

체험 4: 표가 고르지 않은 이유

표준 표는 사람 눈에 맞춰져 있습니다. 잔무늬는 거칠게, 완만한 명암은 부드럽게 나눕니다. 아래는 모든 칸이 같은 고른 표를, 지금 품질의 표준 표와 파일 크기가 비슷해지도록 맞춘 것입니다. 바이트, PSNR, 눈으로 보이는 것을 비교해 보세요.

요약양자화는 나누고 반올림합니다. 손실은 여기서 생깁니다.품질이 낮을수록 나누는 수가 커지고 0이 늘어납니다.표의 모양이 어떤 세부를 먼저 버릴지 정합니다.

참고문헌

  1. ITU-T T.81 (1992), Annex K.1: Quantization tables.
  2. Independent JPEG Group. libjpeg, jcparam.c (jpeg_quality_scaling).
  3. Lohscheller, H. (1984). A subjectively adapted image communication system. IEEE Transactions on Communications 32(12).

숫자를 비트로 꾸리기

반올림 뒤 블록은 숫자 몇 개 뒤에 긴 0 줄이 붙은 모양입니다. JPEG는 지그재그 순서로 읽으며 0 아닌 숫자를 그 앞의 0 개수와 함께 적고, 끝의 0들은 끝 표시(EOB) 하나로 대신합니다. 자주 나오는 기호에는 짧은 허프만 부호, 드문 기호에는 긴 부호를 줍니다(JPEG 표준 표). 블록 평균(DC)은 앞 블록과의 차이로 적습니다. 이 단계는 잃는 것이 없습니다.

체험 1: 블록 하나를 손으로 부호화

체험 2: 바이트가 쓰이는 곳

체험 3: 표준 부호는 얼마나 좋을까

섀넌 엔트로피는 이 기호 빈도에서 어떤 부호라도 평균적으로 쓸 수 있는 가장 적은 비트 수입니다. 표준 허프만 표는 흔한 사진에 맞춰 한 번 만들어 둔 것이라 조금 위에 있습니다.

요약0은 하나씩이 아니라 개수로 적습니다.자주 나오는 기호에 짧은 부호를 줍니다.최적 허프만이나 산술 부호화는 엔트로피에 몇 % 더 가까워집니다.

참고문헌

  1. Huffman, D.A. (1952). A method for the construction of minimum-redundancy codes. Proceedings of the IRE 40(9).
  2. Shannon, C.E. (1948). A mathematical theory of communication. Bell System Technical Journal 27.
  3. ITU-T T.81 (1992), Annex K.3: Huffman tables.

JPEG가 가정하는 것

JPEG는 매끄러운 사진을 가정합니다. 또렷한 글자, 선, 단색 면에는 잔무늬가 많은데, 그것이 바로 양자화가 버리는 부분이라 가장자리에 물결이 생깁니다. JPEG를 다시 JPEG로 저장하면 조금씩 더 잃습니다. 무손실 PNG는 단색 면을 아주 잘 다룹니다. 새 형식(WebP, AVIF)과 신경망 코덱도 변환, 양자화, 엔트로피 부호화라는 같은 설계를 더 똑똑한 부품으로 씁니다.

체험 1: 오차를 눈으로 보기

JPEG 확대 (여기를 눌러 옮김)
|원본 − JPEG| 키움

체험 2: 다시, 또다시 저장하기

체험 3: 사진과 그림

선 하나가 그림 하나, 품질 10~95(4:2:0). 왼쪽 위일수록 좋습니다. 세로 점선은 같은 그림을 무손실 PNG로 저장한 크기입니다(축 안에 들 때만).

libjpeg와 대조

요약오차는 날카로운 가장자리 둘레에, 품질이 낮으면 블록 경계에도 모입니다.다시 저장하면 더 잃고, 8×8 격자가 밀리면 더 많이 잃습니다.글자와 단색 그림은 무손실 PNG가 더 작고 정확할 때가 많습니다.

참고문헌

  1. Wallace, G.K. (1991). The JPEG still picture compression standard. Communications of the ACM 34(4).
  2. Wang, Z., Bovik, A.C., Sheikh, H.R., Simoncelli, E.P. (2004). Image quality assessment: from error visibility to structural similarity. IEEE Transactions on Image Processing 13(4).
  3. Ballé, J. et al. (2018). Variational image compression with a scale hyperprior. ICLR.
  4. Images: scikit-image data.coffee (Rachel Michetti) · data.chelsea (Stefan van der Walt) · CC0.

교육용 페이지입니다. 직접 연 사진은 이 브라우저 안에서만 처리하고 올리거나 저장하지 않습니다.