이미지 - 비트맵 / 벡터

비트맵(Bitmap) 

• 각 픽셀이 모여 만들어진 정보의 집합
• 픽셀 단위로 화면에 렌더링 (렌더링:컴퓨터가 화면에 그림을 그려서 볼수 있게 한다.)
• 일반적으로 사용하는 대부분의 이미지가 비트맵 형식 
• 예) jpeg / gif / png

 

벡터(Vector)

• 수학적 정보의 형태(Shape)들이 만들어내는 결과물
• 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 화면에 렌더링 
• 확대 및 축소 할 경우 이미지 깨지지 않음 
• 예) svg

 

JPG(JPEG) 

• 손실 압축 => 용량이 적게 든다.
• 표현 색상도(24비트, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량 쉽게 조절 가능
• 가장 널리 쓰임 

 

PNG

• Gif 의 대체 포맷으로 개발
• 비손실 압축 => 손실하지 않고 압축하므로 용량이 적게는 불가능
• 8비트(256 색상) / 24비트 컬러 이미지 처리 
• 투명도 지원(Alpha Channel)
• W3C 권장 포맷

 

GIF

• 이미지 파일 내에 이미지 및 문자열 같은 정보들 저장 가능 (움짤, 애니메이션)
• 비손실 압축
• 8비트 컬러만 지원(256 색상)

 

WEBP

• JPG, PNG, GIF를 모두 대체 가능한 구글이 개발 이미지 포맷
• 완벽한 손실, 비손실 압축 지원
• GIF 같은 애니메이션 지원
• 투명도 지원(Alpha Channel)
• 지원하는 브라우저 한계가 존재

 

SVG

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
• 해상도 자유로움
• CSS로 스타일 가능
• JavaScript로 Event Handling 가능
• 코드 혹은 파일로 사용 가능