[2012널리세미나] The Anatomy of Image Format
- 1. The Anatomy of Image Format 이미지 포맷 해부학 이건준 | 네이버UI개발팀 | NTS
- 2. Agenda • Why? • Bitmap • GIF • JPEG • PNG • so what?
- 3. Why?
- 4. • 2차원적인 사각 평면을 작은 격자로 나누고 그 위에 색상을 숫자로 표현한다. • 이 격자 하나를 픽셀(pixel)이라 하고 bitmap 은 픽셀의 집합이라고 할 수 있다. Bitmap
- 5. Bitmap 4 x 4 Bitmap Image (1bit depth)
- 6. Bitmap 4 x 4 Bitmap Image (1bit depth) = 9 = 6 = 9 = 6
- 7. Bitmap 파일형식 파일크기 (80byte) 이미지 데이터 시작 offset 이미지 width x height
- 9. • 10개의 색상으로 50px X 50px의 비트맵 이 미지를 만들면?? • 팔레트 미사용 50 x 50 x 3 = 7500 bytes • 팔레트 사용 (10 x 3) + (50 x 50 x 1) = 2530 bytes Bitmap
- 10. • 최대 256개의 색상을 팔레트로 가질 수 있음 • LZW (Lempel-Ziv-Welch) 방식으로 무손실 압축 • Interlace 지원 • Animation 지원 GIF
- 11. • 인갂의 137만개의 시싞경 중 색을 감지하는 싞경은 7만개 뿐이다 • 사진에서 인접한 픽셀은 연속되는 유사한 색 상이므로 미세한 색상의 변화는 알 수 없다. JPG
- 12. JPG 24bit Bitmap 약 175KB JPG quality 100 약 35KB
- 13. • YCC Sampling -> DCT -> 양자화 -> huffman 코딩의 4단계로 데이터가 만들어진 다. • JPEG 그래픽압축 표준을 사용한 JFIF(JPEG File Exchange Format) 파일이다. JPG
- 14. JPG 8 x 8 Sample Image Unit after DCT
- 15. JPG Quantization by 50 Processed Image
- 16. • GIF 파일의 LZW 압축알고리즘의 특허료 문 제로 W3C에서 개발한 오픈 포맷 • LZW의 특허를 피하기 위해 DEFLATE 방식으 로 압축함. • 8~24bit color와 alpha 채널을 지원 PNG
- 17. 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 = ? 곱셈을 덧셈으로 응용이 가능하다.
- 18. 기술자가 아닌 전문가가 되어 다양한 분야에 HTML을 응용하며 미래 웹 분야의 큰 영향력을 발휘하자! so what?
- 19. 19