[Web] 웹 이미지에 대해서
in Study on Web & Frontend
웹 이미지의 종류
웹에서 사용하는 이미지는 크게 두 가지 종류로 나뉜다.
- 비트맵 이미지
- 벡터 이미지
각 이미지들의 특징을 간략하게 적어보자.
1. 비트맵 이미지
래스터(Raster)이미지 라고 불리기도 한다. 우리가 흔히 쓰는 JPE, PNG, GIF 파일들이 여기에 속한다.
색깔의 정보를 담은 픽셀 하나하나가 많이 모여 만들어진 이미지이다.
픽셀 하나하나에 서로 다른 색깔 정보를 담을 수 있어서 다양하고 정교한 표현을 할 수 있지만, 확대/축소 시 계단 현상이 발생하고, 품질이 떨어진다.
위의 두번째 사진을 보면 가장자리가 계단처럼 보이는 계단현상이 나타나는 것을 알 수 있다.
대표적인 비트맵 이미지는 아래와 같다.
- JPG
- PNG
- GIF
1. JPG
- 이미지의 용량과 품질을 쉽게 조절 가능함.
- 가장 널리 쓰이는 포맷.
- 손실 압축방식 사용. (용량이 줄어듦.)
- 표현 색상도(24비트, 1600만 색상)가 뛰어남.
우리가 흔히 예술분야에서 많이 사용하는 이미지 포맷이다. 손실 압축방식을 사용해서 용량이 줄어든다! 하지만 반복해서 손실 압축을 진행한다면 그만큼 품질이 크게 저하되기 때문에 고품질을 원한다면 반복해서 압축하는 행위는 피하는 것이 좋다.
2. PNG
- Alpha Channel을 지원한다.(투명도)
- 8비트 256 색상 / (24비트 1600만 색상) 컬러 이미지 처리.
- 비손실 압축방식 사용.
JPG 포맷과 비교했을 때, 투명한 배경을 사용할 수 있다는 장점이 있다. 그리고 비손실 압축방식을 사용하기 때문에 품질을 좋지만 용량은 클 수 밖에 없다.
JPG파일과 PNG파일을 간단하게 비교한 이미지이다.
이건 사담인데, PNG파일에 투명배경을 적용 해도 전송하는 메신저가 지원을 하지 않으면 투명 배경이 사라지는 것 같다..
지금 이 포스트를 작성하기 위해서 태블릿에서 노트북으로 PNG파일을 가져왔는데 카카오톡으로 전송하니 투명배경부분이 검은색으로 칠해져있었다. 그래서 네이버 메일 내게쓰기로 가져왔다.
투명배경이 필요한 파일이면 어떤 메신저로 가져올지 잘 정해두어야 할 것 같다.
3. GIF
- 비손실 압축방식 사용.
- 여러 장의 이미지 파일을 한 파일에 담을 수 있음.
- 8비트의 색상만 지원(다양한 색상표현에는 적합하지 않다.)
출처 : 나무위키 (개구리 커밋)
우리가 움짤이라 부르는 바로 그 파일 형식이다! 한 파일에 여러 이미지 파일을 나열해서 표현하여 애니메이션을 구현할 수 있지만, JPG, PNG 보다는 색상표현에 있어서 품질이 떨어진다.
4. WEBP
- 완벽한 손실/비손실 압축 지원
- GIF 같은 애니메이션 지원
- Alpha Channel 지원 (손실, 비손실 모두 지원)
구글에서 최근에 개발한 이미지 파일 포맷으로, JPG과 PNG, GIF의 기능을 모두 합친 이미지 파일 포맷이다.
엄청난 장점을 가지고 있지만, 최근에 개발되었기 때문에 호환되는 브라우저의 확인이 필요하다.
인터넷 익스플로러(IE), KaiOS Browser 제외하고는 모두 최신버전이라면 지원한다.
이렇게 기술이 웹 브라우저에서 지원되는지 확인하는 과정을 하위호환성 확인 이라고 한다!
2. 벡터 이미지
색깔의 정보를 담은 픽셀들의 집합 형태로 나타나는 비트맵 이미지와는 달리, 색깔, 점, 선, 면의 위치, 좌표 등을 이용해서 나타내는 이미지 형식이다. 그렇기 때문에 확대, 축소를 해도 계단 현상이 일어나지 않고, 용량과 품질 변화에서 비교적 자유롭다.
하지만 많은 색깔 정보를 담을 수 없기 때문에 정교한 표현을 하기는 힘들다.
SVG 파일
벡터 이미지의 대표적인 파일 포맷이다.
아이콘과 로고에 많이 쓰이는 파일 포맷이며, 마크업 언어(HTML/XML)기반으로 표현하고, CSS, JS로 제어가 가능하다.
이렇게 PPT에서 제공하는 아이콘으로 쉽게 만나볼 수 있다!
