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