웹에서 사용하는 이미지

웹에서 사용할 수 있는 이미지들을 소개합니다.

 

비트맵(Bitmap)은 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름.

벡터(Vector)은 점, 선 면의 위치(좌표), 색상등 수학적 정보의 형태(Shape)로 이루어진 이미지입니다.

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

아이콘, 로고 같은 단순구조인 이미지들을 Material Design이라고도 부릅니다.

Material Design(머터리얼 디자인)은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)입니다.

 

JPG(JPEG)

JPG는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며,

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

 

JPG특징: 손실 압축 방식을 사용합니다.

표현 색상도(24비트, 약 1600만 색상)가 뛰어나며,

이미지의 품질과 용량을 쉽게 조절 가능하고,

가장 널리 쓰이는 이미지 포맷입니다.

 

PNG

PNG는 Gif의 대체 포맷으로 개발됨.

 

PNG특징: 비손실 압축 방식을 사용합니다.

8비트(256색상)/ 24비트(약 1600만 색상)컬러 이미지 처리하며

Alpha Channel 지원(투명도)

W3C 권장 포맷입니다.

 

GIF

GIF는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장됨.

 

GIF특징: 비손실 압축 방식을 사용합니다.

8여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)

8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

 

WEBP

WEBP는 jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷입니다.

 

WEBP특징: 완벽한 손실/비손실 압축 지원.

GIF 같은 애니메이션 지원.

Alpha Channel 지원(손실, 비손실 모두)

IE 지원 불가

(사용하기전 하위호환성 확인해야 함)

 

SVG

SVG는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷입니다.

 

SVG특징: 해상도의 영향에서 자유로움.

CSS와 JS로 제어 가능.

파일 및 코드 삽입 가능.