웹 이미지
웹에서 사용할 수 있는 이미지는 크게 비트맵(Bitmap)과 벡터(Vevtor)라는 개념으로 나뉘게 됩니다.
비트맵
- 픽셀이 모여 만들어진 정보의 집합.
- 레스터(Rester) 이미지라고도 부름.
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소 시 계단 현상, 품질 저하가 있다.
- ex) PNG,JPG등
벡터
- 점,선,면의 위치(좌표),색상등 수학적 정보의 형태(Shape)로 이루어진 이미지.
- 확대/축소에서 자유로움
- 용량 변화가 없음
- 정교한 이미지를 표현하기 어려움
- ex) svg등
JPG(JPEG)
JPG는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됩니다.
손실 압축, 표현 색상도(24비트)가 뛰어나고, 이미지의 품질과 용량을 쉽게 조절 가능하고 가장 널리 쓰이는 이미지 포맷입니다.
손실 압축하는 방식을 사용하기 때문에 자주 저장하는 행위는 피해야 합니다.
PNG
PNG는 Gif의 대체 포맷으로 개발됨
비손실 압축, 8비트 / 24비트 컬러 이미지 처리, Alpha Channel 지원(투명도), W3C 권장 포맷입니다.
즉, png는 투명도를 지원하기 때문에 우리가 원하는 이미지에 투명한 영역을 만들어내 사용가능합니다.
GIF
GIF는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
이미지 파일 안에다가 여러 장의 이미지를 담을 수 있는 구조를 가지고 있습니다.
즉 이러한 특성을 통해 움짤이나 애니메이션 같은 효과를 구현할 수 있습니다.
다만 8비트 색상만 지원하기 때문에 다양한 색상 표현에는 적합하지 않습니다.
WEBP
WEBP는 JPG,PNG,GIF를 모두 대체할 수 있는 구굴이 개발한 이미지 포맷입니다.
완벽한 손실/비손실 압축을 지원하고 GIF 같은 애니메이션을 지원하고, Alpha Channel도 지원합니다.
하지만 webp는 최신에 나왔기 때문에 브라우저에서 호환이 가능한지 확인해봐야 합니다.
SVG
SVG는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
해사옫의 영향에서 자유롭고 CSS/JS로 제어가 가능하며, 파일 및 코드 삽입이 가능합니다.
