이미지 렌더링 & Raster와 Vector

렌더링(Rendering)

렌더링이란 브라우저의 뷰포트에 웹 사이트를 출력하는 행위를 말한다.

 

웹 이미지

크게 두 종류가 있다.

Raster

Vector

 

Raster

Raster는 픽셀이 모여 하나의 정보를 이룬다. 정교하고 다양한 색상을 표현할 수 있다. 확대 시에 이미지에 계단 현상이 발생한다. jpeg, jpg, png 등의 포맷이 이에 해당한다.

 

Vector

Vector는 점, 선, 면의 좌표, 색상 등의 정보가 수학적으로 표현된 이미지다. 반복적으로 저장해도 이미지의 품질이 저하되지 않으며 확대를 해도 계단 현상이 발생하지 않는다. 그러나 이미지의 용량이 커질 수 있다는 단점이 있고 복잡한 이미지는 표현하는데 한계가 있다. svg 포맷이 이에 해당한다.

 

https://tellyourtale.com/graphic-design/which-graphic-file-format-is-best-vector-and-raster-images/

jpg(jpeg)

Joint Photographic coding Experts Group의 alias

가장 널리 쓰이는 손실 압축 이미지 포맷이다.

색상 표현이 뛰어나다.

이미지의 품질와 용량을 쉽게 조절할 수 있다.

반복적인 저장 행위로 인해 이미지의 품질이 저하될 수 있다.

 

png

Portable Network Graphics의 alias

비손실 압축 포맷으로서 반복적인 저장 행위에도 이미지 품질이 저하되지 않는다.

alpha channel을 지원한다.

 

gif

Graphics Interchange Format의 alias

움직이는 이미지를 표현할 수 있으나, 이미지 색상을 8비트만 지원하기 때문에 다양한 색상 표현에 한계를 갖는다.

 

webp

jpg, png, gif를 모두 대체할 수 있는 이미지 포맷이다.

즉 위 세 포맷의 특징을 모두 가질 수 있는데, 손실/비손실 압축, 움직이는 이미지 기능, alpha channel 기능을 모두 갖는다.

 

svg

Scalable Vector Graphics

벡터 그래픽을 표현하는 포맷이며, 해상도의 영향에서 자유롭다.

일종의 코드로 작성되어 있다.