web_fronted(4)웹 이미지

웹 이미지

비트맵(Bitmap)과 벡터(Vector)로 나뉨

 

 

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

 

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

 

 

비트맵

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

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

 

벡터

장점 : 확대/ 축소에서 자유로움, 확대/축소 되더라도 용량 변화가 없음

단점 : 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

 

 

필요에 따라 이미지 형태를 고르면 된다.

 

 

 

비트맵 이미지

 

JPG(Joint Photographic coding Experts Group)는

Full-color와 Gray-scale의 압축을 위해 만들어 졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

 

손실압축(용량이 작은 장점)

표현 색상도(24비트, 약 1600만 색상)가 뛰어남 이미지의 품질과 용량을 쉽게 조절 가능 가장 널리쓰이는 이미지 포맷

JPG포맷으로 여러번 저장하면 점점 이미지가 안좋아짐 -> 손실 압축 이기 때문에

 

 

PNG(Portable Network Graphics)는

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

 

비손실 압축(저장할때 손실이 없으나 용량이 JPG에 비해 크다)

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

Alpha Channel 지원(투명도) 이미지 내에서 투명한 영역을 만들수 있음

W3C 권장 포맷

 

 

GIF(Graphics Interchange Format)는

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

 

비손실 압축

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

(움짤, 애니메이션)

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

 

 

WEBP

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

 

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

GIF 같은 애니메이션 지원

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

나온지 비교적 최근이기 때문에 지원하는 브라우저를 확인해야함 IE 사용불가 대부분은 가능(하위호완성을 확인해야함)

 

 

벡터 이미지

 

SVG(Scalable Vector Graphics)는

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

 

해상도의 영향에서 자유로움 (점과 선같은 이미지의 특징을 담는것이므로)

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능

 

SVG이미지의 복잡한 코드를 CSS와 JS로 디테일하게 제어하기는 매우 어렵기 때문에 색상이나 일부 영역의 추가/제거 혹인 간단한 형태 생성 정도로 가볍게 사용한다.