• 목차

  • 1. 비트맵
  • 2. 벡터
  • 3. JPG(JPEG)
  • 4. PNG
  • 5. GIF
  • 6. WEBP
  • 7. SVG

  
  

비트맵

• 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지 라고 한다.
• 픽셀 단위로 화면에 렌더링
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대, 축소 시 계단 현상, 품질 저하

벡터

• 수학적 정보의 형태(shape)들이 만들어내는 결과물
• 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링
• 비트맵보다 더 많은 연산을 해야하지만, 해상도(픽셀)의 영향을 받지 않는다. (확대, 축소시 이미지 깨지지 않음)
• 확대, 축소시 이미지 용량 변화가 없다.
• 정교한 이미지를 표현하기 어렵다.

JPG(JPEG)

• 압축률이 훌륭하여 사진이나 예술 분야에서 많이 사용된다.
• 손실 압축(여러번 원본을 저장하면 이미지가 손실된다. 하지만 용량 적게 든다.)
• 표현 색상도(24비트, 약 1600만 색상) 가 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷
• ✨높은 압축률(적은 용량)

PNG

• gif의 대체 포맷으로 개발
• 비손실 압축(용량을 획기적으로 줄이기는 어렵다. 하지만 손상되지 않음)
• 8비트(256색상), 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpah Channel 지원 (투명도)
• W3C 권장 포맷
• ✨투명도 지원

GIF

• 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있다. (움짤)
• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있다.(움짤, 애니메이션)
• 8비트 컬러만 지원(다양한 색상을 표현하는 작업에는 부적합)
• ✨동영상 같은 이미지

WEBP

• JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)
• 모든 브라우저에서 지원하지 않는다. (크로스 플랫폼 불가)
• ✨ 완벽한 포맷! but 모든 브라우저는 아닌…

SVG

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
• 파일로 된 SVG, 코드로 된 SVG
• 해상도의 영향에서 자유로움(반응형에서 쓰기 좋다)
• CSS로 Styling 가능
• javascript로 event handling 가능
• 코드 혹은 파일로 사용 가능
• ✨벡터 이미지에 익숙하지 않다면 다루기 까다롭다.