2. 웹에서 사용할 수 있는 이미지(비트맵과 벡터)

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

 

웹에서 사용할 수 있는 이미지는 크게 비트맵과 벡터로 나누어 볼 수 있습니다.

 

프론트엔드 강의 pdf 中

비트맵

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

ⓐ JPG(Joint Photographic Experts Group)

 - Full-color와 Gray-scale의 압축을 위해 만들어짐

 - 손실압축(이미지가 손실되면서)으로 표현 색상도(24비트, 약 1600만       색상)가 뛰어남

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

 - 가장 널리 스이는 이미지 포맷

 - 하지만 이미지를 반복적으로 새롭게 저장하는 행위는 품질저하를         일으킨다.

 

ⓑ PNG(Portable Network Graphics)

 - 비손실 압축

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

 - Alpha Channel 지원(투명도)

 - W3C 권장 포맷

 

 

ⓒ GIF(Graphics Interchange Format)

    - 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

    - 비손실 압축

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

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

 

ⓓ WEBP

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

    - 완벽한 손실/비손실 압축 지원

    - GIF와 같은 애니메이션 지원

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

    - Internet Explorer에서는 지원 불가

 

벡터

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

ⓐ SVG(Scalable Vector Graphics)

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

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

    - CSS와 JS로 제어가능

    - 파일 및 코드 삽입 가능