웹에서 사용되는 이미지(jpg, gif, png, webp, svg)

 

  이미지(그래픽)는 크게 비트맵과 벡터로 구분된다.

 

 

▶ 비트맵(Bitmap)
 - 각 픽셀이 모여 만들어진 정보의 집합.
 - Raster 이미지라고도 함.
 - 픽셀 단위로 화면상에 렌더링함.
 - 일반적으로 사용하는 대부분의 이미지가 비트맵 형식으로 그림판, 포토샵 등의 툴로 편집할 수 있음.
 - 정교하고 다양한 색상을 자연스럽게 표현 가능.
 - 이미지 확대/축소 시 계단 현상, 품질 저하 발생.


▶ 벡터(Vector)
 - 수학적 정보의 형태들이 만들어내는 결과물.
 - 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그것을 화면상에 렌더링함.
 - 따라서 조금 더 많은 연산이 필요하지만 비트맵 이미지와는 달리 해상도(픽셀)로부터 자유롭게 렌더링할 수 있음.
 - 이미지 확대/축소 시에도 깨지지 않음.
 - 수학적 정보만 가지고 있으므로 이미지 확대/축소에 따른 용량 변화가 없음.
 - 일러스트 같은 툴로 편집할 수 있음.
 - 정교한 이미지(인물, 풍경 등)를 표현하기 어려움.

 

 

 

 

 

---

 

▶ 이미지의 종류 및 특징

 

• JPG(JPEG, Joint Photographic coding Experts Group)

  1. Full-color와 Gray-scale의 압축을 위해 만들어짐.

  2. 손실 압축(이미지를 손상시키면서 저장).  
    - 이미지의 용량을 획기적으로 줄여 사용 가능하며 용량 절약에 효율적.

  3. 압축률이 높아 사진이나 예술 분야에서 많이 사용됨.

  4. 표현 색상도(24비트 컬러, 약 1600만 색상)가 뛰어나 고해상도 표시 장치에 적합함.

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

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

 

• GIF(Graphics Interchange Format)

  1. 비손실 압축
    - 이미지를 손상시키지 않으면서 저장할 수 있으나 용량을 획기적으로 줄이기에는 어려움이 있음.
  2. 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있음.
    - 여러 장의 이미지를 하나의 파일에 담을 수 있어 동영상 같은 이미지(애니메이션, 움짤 등) 지원.

  3. 8비트 컬러만 지원
    - 다양한 색상을 표현하기 위한 작업에는 부적합.

 

 

• PNG(Portable Network Graphics)

  1. .gif의 대체 포맷으로 개발됨.

  2. 비손실 압축.
    - 이미지를 손상시키지 않으면서 저장할 수 있으나 용량을 획기적으로 줄이기에는 어려움이 있음.

  3. 8비트(256 색상)/24비트(약 1600만 색상) 컬러 이미지 동시 지원 및 처리.

  4. Alpha Channel(투명도) 지원.

  5. W3C의 권장 포맷.

 

• WEBP

   구글에서 개발한 .jpg, .png, .gif를 모두 대체할 수 있는 이미지 포맷.

  2. 완벽한 손실/비손실 압축 동시 지원(선택 사용 가능).

  3. .gif와 같은 애니메이션 지원.

  4. Alpha Channel(투명도) 지원(손실/비손실 모두).

  5. 지원 브라우저에 제한이 있음(Explorer에서는 지원하지 않음).

    - .webp 지원 브라우저:  https://caniuse.com/#feat=webp

    - 크로스 플랫폼을 고려한다면 WEBP는 완전한 호환이 되지 않는다는 점에 주의!

 

• SVG(Scalable Vector Graphics)

  1. 마크업 언어(HTML/XML) 기반의 Vector 그래픽을 표현하는 포맷.

  2. 해상도의 영향에서 자유로움.
    - 반응형이나 크로스 플랫폼 및 크로스 디바이스에 많이 사용.

  3. CSS로 어느 정도의 스타일링 가능.

  4. JavaScript로 Event Handling 가능.

  5. 코드 혹은 파일로 사용 가능.

 

 

 

 

 

참고 자료

heropy.blog/2019/04/24/html-css-starter/