lang/html

JPEG과 GIF

C/H 2006. 9. 22. 13:17

JPEG과 GIF



역사



GIF는 아메리카온라인(AOL)이 급성장 이후 몰락의 길을 걷게 된 컴퓨서브(Compuserve)에서 1987년에 만든 포맷이다. 온라인 상에서 그림 파일 전송을 위해 개발되었다. 개발 목적이 온라인 상에서의 이동이었으므로 높은 압축률이 매우 중요한 요구사항이었고, 특히 당시의 느린 모뎀 속도를 생각해 볼 때 가능하면 이미지 사이즈를 작게 만드는것이 매우 중요했다. GIF는 개발 당시의 컴퓨터들이 대부분 256컬러까지 지원하고 있었기 때문에 256 컬러만 지원했고 여전히 그렇다. 그런 한계에도 불구하고 GIF만의 독특한 장점이 있기 때문에 JPEG과 함께 인터넷 그래픽 파일 포맷의 양대산맥으로 확실히 자리를 굳혀 가고 있다.


JPEG은 포맷을 개발한 팀의 이름이 Joint Photographic Experts Group이어서 그 첫 글자를 따서 명명되다. 그룹 이름에 사진 전문가라는 이름이 들어 있다는 데서 알 수 있듯, JPEG은 사진처럼 현실감 있는 그래픽을 작은 사이즈로 압축하기 위해 개발되었다. 수천 컬러, 수백만 컬러 이상의 사진을 작은 사이즈로 줄여주는 데 자주 쓰인다. 어떤 사람들은 JPEG이 그래픽 포맷이라고 할 수 없다고 주장하기도 한다. JPEG은 개별 포맷이라기보다 TIFF나 JFIF(JPEG Interchange File Format)을 압축하는 데 쓰이는 하나의 방식이기 때문이다.




압축 원리



GIF 압축방식의 원리인 LZW(Lempel-Ziv Welch) algorhythm은 상당히 복잡하다. 검색엔진에서 LZW라고 쳐 보면 수 십개의 페이지를 찾을 수 있다. raster 데이타라는 것을 알아야 합니다. 우리가 보고 있는 모니터 화면의 픽셀은 삼원색의 조합이다. 삼원색 값의 조합을 달리함으로써 픽셀 별로 다른 색깔을 나타낸다. 이 때, 원색 하나 당 8비트라고 하면 한 픽셀은 8비트 x 3 = 24비트가 된다. 검은색을 표현한다면 빨강,파랑,녹색 모두 다 십진수 0(16진수 00, 2진수 00000000)이다. 반대로 흰색은 삼원색 모두 최대값인 십진수 255(16진수 ff, 2진수 111111111) 값을 가지면 된다. 이렇게 픽셀별로 삼원색의 값을 조합하면 다양한 컬러를 표현할 수 있다.


삼원색의 각 컬러 하나 당 8비트라고 했는데 그렇다면 총 몇 가지 색깔을 표현할 수 있을까? 픽셀의 컬러를 빨강-녹색-파랑(RGB;Red-Green-Blue)의 순서로 조합한다고 하자. 검은색 픽셀은 10진수로 표현하면 (0,0,0)이다. 흰색은 (255,255,255)이고, 빨간색 원색은 (255,0,0)이며, 파란색 원색은(0,0,255)이다. 회색은 빨강, 녹색, 파랑이 각각 반씩 켜진 상태이므로 (128,128,128)이다. 이런 방식으로 표현할 수 있는 컬러의 총 갯수는 원색 하나 당 256개의 값을 가질 수 있으므로, [256 x 256 x 256 = 16,777,216]컬러가 된다. "24비트 컬러"가 1670여만 컬러를 표현할 수 있는 이유가 이것이다.


GIF 같은 이미지 포맷은 위와 같이 픽셀 하나하나에 대해 일일이 원색 별로 값을 매기지는 않는다. 대신 컬러 테이블(색상표)을 갖고 있어서 각 조합수마다 고유의 숫자를 부여하고 있다. 특정 픽셀이 어떤 (r,g,b) 값을 갖는다면 이 순서쌍을 대표하는 컬러 테이블상의 값을 이용한다. 이런 데이타를 "raster 데이타"라 한다. 그리고 앞에서 본 것처럼 컬러 표현에 중복된 숫자가 자주 등장하므로 중복된 부분을 적당히 줄일 수 있다면 압축이 가능하다. 그런 압축 알고리듬 중 하나가 LZW 알고리듬이다. 알고리듬에 관한 자세한 내용은 이 글의 범위를 넘어서므로 여기서 줄인다.


JPEG은 GIF와 달리 컬러 정보의 문자열을 압축하지 않는다. JPEG은 인간 시각의 맹점을 이용한다. 사람의 시각은 밝기의 차이에는 민감하게 반응하지만 색깔이 달라진 것은 잘 분간하지 못한다. JPEG은 일단 일반적인 픽셀의 RGB 컬러 데이타를 밝기를 나타내는 부분과 색상을 나타내는 부분으로 변환한다. 그 다음, 밝기 정보를 담고 있는 부분은 그대로 두고 색상 정보를 담고 있는 부분만 그 픽셀에 인접한 두 픽셀 색상의 평균값을 사용한다. 색상 정보가 인접 픽셀의 색상 정보로 표현되므로 정보의 양이 줄어드는 것이다.


JFIF 포맷에서 사용하는 "YCbCr"이란 방식을 예로 들어 보자. Y는 밝기 정보이고, Cb와 Cr은 컬러 스케일이다. JPEG 방식은 보통의 RGB 컬러를 밝기와 컬러 스케일로 수학적 변환을 한 다음, 밝기를 나타내는 Y는 그대로 두고 Cb와 Cr은 인접한 두 개의 픽셀 Cb,Cr의 평균값으로 대체한다. 따라서 전체 이미지 사이즈는 2/3로 줄어든다. 3개 픽셀 대신 2개가 남기 때문이다. 이 때, 우리 눈에 민감하게 느껴지는 밝기 정보는 그대로 유지되면서 색상만 바뀌므로 화면상에 비치는 이미지는 별로 변화가 없어 보인다. 그 다음, 이미지를 8 x 8 블럭으로 나눈다. 그리고 각 블럭의 밝기 정보와 색상 정보를 DCT라는 복잡한 수학적 과정을 통해 처리해서 이미지 사이즈를 더 줄인다. 알고리듬의 자세한 내용은 모르더라도 한 가지 분명한 것은 JPEG이 몇 개를 줄여서 평균값을 사용한다는 점이다. 정보를 잃어 버리는 부분이 있다. "lossy compression"이란 그런 뜻이다. GIF 포맷처럼 기존 정보를 그대로 유지하면서 압축을 하지 않고 없어지는 정보가 있는 것이다. 우리 눈에는 다 비슷해 보인다. 이런 JPEG 방식을 통하게 되면 3메가 바이트 이미지가 불과 180 KB로 줄어든다.

반응형

'lang > html' 카테고리의 다른 글

연결(Link)  (0) 2006.09.22
테두리(border)와 줄(rule) & 수평정렬과 수직정렬  (0) 2006.09.22
Document Type  (0) 2006.09.22
HTML 요소분류  (0) 2006.09.22
마임 (MIME) 이란  (0) 2006.09.22