[웹개발] 웹에서 사용하는 이미지 정리

1. 비트맵(Bitmap)

• 픽셀이 모여 만들어진 정보의 집합
• 레스터 이미지라고도 부름
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대, 축소시 계단현상이 발생해 품질저하
• 비트맵 이미지의 종류: JPG, JPEG, PNG

 

1) JPG, JPEG 

• 손실 압축 방식을 사용하기 때문에 여러번 저장할수록 이미지의 품질이 손실됨
• 이미지의 품질과 용량을 쉼게 조절가능

 

2) PNG

• 비손실압축 방식을 사용하기 때문에 이미지가 여러번 저장되어도 이미지의 품질이 손실되지 않음
• JPG와 비교해 용량이 비교적 큼
• Alpha Channel을 지원해 이미지 내부에서 투명한부분을 사용할 수 있음
• 투명한 배경화면에 필요한 이미지에 주로 사용

 

3) GIF

• 하나의 이미지 파일에 여러개의 이미지를 담을 수 있는 구조를 가지고 있어 움짤, 애니메이션에 많이 사용됨
• 8비트 색상만 지원하기 때문에 다양한 색상을 표현하는 이미지에는 적합하지 않음

 

4) WEBP

• JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• 손실, 비손실 압축을 모두 지원하기 때문에 상황에 맞게 선택할 수 있음
• 손실, 비손실 압축 모두 Alpha Channel을 지원하기 때문에 투명한 이미지 제작이 가능
• IE 지원 불가

 

2. 벡터(Vector)

• 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지
• 확대, 축소에서 자유로움 
• 용량 변화가 없음
• 정교한 이미지를 표현하기 어려움
• 벡터 이미지의 종류: SVG

 

1) SVG

• 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷
• 해상도의 영향에서 자유로움
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능
• 로고, 아이콘에서 주로 사용