본문 바로가기
프론트엔드/HTML,CSS,JS

웹에서 사용하는 이미지

by juneMiller 2021. 9. 28.

비트맵 Raster

픽셀이 모여 만들어진 정보의 집합, 

레스터(Raster)이미지라고도 부름 

 

정교하고 다양한 색상을 자연스럽게 표현, 확대/축소시 계단현상, 품질저하.

 


01. JPG(Joint Photographic coding Experts Group)

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

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

 

손실압축 : 표현 색상도(24비트, 약 1600만 색상)가 뛰어남 

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

가장 널리 쓰이는 이미지 포멧 

 

02.PNG(Portable Network Graphics) 는 Gif 의 대체 포멧으로 개발됨 

비손실 압축

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

Alpha Channel 지원(투명도) 

W3C 권장 포맷

 

03.GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자연 같은 정보들을 저장.

비손실 압축 

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

(움짤, 애니메이션) 

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

 

04.WEBP(하위호환성을 확인해야 함)

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

 

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

GIF 같은 애니메이션 지원

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

 

 


벡터 Vector (.svg)

점,선,면의 위치(좌표), 색상등 수학적 정보의 형태 (Shape)로 

이루어진 이미지. 

 

확대/축소에 자유로우며 용량변화가 없음

정교한 이미지는 표현하기 어려움 

 


 

01.SVG(Scalable Vector Graphic)는 마크없 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포멧

 

 

해당도의 영향에서 자유로움

CSS와 JS로 제어 기능 파일 및 코드 삽입가능

'프론트엔드 > HTML,CSS,JS' 카테고리의 다른 글

특수 문자 용어  (0) 2021.09.28