GIF
GIF(Graphics Interchange Format)는 PNG와 마찬가지로 bitmap 이미지 포맷이다. Portability를 강점으로 1987년에 개발되어 www에서 널리 사용되었다. 하지만 pixel 당 8비트밖에 지원하지 않으며, lossless 압축에 사용된 LZW 알고리즘이 특허 문제에 얽혀있었던 탓에 사용 빈도가 많이 줄어든 포맷이다.
그러나 GIF 포맷이 여지껏 사용되는 이유는 여전히 간단한 이미지를 저장하는 데에는 강점이 있고, JPEG이나 PNG 등 다른 포맷과 달리 움직이는 이미지(Animated Image)를 지원하기 때문이다.
한번 알아보도록 하자.
GIF 알아보기
GIF Structure
Header
GIF 파일의 시작은 버전 및 포맷을 알려주는 매직 넘버(GIF87a or GIF89a)로 시작한다.
이후 GIF의 logical screen이 가지는 기본적인 속성들을 명시한 descriptor가 이어진다. 만약 global color table*이 있을 경우 descriptor 이어서 함께 명시된다.
*Color table: GIF에서는 기본적으로 사용되는 색상을 table에 놓고 table index 값을 pixel에 대응시키는 식으로 이미지를 표현한다. 그래서 각 프레임은 파일 내 모든 프레임이 공유하는 global color table과 프레임 개별로 가질 수 있는 local color table 중에 선택하여 색상을 인덱싱한다. 물론 local color table이 많을수록 파일의 크기는 커지게 될 것이다.)
Segments
Header가 끝나면 파일은 일련의 block의 집합으로 표현된다. 각 block은 1바이트의 고유 sentinel로 구분된다.
- Image:
,(0x2C) - Extension block:
!(0x21) - Trailer:
;(0x3B, 파일의 마지막 바이트가 된다.)
Image: Image block은 이미지를 정의하며, image descriptor로 시작한다. 여기에는 이미지 위치, 크기 등이 들어가고 local color table이 존재할 경우 함께 명시된다. 이후 LZW 알고리즘으로 압축된 sub-block*들이 linked list로 이어져서 명시된다. (* sub-block은 최대 255 바이트의 크기를 가진다.)
GIF의 압축은 Lempel-Ziv-Welch (LZW) lossless 알고리즘을 사용한다. 이미지 픽셀 데이터들을 왼쪽 위부터 가로로 읽어나가며 LZW encoding을 하는 방식으로 적용된다.
Extension: Extension block은 GIF 이미지를 더 풍부하게 만들어 준다. Plain text, graphic control, comment 등의 종류가 있으며 이 또한 sub-block들로 이루어진다. Extension block이 이미지를 수정하는 경우(예를 들어, animation delay time을 주거나, 투명한 배경색을 지정하는 등), 해당 이미지 앞에 위치해야한다.
Extension block은 필수가 아니고, decoder 입장에서는 이를 해석할 수 없더라도 image block만으로 이미지를 그릴 수 있게 된다.
GIF Palette
GIF는 palette 기반의 이미지 포맷으로, 이미지에 사용된 색상은 RGB 값으로 table에 기록된다. 그리고 각 pixel 별 할당된 8비트로 총 256 가지의 색상을 indexing 할 수 있다. 8비트 채널을 사용하는 RGB의 표현 가능한 색상의 수가 16,777,216 개(2^24)라는 것을 생각하면 참 제한적인 숫자다. 사실 GIF가 소개될 당시에는 모니터나 그래픽 관련 하드웨어가 많은 색을 표현할 만큼 뛰어나지 않았기 때문에 이 정도로도 충분했다고 한다.
이후 dithering을 통해 작은 color palette로도 여러 색상을 approximate 할 수 있게 되었다고 한다.
더불어 color table에 transparent 색상을 추가하여, 여러 이미지를 겹치거나(layering) 이어붙이는(tiling) 방식으로 true color를 표현하기도 한다. 여기서 transparent 색상은 이전 이미지에서 사용했던 색을 그대로 사용한다는 것을 의미한다. 각 이미지는 local color table을 가지고 있기 때문에 전체 이미지 관점에서는 256 가지보다 많은 색상을 표현할 수 있게 된다.
움직이는 이미지의 표현
GIF는 처음부터 움직이는 이미지를 저장하기 위해 고안된 포맷은 아니다. 한 파일에 여러 장의 이미지를 저장할 수 있다는 속성이 프레임의 시간적 순서를 저장하기까지 확장된 것이다. 때문에 GIF89a 스펙부터는 Graphic Control Extension (GCE)을 추가하면서 이미지(프레임) 간의 딜레이까지 명시할 수 있도록 하였다.
한 GIF 파일에 들어간 여러 장의 프레임은 각각 하나의 이미지 정보를 이룬다. 즉, 각 프레임 별로 LZW로 압축된 이미지 데이터가 여러 sub-block들로 이루어져 있는 것이다.
기본적으로 GIF의 애니메이션은 마지막 프레임이 출력된 이후 멈추도록 되어 있었다. 90년대 이후 application-specific 데이터를 저장하기 위한 Application Extension block이 추가되면서 NAB(Netscape Application Block)라는 block이 생겨났고, 이 block에 loop 횟수를 명시할 수 있게 되었다.
움짤을 표현 가능한 다른 포맷은 없을까?
결론부터 말하자면 있다!
PNG 기반으로는 애니메이션을 지원하도록 만든 APNG(Animated PNG)나 MNG(Multiple-image Network Graphics) 등이 있다. MNG는 이제는 거의 지원을 하지 않는 포맷이고, APNG의 경우 많은 브라우저에서 지원하고 있지만 PNG 그룹에서 아직 공식적인 확장 기능으로 인정해주지 않는 것 같다.
아예 새로운 포맷으로는 구글에서 개발하여 무료로 배포하고 있는 WebP가 있는데, 사실 WebP는 JPEG, PNG, GIF를 한 데 모아놓은 포맷이라 할 수 있겠다. 유튜브의 섬네일 같은 경우도 마우스를 올리면 움직이는 것을 볼 수 있는데, 이것이 WebP 포맷으로 만들어진 이미지다. (지원되는 브라우저에 한해서만 WebP로 로드한다고 한다.) WebP 포맷이 압축률도 좋다고 하고, 차차 이 포맷으로 많이 바뀌지 않을까 기대해본다!
Comment
흠... GIF는 자료를 찾아봐도 난해한 자료가 많은 것 같다... (오래돼서 그런가...)
그렇지만 어쨌든 필요한 부분은 정리를 쭉 했으니, 이만하면 된 것 같다. 압축 방식까지 자세히 파고들기에는 머리가 지끈거려온다 ㅋ.
(이미 끝난) 면접을 위해 준비한 내용들이지만 WebP나 Exif, XMP 등에 대한 내용도 정리해서 포스팅 해야겠다!
Reference
