이미지에 대한 이해

웹에서 사용하는 이미지

비트맵과 백터 이미지

• 이미지는 크게 비트맵과 벡터로 구분된다.

비트맵

• 각 픽셀이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다.
• 픽셀 단위로 화면에 렌더링한다.
• 그림판, 포토샵과 같은 툴로 편집 할 수 있다.

벡터

• 수학적 정보의 형태들이 만들어내는 결과물이다.
• 이미지가 가지고 있는 점, 선, 좌표, 색상 등의 정보를 가지고 있으며 그를 화면에 렌더링한다.
• 이미지를 확대 축소를 해도 이미지가 깨지지 않는다.
• 수학적 정보만을 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없다.
• 일러스트 같은 툴로 편집 할 수 있다.

이미지 종류	장점	단점
비트맵	정교하고 다양한 색상을 자연스럽게 표현	확대/축소 시 계단 현상, 품질 저하
벡터	확대/축소에서 자유로움, 용량 변화가 없음	정교한 이미지(인물, 풍경 사진 같은)를 표한하기 어려움

JPG(JPEG)

• JPG(Joint photographic coding Experts Group) Full-color와 Gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용한다.
• 손실 압축 -> 높은 압축률(적은 용량)
• 표현 색상도(24비트, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷

PNG

• PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발되었다.
• 비손실 압축
• 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장 포맷

GIF

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

WEBP

• JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(솔실, 비손실 모두)
• 지원되는 브라우저가 제한적이다.

SVG

• SVG(Scalable Vector Graphics)는 마크업 언어기반의 벡터 그래픽을 표현하는 포맷이다.
• 해상도의 영향에서 자유로움
• CSS로 Styling 가능
• Javascript로 Event Handling 가능
• 코드 혹은 파일로 사용 가능

---

※ 참고 링크

- https://heropy.blog/