[2012널리세미나] the anatomy of image format
TRANSCRIPT
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