[HTML/CSS/JS] 웹 이미지

비트맵(Bitmpa)과 벡터(Vector)

비트맵

Raster (.jpeg, .gif, .png) : 픽셀이 모여 만들어진 정보의 집합. Raster 이미지 라고도 부름.

벡터

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지 (.svg)

웹 이미지 종류

JPG(JPEG)

Joint Photographic coding Experts Group, Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

- 손실 압축 → 압축 될때마다 조금씩 손상됨. 대신 용량이 적어짐
- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
- 이미지의 품질과 용량을 쉽게 조절 가능
- 가장 널리 쓰이는 이미지 포맷

PNG

Portable Network Graphics, Gif의 대체 포맷으로 개발됨. 투명 배경한 배경이 사용 가능하다!!!!

- 비손실 압축 → JPG보다 용량이 다소 클 수 있음.
- 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
- Alpha Channel 지원(투명도) → 투명도를 사용하는 이미지라면 png로 저장하는게 좋다!
- W3C 권장 포맷

GIF

Graphics Interchange Format, 이미지 파일 내에 이미지 및 문자열 같은 정보들 저장.

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

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

- 완벽한 손실/비손실 압축 지원
- GIF 같은 애니메이션 지원
- Alpha Channel 지원(손실, 비손실 모두)

SVG

Scalable Vector Graphics, 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷

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