The Anatomy of Image Format 이미지 포맷 해부학

이건준 | 네이버UI개발팀 | NTS

Agenda

• Why?

• Bitmap

• GIF

• JPEG

• PNG

• so what?

Why?

• 2차원적인 사각 평면을 작은 격자로 나누고 그 위에 색상을 숫자로 표현한다.

• 이 격자 하나를 픽셀(pixel)이라 하고 bitmap은 픽셀의 집합이라고 할 수 있다.

Bitmap

Bitmap

4 x 4 Bitmap Image (1bit depth)

Bitmap

4 x 4 Bitmap Image (1bit depth)

= 9 = 6 = 9 = 6

Bitmap

파일형식

파일크기 (80byte)

이미지 데이터 시작 offset

이미지 width x height

Bitmap

어때요~ Bitmap 참 쉽죠?

• 10개의 색상으로 50px X 50px의 비트맵 이미지를 만들면??

• 팔레트 미사용

50 x 50 x 3 = 7500 bytes

• 팔레트 사용

(10 x 3) + (50 x 50 x 1) = 2530 bytes

Bitmap

• 최대 256개의 색상을 팔레트로 가질 수 있음

• LZW (Lempel-Ziv-Welch) 방식으로 무손실 압축

• Interlace 지원

• Animation 지원

GIF

• 인갂의 137만개의 시싞경 중 색을 감지하는 싞경은 7만개 뿐이다

• 사진에서 인접한 픽셀은 연속되는 유사한 색상이므로 미세한 색상의 변화는 알 수 없다.

JPG

JPG

24bit Bitmap 약 175KB

JPG quality 100 약 35KB

• YCC Sampling -> DCT -> 양자화 -> huffman 코딩의 4단계로 데이터가 만들어진다.

• JPEG 그래픽압축 표준을 사용한 JFIF(JPEG File Exchange Format) 파일이다.

JPG

JPG

8 x 8 Sample Image Unit after DCT

JPG

Quantization by 50 Processed Image

• GIF 파일의 LZW 압축알고리즘의 특허료 문제로 W3C에서 개발한 오픈 포맷

• LZW의 특허를 피하기 위해 DEFLATE 방식으로 압축함.

• 8~24bit color와 alpha 채널을 지원

PNG

so what?

구구단만 아는 아이 1 x 2 = 2 2 x 2 = 4 3 x 2 = 6 답은 246

곱셈의 원리를 아는 아이 1 x 2 = 2 2 x 2 = 4 or 123 + 123 3 x 2 = 6 답은 246

123 x 2 = ?

곱셈을 덧셈으로 응용이 가능하다.

기술자가 아닌 전문가가 되어

다양한 분야에 HTML을 응용하며

미래 웹 분야의 큰 영향력을 발휘하자!

so what?

19