[HTML] 이미지 형식의 종류를 알아보자🧐

1. 비트맵 이미지

• 픽셀이 모여 만들어진 정보의 집합
• 레스터 이미지라고도 부름
• 픽셀 단위로 화면에 렌더링함
• 그림판, 포토샵 등 툴로 편집
• JPEG, PNG, GIF ...

 

1-1. jpg(jpeg)

• 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
• 가장 널리 쓰이는 이미지 포맷
• 손실 압축
• 표현 색상(24비트, 약 1600만가지 색상)이 뛰어나 고해상도 표시장치에 적합

 

1-2. gif

• 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
• 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
• 8비트(256색상)컬러만 지원
• 비손실 압축

 

1-3. png

• gif의 대체 포맷으로 개발
• 8비트, 24비트 컬러 이미지 처리
• 알파 채널 지원(투명도)
• W3C 권장 포맷
  
  

1-4. webp

• jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• gif와 같은 애니메이션 지원
• 알파 채널 지원(손실, 비손실)
• 가장 완벽한 포맷

2. 벡터 이미지

- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집

	비트맵(Bitmap)	벡터(Vector)
정의	정사각형의 픽셀에 저장된 비트 정보의 집합	수학적 함수 관계로 만든 그래픽 이미지
확대	계단 현상	뚜렷한 외곽선
변화/회전	이미지 품질 손상	변화 없음
특징	사실적인 표현, 특수 효과, 풍부한 색감 표현	선명한 표현, 효과적인 응용 작업
단점	이미지의 축소, 확대로 인한 이미지 품질 손상	사진과 같은 이미지 그래픽의 정교한 작업의 한계점
확장자	JPG, PNG, GIF 등	AI, SVG, VML 등
프로그램	포토샵, 페인터 등	일러스트레이터, 플레시 등