JPG와 PNG의 차이

JPG와 PNG의 가장 큰 차이점은 각각 사용하는 압축 알고리즘이 다르다는 점이다.

JPG는 손실 압축 알고리즘(lossy compression algorithm)을 사용한다. 파일 크기를 줄이기 위해 이미지 정보 중 일부를 버린다. 
반면, PNG는 무손실 압축 알고리즘(Lossless compression algorithm)을 사용한다.
이로 인해 나타나는 차이점은 파일의 용량 및 화질이다. 
JPG는 PNG에 비해 더 작은 파일 크기를 가질 수 있으나 그만큼 화질에서 손해를 본다.
따라서 용량이 중요할 때는 JPG를, 용량보다 품질이 중요할 경우에는 PNG를 사용하는 것이 좋다. 
추가로, 투명 배경이 필요할 경우에도 PNG를 사용한다.

JPG 손실 압축 알고리즘

JPG는 픽셀 기반 이미지이며, 하나의 픽셀에 24비트가 저장되어 있다. 
정확히는 R, G, B 채널에 각각 8비트 씩 할당된다.
따라서, [0, 0, 0] 부터 [255, 255, 255]에 이르는 색을 표현할 수 있다.

예를 들어, 파란색은 [35, 135, 245]란 3개의 R, G, B 채널값으로 표현할 수 있다.
이는 결국, [8bit, 8bit, 8bit]로 볼 수 있고, 따라서 총합 [24bit]가 된다. 픽셀 하나에 24비트를 할당한다는 것은 바로 이런 의미이다.
이는 사람이 볼 수 있는 모든 색을 표현했다는 의미에서 트루 컬러 또는 풀컬러라고 부른다.
하지만 R, G, B 3개의 채널만 갖고 있고, 알파 채널을 지원하지 않기 때문에 투명한 배경화면이 불가하다.
JPG는 손실 압축을 통해 이미지 품질을 희생하고 더 적은 용량을 택한 이미지 저장방식이다.
중요한 정보는 최대한 보존하고 사람들이 잘 느끼지 못하는 정보는 줄임으로써 이를 가능케한다.
따라서 JPG로 저장하기만해도 손실이 발생하며 저장을 누적할 수록 손실도 누적된다.
아래는 JPG의 손실 압출 알고리즘에 대한 설명이다.

1) 색 공간 변환과 서브 샘플링

우선, 각 픽셀의 R, G, B 데이터를 YCbCr이라는 다른 색 공간 데이터로 변환한다.

이때, Y는 밝기를 Cb는 파랑에 대한 색차 성분을, Cr은 빨강에 대한 색차 성분을 뜻한다.
사람의 눈은 색상 성분보다 휘도(광원의 단위 면적당 밝기의 정도) 성분에 더 민감하다.
전체적인 이미지를 인지하는 과정에서 명암이 중요하기 때문에, 명암이 비슷한 수준에서 색이 살짝 바래도 사람은 잘 인지하지 못한다.
따라서 사람이 민감하게 반응하는 밝기 정보(Y)는 변경하지 않고, 색차(Cb, Cr) 정보를 줄여 압축하는 것을 서브 샘플링이라고 한다.

색차(Chrominance)는 줄여서 크로마라고 부르기에 크로마 서브 샘플링이라고도 하며, 다운 샘플링이라고도 한다.

이때, 색차 정보를 어떤 비율로 버리느냐에 따라 4:4:4, 4:2:1, 4:2:0 등으로 방식이 나뉜다.

JPG의 서브 샘플링은 보통 4:2:0 방식을 사용한다.

4개씩 2줄로 묶어 첫 번째 행에서 2개의 크로마, 두 번째 행에서는 0개의 크로마를 살려주는 방식이다.

2) DCT & 양자화

또한, 사람의 눈이 고주파의 명도 변화에 둔감하다는 점을 이용하여 고주파 명도 정보를 버린다.

이미지를 8*8 크기의 픽셀 블럭 단위로 나누고 이를 DCT(이산코사인변환)한다.

DCT는 공간 영역에서 주파수 영역으로 바꾸는 과정을 의미하는데,

쉽게 말해 공간 영역은 픽셀 값으로 이루어진거고, 주파수 영역은 픽셀이 아닌 계수로 표현되는 영역이다.

예를 들어, 0부터 3까지 [0, 1, 2, 0, 3, 1, 1, 2, 0] 으로 정렬되지 않은 값 목록이 있다고 하자.

DCT를 하면 이 목록을 정돈하면서 동시에 각 숫자가 "얼마나 빈번한지" 카운트 한다.

따라서, 저 값은 [3, 3, 2, 1]로 변환된다. 공간 정보는 잃어버렸지만 주파수 정보를 알게 된 것이다.

이미지는 DCT를 통해 주파수 값을 갖는 행렬로 변환된다.

이때, 저주파는 행렬의 Top-Left 쪽에, 고주파는 행렬의 Bottom-Right 쪽에 위치한다.

주파수는 신호가 얼마나 자주 변화하는가를 나타내는 것이다.

이미지에서 저주파는 주변 영역과 색 차이가 적은 부분이다. 주로 내부 영역이 해당한다.

반면, 고주파는 색 차이가 큰 부분이다. 주로 모서리 부분이 해당한다.

사람은 고주파 성분의 명도 변화를 잘 눈치채지 못한다.

따라서, 양자화를 통해 고주파의 명도 정보를 버린다.

3) 지그재그 스캐닝 & 부호화

양자화를 진행하면 이미지 행렬 내부에 0으로 변환된 값이 많아진다. 

이를 지그재그로 훓어 일렬로 줄 세우고, 허프만 코딩을 진행한다. 

허프만 코딩이란 더 많이 등장하는 데이터일수록 더 짧은 코드를 갖도록 인코딩하는 방식이다.

이를 통해 정보를 더욱 압축한다.

PNG 비손실 압축 알고리즘

PNG 역시, 트루 컬러를 지원한다. 하지만 JPG와 다르게 8비트의 알파 채널을 추가로 지원하여 다양한 투명도를 표현할 수 있다.

알파 채널은 일종의 마스크 영역으로 이 채널을 조작해 R, G, B 색상 채널에 효과를 적용할 수 있다.

다만, 색상 정보를 갖고 있지 않으므로 PNG 역시 표현되는 색의 수는 여전히 2^24개 이다.

PNG는 DEFLATE라는 무손실 압축 알고리즘을 통해 용량보다 품질을 우선시한다.

LZ77 & 허프만 부호화

LZ77 알고리즘은 사전 방식의 압축 알고리즘으로, 현재 압축하려는 데이터가 이전에 존재했는지 파악해 반복 여부를 표시한다.
예를 들어, 아래 왼쪽 이미지를 압축하면 오른쪽과 같이 메모리를 사용한다.

진한 파란색 영역은 메모리를 거의 차지하지 않고, 빨간색 영역은 메모리를 많이 차지한다.

처음으로 색이 다른 공이 나오면 저장 공간을 사용하지만 그 다음으로 나올 땐 사용하지 않는다.

허프만 부호화는 JPG 압축에도 사용하는 엔트로피 부호화이다.

얼마나 자주 출현하는지 빈도를 파악해 빈도수가 높은 기호에 짧은 접두어 코드를 부여한다.

예를 들어, aaabbaabcd라는 문자열이 있다고 할때, 가장 많이 쓰인 건 a(5번), 그 다음은 b(3번), 적게 쓰인 건 c(1번)와 d(1번)이다.

a=0, b=01, c=011, d=111 이런 식으로 가장 많이 쓰인 문자에 짧은 코드를 부여한다. 그럼 00001010001011111으로 압축할 수 있다.

압축 전의 문자열은 80비트지만, 부호화 후에는 17비트로 줄어들게 되므로 21%나 압축한 셈이된다.