웹에서 사용할 수 있는 이미지를 알아보자
비트맵 : 각각의 픽셀들이 만들어진 이미지 = 레스터Raster화된 이미지 (e.g. jpeg 포멧, gif 포멧, png 포멧)
**PhotoShop > layer > raster화 메뉴 존재 > 즉, 해당 layer를 비트맵으로 만드는 기능이다.
점, 선, 면의 수학적 정보로 이루어져 있는 이미지 (e.g. svg 포멧)
| 비트맵 (Bitmap) | 벡터 (Vector) | |
| 장점 | 정교하고 다양한 색상을 표현할 수 있다. | 확대/축소 자유로움, 용량 변화 없음 |
| 단점 | 확대/축소 시 품질 저하 (계단현상으로 깨짐) | 정교한 이미지 표현 어려움 (e.g.: 인물, 풍경 사진) |
| 예시 | 우리가 알고 있는 대부분의 사진 이미지들 해당 | 아이콘, 평명적인 이미지(e.g. 로고 이미지) |
JPEG Format (Joint Photographic coding Experts Group)
Full-color와 Gray-scale의 압축을 위해 만들어 짐
압축률이 훌륭하여 사진, 예술 분야에서 많이 사용
특징 :
- 손실 압축 > 이미지 반복적 새롭게 저장X
- 용량이 작은 장점
- 표현색상도 : 24비트 (1600만개 생상 표현 가능)
이미지 품질, 용량 쉽게 조절 가능 (평소에 자주 볼 수 있는 이미지 포멧이어서)
i.e.
jpeg 비트맵 이미지에 픽셀 정보가 손실되면서 압축되어 용량이 획기적으로 줄어드는 장점을 가지고 있다.
이미지가 조금씩 손상되면서 저장되기 때문에 jpeg 이미지로 여러번 저장할 경우, 색상이 발하는 단점이 있다.
PNG Format (Portable Network Graphics)
GIF의 대체 포멧으로 개발됨
특징 :
- 비손실 압축 (i.e. 이미지 손실X)
- 용량이 비교적 크다 (jpeg와 비교해서)
- 표현색상도 : 8비트 (256개 색상), 24비트 (1600만 색상) 컬러 이미지 처리 가능
** 일반적으로 24비트 쓰는 것을 권장
- Alpha Channel 지원
** Alpha Channel :
이미지 내부에서 투명한 부분을 지원하는 기능 (이미지1)
i.e. 저장할 사진에 투명영역이 있을 경우, PNG로 저장 하지만 그렇지 않은 경우 압축률이 좋은 JPEG사용 하자
GIF Format (Graphics Interchange Format)
하나의 이미지 파일 안에 여러개의 이미지를 가질 수 있는 구조로 정보들 저장 가능
특징 :
- 비손실 압축
- 여러장 이미지를 한 개의 파일에 담기 가능 (i.e. 애니메이션, 움짤)
- 표현색상도 : 8비트 (256개 색상) 컬러 이미지 처리 가능
다양한 색상 표현이 어려운 단점을 지니고 있다.
WEBP Format(raster graphics file format)
developed by Gggole intended as a replacement for JPEG, PNG, and GIF file formats.)
특징 :
- 손실/비손실 압축 방식 동시에 지원
- GIF 애니메이션, 움짤 기능 지원
- PNG의 Alpha Channel 지원
** 주의사항 :
비교적 최근에 나온 포멧으로 지원되는 브라우저 목록을 확인하고 사용할 것 (아래 링크 참조)
이를 하위호환성 확인한다고 말한다.
i.e. 이렇게 옛날 버전 환경에서 특정 기술이 호환되는지 확인하는 것
브라우저 호환가능 버전 확인 사이트로 캔아이유즈를 참고할 것
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
SVG Format(Scalable Vector Graphics)
벡터 그래픽을 표현하는 포멧
특징 :
- 해상도 영향에서 자유로움
벡터 이미지는 점,선,면의 수학정 정보를 가지고 있는 이미지 포멧이기 때문에 이미를 키워도 해상도의 영향을 받지 않고 사용 가능
- 이미지 크기가 자주 변경되는 아이콘, 로고에 사용하기 적합
- CSS, JS로 제어 가능 (이미지2)
- 파일 또는 코드로 웹페이지 삽입 가능
