[Front-end][Ch1] 웹 이미지

 

 

비트맵

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

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

일반적인 대부분의 사진 이미지.

 

벡터

수학적인 정보로 이루워져있기 때문에 확대/축소에서 자요로움, 용량 변화가 없음.

정교한 이미지(인물, 풍경 사진)를 표현하기 어려움.

 

 

 

 

 

 비트맵 이미지 

JPG(Joint Photographic coding Experts Group)

• Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.
• 손실 압축 > 용량을 적은 장점, 이미지를 반복 저장하면 화질이 낮아지는 단점이 있다.
• 표현 색상도(24비트, 약 1600만 색상)가 뛰어남.
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 자주 보는 이미지 포맷
• 투명도 미지원

PNG(Portable Network Graphics)

• Gif의 대체 포맷으로 개발.
• 비손실 압축 > 이미지가 손실되지 않는 장점, 용량이 비교적 큰 단점이 있다.
• 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지를 동시에 지원 > 일반적으로 24비트 권장
• Alpha Channel 지원(이미지 내부에서 투명도 사용) > 원하는 이미지 주변을 투명하게 만들 수 있다.
• W3C 권장 포맷.

GIF(Graphics Interchange Format)

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

WEBP

• JPG, PNG, GIF를 모두 대체할 수 있는 구굴이 개발한 이미지 포맷.
• 완벽한 손실/비손실 압축 지원
• GIF같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)
• IE 지원 불가

벡터 이미지

SVG(Scalable Vector Graphics)

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.
• 수학적 정보를 갖고 있는 포맷이기 때문에 해상도의 영향에서 자유로움
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능