비트맵
비트맵이란?
비트맵 그래픽이란 픽셀 하나하나의 조합으로 이미지를 표현하는 방식이며 정교하고 화려하게 표현 가능케하고 사진 이미지에 주로 사용되며 웹에서 이미지를 표시할 때는 비트맵 이미지를 사용합니다
비트맵의 단점?
비트맵은 크기를 늘리거나 줄이게 되면 이미지가 깨지게 되며 쉽게 말하자면 사진이 흐릿해지는 현상이 생깁니다.
비트맵의 확장자는?
비트맵의 확장자로는 [jpg, jpeg, png, gif] 가 있습니다.
벡터 그래픽
벡터 그래픽이란?
벡터 그래픽은 수학적원리를 이용해 그림을 표현하는 방식이며, 특성상 이미지의 크기를 늘리고 줄여도 손상되지 않습니다.
벡터 그래픽의 단점?
복잡한 그림을 표현할때는 컴퓨터에 엄청난 부담을 준다는 단점이 있기에 빠른 정보를 출력해야하는 웹에서는 정교한 그림엔 사용하질 않았습니다.
벡터 그래픽의 확장자는?
벡터 그래픽은 [ai, eps, svg] 등이 사용되며 웹사이트의 로고 및 아이콘 표시에 백터 그래픽이 사용됩니다.
예시보기
벡터(Vector)

비트맵(bitmap)

Webp
Webp란?
WebP는 위와 같은 단점들을 모두 보완하기 위해 구글이 출시한 파일 포맷이며 WebP를 사용하면 고품질 이미지를 표현하면서도 용량은 PNG,JPG 등의 기존 압축 방식보다 파일 크기를 작게 할 수 있습니다.
WebP의 단점?
WebP 파일은 인터넷을 염두해 두고 만든 포맷이기에 오프라인에서 활용시 도움이 되지 않을 수 있으며, 폭 넓은 호환성을 가지고 있음에도 인터넷 익스플로러에선 WebP 이미지를 지원하지 못할 수 있고 약간의 압축으로도 이미지 품질이 저하될 수 있기에 이때문에 전문가라면 이를 고려해야합니다.
WebP는 래스터? 벡터?
WebP 파일은 래스터 파일의 일종이며 레스터는 개별 픽셀로 구성되는 반면, 벡터 파일은 수식과 패스로 구성됩니다.
'HTML' 카테고리의 다른 글
블록/인라인 구조에 대해 알아보자! (5) | 2022.08.21 |
---|---|
HTML의 구조와 관련된 요소를 알아보자~~ (8) | 2022.08.14 |
W3C 웹 표준에 대하여 알아보자~~~!!! (7) | 2022.08.08 |
블록/인라인 요소가 뭘까? (3) | 2022.07.27 |
시멘틱 마크업에 대하여 (3) | 2022.07.27 |
댓글