웹에서 사용하는 이미지

01.비트맵(Bitmap)

• 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 함
• 정교하고 다양한 색상을 자연스럽게 표현
• 확대/축소 시 계단 현상, 품질 저하

1.JPG(JPEG)

• Full-color와 Gray-scale의 압축을 위해 만들어짐
• 압축률이 뛰어나 사진이나 예술 분야에서 많이 사용
• 손실 압축
• 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷

2.PNG(Portable Network Graphics)

• GIF의 대체 포맷
• 비손실 압축
• 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도 지원)
• W3C 권장 포맷

3.GIF(Graphics Interchange Format)

• 이미지 파일 내에 이미지 및 문자열 같은 정보 저장
• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있음
• 8비트 색상만 지원(다양한 색상 표현에 비적합)

4.WEBP

• 구글이 개발한 이미지 포맷
• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)
• 최근에 만들어졌기 때문에 호환되지 않는 브라우저 있음(IE 지원 불가, 나머지 확인)

02.벡터(Vector)

• 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
• 확대/축소에서 자유로움, 용량 변화가 없음
• 정교한 이미지(인물, 풍경 사진)를 표현하기 어려움

1.SVG(Scalable Vector Graphics)

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽 표현 포맷
• 해상도의 영향에서 자유로움
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능

03.Material Design(머터리얼 디자인)

• 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)