이미지에 대한 이해

• 비트맵 이미지(레스터 이미지)
  - 픽셀이 모여 만들어진 정보 집합
  - 픽셀 단위로 렌더링
  - 용량관리 하기 용이
  - 그림판, 포토샵으로 편집가능
  - jpg, png, gif, webp
  
  JPG (JPEG)
  - 표현 색상도 뛰어나 고해상도 표시장치에 적합()24비트 컬러)
  - 손실압축(이미지를 손상시키면서 저장) -> 높은 압축률
  - 이미지의 품질과 용량 쉽게 조절 가능
  -가장 널리 쓰임
  -> 이미지 용량 최소화 하고 싶을 때
  
  PNG
  - GIF 의 대체 포멧으로 개발됨
  - 비손실 압축
  - 8비트(256색상)/ 24비트 컬러 이미지 처리
  - 투명도 지원
  - W3C 권장 포맷
  -> 투명도가 필요할 때
  
  GIF
  - 비손실 압축
  - 여러장 이미지 한 개 파일에 담을 수 있음(영상 같은 이미지)
  - 8비트(다양한 색상 표현에는 적합X)
  -> 애니메이션 기능 필요할 때
  
  WEBP
  - JPG, PNG, GIF 모두 대체 가능(구글이 개발)
  - 완벽한 손실/ 비손실 압축 지원
  - 투명도 지원(손실/ 비손실 모두)
  - 완벽한 포맷이지만 지원 브라우저가 한정되어 있음
• 벡터 이미지 
• - 수학적 정보의 형태들이 만들어내는 결과물 
  - 이미지의 점, 선, 면, 색상 등의 정보 온전하게 가짐 
  - 확대, 축소해도 이미지 깨지지 않음(해상도로부터 자유로움) 
  - 확대, 축소해도 용량은 그대로(단점: 용량 줄일 때) 
  - 정교한 이미지(인물, 풍경 사진 등 표현 어려움) 
  - 일러스트, svg 
  
  SVG 
  - 파일화 된 SVG, 코드로 된 SVG로 나뉨(서로 변환 가능) 
  - 해상도의 영향에서 자유로움 
  - CSS로 스타일링 가능 
  - JS로 이벤트 핸들링 가능

일러스트는 SVG파일을 손쉽게(XML코드를 쓰지 않고) 만들 수 있는 도구