웹 이미지

비트맵과 벡터

비트맵

• 픽셀이 모여 만들어진 정보의 집합,레스터(Raster)이미지라고도 부름
  (.jpeg .gif .png 등..)
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대/축소시 계단현상, 품질저하

벡터

• 점,선,면의 위치(좌표), 색상 등 수학적 정보의 형태(shape)로 이루어진 이미지
  (.svg)
• 확대/축소에서 자유로움, 용량 변화가 없음
• 정교한 이미지(인물,풍경 사진같은) 를 표현하기 어려움

JPG(JPEG)

-JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며,
압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

-손실 압축
표현 색상도(24비트, 약 1600만 색상)가 뛰어남
이미지의 품질과 용량을 쉽게 조절 가능
가장 널리 쓰이는 이미지 포맷

PNG

-PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발됨.

-비손실 압축
8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
Alpha Channel 지원(투명도)
W3C 권장 포맷

GIF

-GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

-비손실 압축
여러 장의 이미지를 한 개의 파일에 담을 수 있음
(움짤, 애니메이션)
8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

WEBP

-IE 지원 불가
-JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.

-완벽한 손실/비손실 압축 지원
GIF 같은 애니메이션 지원
Alpha Channel 지원(손실, 비손실 모두)

SVG

-SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.

-해상도의 영향에서 자유로움
CSS와 JS로 제어 가능
파일 및 코드 삽입 가능