웹 이미지란 ?

 웹 이미지는 비트맨(Bitmap)과 벡트(Vector) 가 있다. 

우리가 사용할 사진의 포맷들은 크게 .jpg / .png / .svg 등이 있다.

여기서 우리가 사용할 이미지를 고르는 기준은 어떤 이미지가 

좀 더 효율적으로 쓸 수 있는가?  일 것이다. 

비트맵과 벡터를 간단하게 알아보자. 

 

비트맵 

 

• 정교하고 다양한 색상을 자연스럽게 표현.
• 확대/축소 시 계단 현상, 품질 저하.
• ex) 풍경사진, 동물사진 등 

 

벡터 

• 확대/축소에서 자유로움. 용량 변화가 없음.
• 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.
• ex) 아이콘, 로고 등 
• 뭐 대충 이런식으로 개념을 정리하면 된다. 

 

그게 무슨 말 인데 씹덕아

만약에 이런 귀여운 움짤을 보는데 이런 움직이는 이미지가 확대해서 그림이 하나도 안깨질려면 엄청난 양의 수학적 정보가 필요하다.

그럼 어떻게 되느냐 그냥 용량이 증가한다. 

뭐 이거 하나 쓸거면 상관없겠지만 그래도 우리는 알아야하니 

한번 차근차근 예시를 알아보자 

 

 

 

JPG(JPEG) - 비트

• 손실 압축 ( JPG는 여러번 저장 하면 할수록 이미지가 손실된다. 즉 이미지가 깨짐
• 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷 

PNG - 비트

• 비손실 압축
• 8비트( 256색상 ) / 24비트 ( 약 1600만 색상 ) 컬러 이미지 처리
• Alpha Channel 지원 (투명도) - 쉽게 말해 필요없는 부분 이미지 투명처리 해서 용량을 줄일 수 있다
• W3C 권장 포맷

GIF - 비트

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

WEBP - 비트

• JPG, PNG, GIF 를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 ( 구글에서 만들어서 그런가 IE 지원안됨 ㅋㅋ )
• 완벽한 손실/비손설 압축 지원
• GIF 같은 애니메이션 지원
• Alpah Channel 지원 ( 손실, 비손실 모두

SVG - 벡터

• 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
• 해상도의 영향에서 자유로움 
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능 

 

 

SVG 확장자로 에디터 프로그램으로 열어볼 수 있는데 거기 안에서 작성된 코드들은 이미지의 정보를 코드화 한것이고 

이것을 우리가 JS 나 CSS로 변경해서 쓸 수 있다. 

 

여긴 어디 나는 누구