웹 이미지

웹에서 사용할 수 있는 이미지라는 개념은 크게 비트맵과 벡터로 나뉘게 된다.

 

1. 비트맵 (Bitmap)

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

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

일반적인 사진, 그림은 비트맵이 훨씬 더 사용하기에 효과적임

장점: 정교하고 다양한 색상을 자연스럽게 표현할 수 있음

단점: 확대/축소 시 계단 현상이 나타나고 품질이 저하됨

 

.jpg .gif .png

 

(1). JPG (JPEG)

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

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

 

손실 압축: 이미지의 픽셀이 손실되면서 압축되기 때문에 용량이 획기적으로 줄어들 수 있음

표현 색상도(24비트, 약 1600만 색상)가 뛰어남

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

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

 

(2). PNG

Gif 의 대체 포맷으로 개발됨

 

비손실 압축: 이미지가 손실되지 않으면서 압축되기 때문에 용량이 비교적 클 수 있음

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

Alpha Channel 지원 (투명도): 원하는 이미지 주변에 투명한 영역을 만들어낼 수 있음

W3C 권장 포맷

 

(3). GIF

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장함

 

비손실 압축

여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션)

8비트 색상만 지원: 다양한 색상 표현에는 부적합

 

(4). WEBP

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

 

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

GIF 같은 애니메이션 지원

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

하위호환성 확인 필요 (IE 지원 불가능)

하위호환성: 예전 버전의 환경에서 특정한 기술들이 호환이 가능한가

 

 

2. 벡터 (Vector)

점, 선, 면의 위치(좌표), 색상 등

수학적 정보의 형태(Shape) 로 이루어진 이미지

 

단순한 구조의 아이콘, 형태는 하나지만 크기가 다양하게 사용되는 로고,

Material Image 라고 불리는 플랫한 이미지들이 벡터 이미지로 만들고 관리하기에 용이함

 

Material Design(머터리얼 디자인) :

고품질 디지털 경험을 구축할 수 있도록 Google 에서 만든 디자인 시스템(방식)

 

장점: 확대/축소 시 품질이 저하되지 않고 용량의 변화가 없음

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

.svg

 

(1). SVG

마크업 언어(HTML, XML) 기반의 벡터 그래픽을 표현하는 포맷

 

해상도의 영향에서 자유로움:

확대/축소해도 이미지의 정보가 변경되지 않으면 해상도에 영향을 받지 않고 만들어낼 수 있음.

이미지의 크기를 자주 변경해야 하는 아이콘, 로고 등

해상도, 이미지의 크기가 자주 변경되는 환경에서 사용

CSS 와 JS 로 제어 가능

파일 및 코드 삽입 가능

// Google 로고의 SVG 코드
<svg xmlns="http://www.w3.org/2000/svg" width="272" height="92">
  <path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25
  9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99...">
</svg>

 

SVG 이미지의 복잡한 코드를 CSS 와 JS 로 디테일하게 제어하기는 매우 어렵기 때문에,

색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용한다.