01. 비트맵(Bitmap)이란?
비트맵은 웹 상에서 가장 많이 접하는 이미지 포맷입니다. JPG, PNG, GIF 모두 비트맵 확장자입니다. 비트맵은 이미지의 각 점들을 픽셀 단위로 나타낸 형태이며, 사각 픽셀이 모여있기 때문에, 확대 시 '계단현상' 또는 '깨짐현상'이 발생합니다. 비트맵 방식의 이미지 표현은 컴퓨터에게 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서의 이미지 표시, 사실 표현, 특수효과, 합성, 보정 작업 등에 주로 사용됩니다. 또한, 픽셀 하나당 모두 색상 설정이 되어 있어, 사이즈가 커질수록 용량 또한 무거워집니다.
[BMP, JPG, GIF, PNG, webp의 특징]
BMP : 픽셀 데이터를 압축하지 않고 그대로 저장합니다. 구조가 간단한 반면, 파일 용량은 커지는 단점이 있습니다.
JPG : 화려한 효과와 포토샵 효과를 표현합니다. 손실 압축을 사용합니다.
GIP : 256 이하의 색상을 가진 무손실 압축을 사용합니다. 애니메이션 구현이 가능합니다.
PNG : 256색상 영상뿐만 아니라 트루컬러 영상도 지원합니다. 무손실 압축을 사용하기 때문에 파일 용량은 커지지만 픽셀 값이 변경되지 않은 장점이 있습니다.
webp : 새로 나온 확장자로, png와 jpg의 장점을 모두 가지고 있습니다.
02. 벡터(Vector)란?
벡터 방식은 비트맵과 상반되는 방식으로 이미지를 표현합니다. 수학적인 연산으로 이미지를 표현하기 때문에 확대해도 절대 깨지는 현상이 없으며, 경계 또한 선명하고 뚜렷합니다. 하지만, 이러한 방식의 이미지 표현은 컴퓨터에 엄청난 부담이 가해지므로 웹에서는 잘 사용하지 않으며 주로 도형, 글자 등을 그리는 작업에 주로 사용됩니다. 또한, 수학적인 연산으로 만들어졌기 때문에 사이즈를 키워도 용량은 변하지 않습니다.
[AI, EPS, SVG, PDF의 특징]
AI : illustrator가 소유하고 있으며 일부 예외는 있지만 자체 프로그램으로 읽고 편집할 수 있습니다.
EPS : 2차원 벡터 그래픽, 텍스트, 비트맵 이미지를 지원합니다.
SVG : 벡터, 래스터 이미지, 텍스트로 구성된 이미지의 텍스트 기반 설명입니다. 해상도의 영향을 받지 않으며 고화질 이미지를 적은 용량의 파일로 만들 수 있습니다.
PDF : 벡터와 래스터 그래픽을 모두 표시할 수 있는 범용 표준 파일 형식입니다.
03. 비트맵과 벡터 비교
| 비트맵(Bitmap) | 벡터(Vector) | |
|---|---|---|
| 정의 | 직사각형의 픽셀에 저장된 비트 정보의 집합 | 수학적인 함수 관계로 만든 그래픽 이미지 |
| 확대 | 계단 현상 | 뚜렷한 외곽선 |
| 변화/회전 | 이미지 품질 손상 | 변화 없음 |
| 특징 | 사실적인 표현, 특수 효과, 풍부한 색감 표현 | 선명한 표현, 효과적인 응용 작업 |
| 단점 | 이미지의 축소, 확대로 인한 이미지 품질 손상 | 사진과 같은 이미지 그래픽의 정교한 작업의 한계점 |
| 확장자 | JPG, PNG, GIF, websp 등 | AI, SVG, VML 등 |
| 프로그램 | 포토샵, 페인터 등 | 일러스트레이터, 플래시 등 |
'CSS' 카테고리의 다른 글
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
|---|---|
| [CSS]SCSS (2) | 2022.08.18 |
| [CSS]미디어쿼리 (3) | 2022.08.15 |
| [CSS]기본문법 (3) | 2022.08.13 |
| [CSS]레이아웃 만들기 (6) | 2022.07.25 |
댓글