웹에서 사용하는 이미지 : jpg, png, gif, webp, svg

비트맵

픽셀이 모여 만들어진 이미지, 레스터 이미지

정교하고 다양한 색상을 자연스럽게 표현

확대/축소 시 계단 현상, 품질 저하

ex) jpg, png, gif, webp, 사진

 

벡터

점, 선, 면 등 수학정 정보로 이루어진 이미지

확대/축소에서 자유로움, 용량 변화가 없음

정교한 이미지를 표현하기 어려움

ex) svg, 아이콘, 로고

 

---

JPG (JPEG)

압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

손실 압축 방식

용량이 획기적으로 줄어들 수 있음

JPG로 여러번 저장되면 여러번 손실이 일어나므로 이미지 색상이 변할 수 있음

표현 색상도(24비트)가 뛰어남

가장 널리 쓰이는 이미지 포맷

 

PNG

Gif의 대체 포맷

비손실 압축 방식

이미지가 손실되지 않음

이미지 품질 그대로 유지

용량이 비교적 큼

투명도 지원 (Alpha Channel)

 

GIF

이미지 파일 내에 이미지 및 문자열 정보 저장

비손실 압축

여러 장의 이미지를 한 파일에 담을 수 있음

움짤, 애니메이션

8비트 색상만 지원

다양한 색상 표현에는 적합하지 않음

 

WEBP

JPG, PNG, GIF를 모두 대체할 수 있음

구글이 개발

손실/비손실 압축 동시 지원

GIF같은 애니메이션 지원

투명도 지원 (Alpha Channel)

지원되는 브라우저 확인 필요 (하위호환성 확인)

 

SVG

마크업 언어(HTML/XML)기반의 벡터 그래픽 표현

해상도의 영향에서 자유로움

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능

이미지의 크기가 자주 변경되는 상황에서 사용

아이콘, 로고 등 사용