Vector와 BitMap
Vector
벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물이다.
이미지가 가지고 있는 점, 선, 면의 위치(좌표) 색상 등의 정보를 온전히 가지며 그것을 화면에 렌더링한다.
이러한 특징이 가지는 장점은 JPG와 같은 BitMap이미지 처럼 축소, 확대시에 이미지가 깨지지 않는다.
즉, 해상도로부터 자유롭게 렌더링 된다. (반응형이나 크로스 플랫폼에 많이 사용됨)
또한 수학적 정보만을 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없다.
이러한 특징은 장점이 될 수도 있지만 용량을 줄이기 위해 이미지를 축소해도 용량변화가 없다는 점에서는 단점이 될 수 있다.
BitMap
비트맵은 Pixel이 모여서 만들어진 Rater Image이다.
즉 화면에 렌더링 될 때 Pixel단위로 렌더링 된다.
비트맵은 벡터(Vector)와는 달리 이미지 축소, 확대시에 계단현상으로 인한 품질 저하가 일어난다.
즉, 해상도로부터 자유롭지 않다는 것이다.
하지만 비트맵(BitMap)은 점, 선, 면처럼 수학적인 정보로 표현되는 벡터(Vector)보다 정교한 이미지(인물, 풍경)을 표현하기 유리하다.
BitMap 이미지 포맷
JPG(JPEG)
JPG(Joint Photographic Experts Group) Full-color와 Gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭하기 때문에 사진이나 예술 분야에서 많이 사용한다.
JPG는 손실압축 방법을 사용하는데, 이를통해 얻는 장점은 용량이 적게 들어간다는 점이고 단점은 말 그대로 이미지가 손상된다는 것이다.
그렇기 때문에 여러번 원본을 저장하게 되면 이미지 손상이 여러번 일어나기 때문에 원본을 여러번 저장하는 것은 피해야 한다.
또다른 JPG의 특징은 표현 색상도(24비트, 약 1600만 색상)가 뛰어나 고해상도 표시장치에 적합하며 이미지의 품질과 용량을 쉽게 조절 가능하다.
또한 가장 널리 쓰이는 이미지 포맷이다.
Point!
웹에서 사용하기 적합하지 않은 큰 용량의 이미지 파일의 용량을 줄일 때 사용하면 좋다
PNG
PNG(Portable Network Graphics)는 GIF의 대체 포맷으로 개발되었다.
PNG는 비손실 압축방법을 사용하기 때문에 높은 압축률을 보이지는 않지만 이미지가 손상되지 않는다.
PNG는 8비트와 24비트 컬러 이미지를 함께 지원하며, W3C의 권장포맷이다.
PNG의 가장 큰 특징은Alpha Channel(투명도)를 지원한다는 것이다.
Point!
PNG는 Alpha Channel을 지원하여 투명한 이미지를 만들 수 있다.
GIF
GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있다.
GIF는 흔히 우리가 움짤이라고 부르는 것이라고 생각하면 된다.
GIF는 비손실 압축방법을 사용하며 여러 장의 이미지를 한 개의 파일에 담을 수 있다.
아쉬운 점은 8비트 컬러만 지원하기 때문에 다양한 색상을 표현하는 작업에는 적합하지 않다.
Point!
GIF는 8비트만 지원되지만 동영상 같은 이미지(애니메이션)을 만들 때 유용하다.
WEBP
WEBP는 JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
WEBP는 완벽한 손실, 비손실 압축방법,GIF같은 애니메이션, Alpha Channel을 모두 지원한다.
하지만 WEBP는 브라우저마다 지원여부가 다르기 때문에 사용할 때 반드시 지원하는 브라우저를 확인해야 한다.
Point!
WEBP는 매우 좋은 이미지 포맷이지만 브라우저 지원여부를 반드시 확인해야 한다.
Vector 이미지 포맷
SVG
SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷이다.
SVG는 Vector기반의 이미지이기 때문에 해상도의 영향에서 자유롭다.
다른 특징으로는 CSS로 Styling이 가능하고 JavaScript로 Event Handling이 가능하다.
또한 코드 혹은 파일로 사용 가능하다.
Point!
Vector이미지가 익숙하지 않은경우 다루기 까다로울 수 있다.(코드기반이기 때문)
Summary
BitMap
Pixel이 모여서 만들어진 Raster Image로써 화면에 렌더링 될 때도 Pixel단위로 렌더링 된다.
정교한 이미지를 표현할 때 많이 사용되지만 확대/축소 시 계단현상이 일어나며 품질 저하가 발생한다.
BitMap이미지 종류는 PNG, GIF, PNG, WEBP등이 있다.
Vector
점, 선, 면, 좌표, 색상 등의 수학적 정보를 통해 형태를 만들어 내는 것이다.
수학적 정보를 기반으로 렌더링 되기 때문에 이미지의 확대/축소 시에도 품질 저하가 발생하지 않는다.
Vector이미지는 해상도에 자유롭게 렌더링 된다는 장점이 있지만, 면과 선으로 이루어져 있기 때문에 정교한 이미지를 표현하는데는 부족하다는 단점이 있다.
Vector이미지 종류는 SVG가 있다.
