1. 비트맵
픽셀이 모여 만들어져서 레스터 이미지라고도 불립니다. 정교하고 다양한 색상을 자연스럽게 표현할 수 있지만, 확대하거나 축소할 때 깨지는 현상이 있습니다.
JPG (JPEG)
Full-color와 Gray-cale의 압축을 위해 만들어졌으며 압축률이 좋습니다. 손실 압축 방식을 사용하는데 이미지를 손상시키면서 저장을 합니다. 이미지 용량을 줄일 수 있지만, 이미지가 손상이 된다는 단점이 있습니다. 그래서 보통 JGP 원본이 있으면 그것을 다시 다른 JPG 파일로 저장하는 것은 추천하지 않는다고 합니다. (여러번 저장하는 것을 조심해야 함)
그리고 24비트 컬러를 지원하기 때문에 고해상도 표시장치에 적합합니다. 또 이미지의 품질과 용량을 쉽게 조절 가능합니다. 인터넷에도 JPG 파일을 자르고 편집해주는 툴들이 많이 있습니다. 그래서 가장 널리 쓰이는 이미지 포맷입니다.
정리하면 JPG는 용량이 너무 커서 웹에서 사용하기 적합하지 않을 때, 용량을 줄이는 방법으로 사용될 수 있습니다.
PNG
GIF의 대체 포맷으로 개발됐습니다. PNG는 JPG와 달리 비손실 압축 방식을 사용합니다. 이미지를 손실시키지 않으면서 저장할 수 있다는 것인데, 이미지가 손상되지 않고 저장될 수 있지만 용량을 많이 줄이기에는 제한이 있습니다.
PNG는 8비트 컬러와 24비트 컬러 둘 다 지원을 합니다. 그리고 PNG의 장점 중 하나로 alpha 값을 지원하기 때문에 투명한 부분을 표현할 수 있습니다. W3C에서 권장하는 포맷입니다. 그래서 보통 웹에서 '어떤 이미지를 사용하지?'라거나 이미지에 대한 장단점이 확실하지 않을 때 PNG 파일을 사용하는 것을 추천한다고 합니다.
GIF
이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있습니다. GIF 같은 경우에 여러 장의 이미지를 넣을 수 있습니다. 그래서 움짤과 같이 움직이는 이미지를 만들 수 있습니다. PNG와 같이 비손실 압축 방식을 사용합니다. 그런데 8비트 컬러만 지원해서 깔끔한 이미지를 만들 수는 없습니다. 그래서 개발된게 PNG이지만 PNG는 여러 장의 이미지를 넣을 수 없다는 것이 차이점입니다.
WEBP
JPG, PNG, GIF를 대체하기 위해서 구글이 개발한 웹에서 사용하는 이미지 포맷입니다. 손실 압축 방식과 비손실 압축 방식 둘 다 지원하며, GIF와 같이 애니메이션 기능도 지원합니다. 또 alpha 값을 지원하기 때문에 투명한 부분을 표현할 수 있습니다. 그런데 장점이 많지만, 많이 사용되지 않고 있습니다. 이유는 지원하는 브라우저가 적기 때문입니다. 아직 완벽하게 호환되는 이미지 포맷이 아닙니다.
2. 벡터
수학적 정보의 형태들이 만들어내는 결과물입니다. 이미지가 가지고 있는 점, 선, 면의 위치, 색상 등의 정보를 온전히 가지고 있습니다. 그렇기 때문에 확대를 하거나 축소를 할 때 깨지지 않습니다. 또 용량 변화가 없다는 장점이 있습니다.
SVG
코드로 된 SVG 이미지와 파일로 이루어져 있는 SVG가 있습니다. 코드로 된 SVG를 파일로 만들 수 있고, 파일로 이루어진 SVG를 코드로 바꿀 수 있습니다. 해상도의 영향에서 자유롭습니다. CSS로 스타일을 바꿀 수도 있고 javascript로 제어도 할 수 있습니다. 그런데 벡터 이미지 같은 경우 익숙하지 않으면 다루는데 어려울 수 있습니다. 그래도 해상도 영향을 받지 않기 때문에 반응형 사이트에 많이 사용됩니다.
'CSS' 카테고리의 다른 글
| CSS 속성 선택자 (0) | 2020.07.30 |
|---|---|
| IR 기법 - 대체 텍스트 숨김 (0) | 2020.07.24 |
| image 하단에 공백이 생기는 이유 (0) | 2020.07.21 |
| margin collapse (마진 병합) (0) | 2020.07.21 |
| 웹 접근성을 위한 텍스트 숨김 처리 (0) | 2020.07.17 |