raster, vector

웹 개발 시 자주 쓰이는 이미지 형식

하나의 리소스에 들어가는 용량의 60~65% 차지하는 것 : 이미지

로드시간(렌더링 타임) 오래 걸리면 사용성이 좋지 않다.

따라서 퍼포먼스에 해를 끼치지 않는 이미지 타입을 적절히 선택해 써야 한다.

 

그래픽 파일 포맷 중 래스터와 벡터에 대해 정리한다.

 

• 벡터와 래스터

	벡터 이미지	래스터 이미지
특징	확대해도 깨지지 않음	픽셀 단위 -> 확대 시 깨짐
포맷 종류	svg	jpg(jpeg), png

 

Vector images

수학식을 통해 연산으로 그래픽을 표현한다.

용량이 상대적으로 가벼울 확률이 높다.

참고로 폰트도 일종의 벡터 그래픽이다.

벡터 이미지의 특성을 잘 살리는 형식은 svg(scalable vector graphics) 포맷으로 웹 개발 시 자주 쓰인다.

회사 로고, 아이콘은 왠만하면 svg를 사용하지만, ie 6, 7, 8에 대응해야 할 시 svg를 사용할 수 없다.

 

Raster images

래스터 이미지 중 jpg와 png는 압축방식에 차이가 있다.

• jpg와 png

jpg	png
손실압축 압축률이 높다. - 퀄리티가 떨어진다. 용량을 낮출 수 있다. 투명 배경 불가	비손실압축 압축해도 퀄리티 로스가 거의 없다 용량이 크다 투명 배경 가능(알파채널)