웹에서 사용하는 이미지 종류

1) 웹 이미지

• 웹 이미지는 웹 페이지에서 사용할 수 있는 이미지를 말한다.
  (웹 이미지 종류 : jpeg, jpg, png, gif, svg)

2) 비트맵(Bitmap)과 벡터(Vector)

• 비트맵 : 픽셀이 모여서 만들어진 이미지 정보를 말함
  (ex: jpeg, jpg, png, gif)
• 벡터 : 점,선,면의 위치 수학적 정보의 형태로 이루어진 이미지 정보를 말함
  (ex: .svg)

Tip. 비트맵, 벡터의 장/단점

• 비트맵(Bitmap)
  장점 : 정교하고 다양한 색상들을 표현할 수 있음
  단점 : 픽셀 단위 이므로 확대/축소시 계단현상이 발생되 품질이 저하되는 문제가 있음
  (ex: 일반 사진, 그림 등등..)
• 벡터(Vector)
  장점 : 수학적 정보 단위 형태로 이뤄져 있기에 사진을 확대/축소시에도 품질이 저하되지 않아 이미지가 선명함
  단점 : 정교한 이미지(인물, 풍경)를 표현하기엔 어려움
  (ex: 아이콘, 로고 등등..)

3) 비트맵과 벡터 이미지 종류

1. 비트맵(Bitmap)

(1) JPEG(JPG)
-> Full-color와 Gray-scale의 압축을 위해 만들어 졌으며 압축률이 상당히 훌륭해서 사진이나 예술분야에서 많이 사용 되고 있다

• 손실 압축(용량이 상당히 가벼움)
• 표현 색상도 (24비트, 약 1600만 색상)가 뛰어남
• 이미지의 품질과 용량을 쉽게 조절할 수 있음
• 가장 널리 사용됨

🚨 JPEG(JPG)주의사항

• jpg 파일은 이미지를 여러번 압축해서 포맷하게 되면 그만큼 손실이 일어나는 압축 방식의 이미지 이기 때문에 반복적으로 새롭게 저장하는 행위는 되도록이면 피하는 것이 좋음

(2) PNG
-> Gif의 대체 포맷으로 개발된 비트맵 이미지 형식이다

• 비손실 압축
• 8비트(256 색상) / 24비트(약1600만 색상) -컬러처리
• 알파 채널 지원(투명도)
• W3C 권장 포맷

(3) GIF
-> 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장하기 위해 사용되는 이미지 형식이다

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

(4) WEBP
-> PG, PNG, GIF를 모두 대체할 수 있는 이미지 포맷으로 구글이 개발하였다

• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• 알파 채널 지원(손실, 비손실 모두)
• IE 지원 불가(MS사에서 운영 지원을 종료시킨 브라우저)

🚨 WEBP 주의사항

• webp는 구글에서 개발되었지만 개발된지 최근에 나온 이미지 형식이기 때문에 지원되는 브라우저 목록을 확인해야 함

2. 벡터(Vector)

(1) SVG
-> 마크업 언어(HTML/XML)기반의 벡터 그래픽을 표현한 이미지 형식이며, 이미지 크기를 자주 변경해야 되는 여러가지 아이콘들이나 로고 같은 해상도 혹은 이미지 크기가 자주 변경될 수 있는 환경에서 사용된다.

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