Raster Image vs Vector Image

김동현·2021년 12월 21일
0

CSS3

목록 보기
13/13
post-thumbnail

이미지를 사용할 때 어떤 이미지인지 파악한 이후에 적잘한 파일 형식(확장자)을 선택해야 합니다. 파일 형식은 jpg(jpeg), png, svg, gif, webp 등이 존재합니다.

Raster Image & Vector Image

올바른 확장자를 사용하기 위해서는 Raster Image인지 Vector Image인지 구분할 수 있어야 합니다. Vector Image는 vector 기반 이미지이며 확대를 하여도 이미지가 깨지지 않는 이미지이며, Raster Imgae는 픽셀 기반 이미지이며 확대를 하면 이미지가 깨집니다.

즉, 이미지를 확대했을 때 깨진다면 Raster Image, 안 깨진다면 Vector Image로 구분할 수 있습니다.

Raster Image

Raster Image는 비트맵, 픽셀을 채워서 만든 픽셀 기반 이미지입니다. 대표적인 파일 형식으로는 jpg(jpeg)와 png가 있습니다. 이 둘을 구분하여 사용할 수 있어야 합니다.

jpg와 png의 차이점은 다음과 같습니다.

  1. png는 투명한 배경색을 지원하지만 jpg는 투명한 배경색을 지원하지 않습니다. 만약 이미지의 투명한 배경을 살려야 한다면 반드시 png를 사용해야 합니다.

  2. 이미지의 압축 방식에 차이가 존재합니다. 하나의 웹 사이트의 리소스 용량 60~65%를 차지하는 부분이 바로 이미지입니다. 이미지의 용량이 크다는 것은 렌더링, 로드되는데 오래 걸리다는 의미를 갖습니다. 이는 웹 사이트를 로드하는데 시간이 오래 걸려 사용성이 좋지 않다는 이슈를 발생시킵니다. 프론트엔드 개발자는 퍼포먼스에 해를 끼치지 않는 적절한 이미지의 파일 형식을 사용해야 합니다.

jpg와 png는 서로 다른 이미지 압축 파일 방식을 사용합니다.

  1. jpg의 경우 파일 압축을 굉장히 잘 합니다. 이는 이미지의 용량이 더 낮아지며 퍼포먼스가 좋아집니다. 또 다른 말로 압축이 되어 이미지의 풍부한 픽셀 표현이 무뎌집니다. 이는 이미지의 퀄리티가 상대적으로 떨어지는 이슈가 있습니다. 일반적으로 용량이 좀 큰 편인 경우, 실사 기반인 경우 jpg 확장자를 많이 사용합니다.

  2. png는 이미지를 압축하더라도 이미지의 손실이 거의 없습니다. 즉, 이미지 표현의 로스가 거의 없습니다. 그렇기 때문에 이미지의 용량이 커진다는 이슈가 있습니다.

  3. webp라는 파일 형식은 구글에서 만든 이미지 파일 형식으로 png보다 26% 더 적은 용량을 가지며, 이미지 퀄리티가 jpg보다 22% 향상됩니다.

Vector Image

Vector Image인 경우 Vector 특성을 살리기 위해서 svg(scalable vector graphics)라는 파일 형식을 사용합니다. vector graphics는 수식을 통해 컴퓨터가 그래픽을 연산으로 표현하는 그래픽 표현 방식입니다. 그렇기 때문에 vector graphics는 이미지 표현의 로스가 없습니다. 이는 이미지 사이즈에 상관없이 언제나 깨끗한 이미지를 사용해야 하는 경우 svg를 사용합니다. 참조고 폰트도 vector graphic입니다.

용량 또한 상대적으로 가볍습니다. 이때 가볍다는 의미는 svg 이미지 파일의 크기가 얼마가 되든지 언제나 동일한 용량을 갖습니다. 즉, 이미지의 크기가 더 커진다고해서 용량이 커지는 것이 아니라 기존 용량을 동일하게 갖습니다. 반면에 Bitmap 타입 이미지의 경우 이미지 크기가 커진다면 용량도 따라 커집니다.

위 그림처럼 이미지 사이즈가 매우 작은 경우 bitmap 이미지가 더 작은 용량을 가질 수 있지만 이미지의 크기가 클 경우 상대적으로 vector 이미지가 더 적은 용량을 갖게 됩니다.

일반적으로 아이콘, 로고의 경우 svg 사용을 권장합니다.

svg 파일을 사용하는 방법는 아래처럼 여러 방법이 존재합니다.

  1. <img />를 사용하여 src 어트리뷰트 값에 svg 파일의 경로를 작성하여 이미지 삽입하기

  2. css의 background-image 프로퍼티의 값으로 svg 파일의 경로를 작성하여 이미지 삽입하기

  3. <svg>를 사용하여 이미지 삽입하는 방식도 존재합니다.

    <svg>태그를 html 문서에 작성하면 <img />태그를 사용한 것과 동일하게 이미지가 화면에 렌더링됩니다. svg 태그 방식을 사용하면 이미지를 제어할 수 있는 부분이 더 많아집니다. svg 태그 내부에 작성된 모든 path 태그의 fill 어트리뷰트에 currentColor라는 값을 작성하게 된다면 폰트처럼 color 프로퍼티로 색상을 지정할 수 있습니다.

하지만 svg 태그를 직접 html 문서에 작성하는 방식은 권장되지 않습니다. svg 태그 내부에 작성된 코드의 양이 많고 난잡하기 때문입니다. 우리는 svg 이미지를 아이콘 폰트로 변환하여 사용할 수 있습니다. 마치 폰트에 서체를 지정하듯이 사용할 수 있습니다.

Icon Moon에 접속하여 svg 파일을 폰트 파일로 변환할 수 있습니다. 다운받은 파일을 압축 해체를 하면 아래와 같은 폴더를 전달받습니다.

위 사진에서 fonts 폴더 안에 존재하는 폰트 파일들을 우리의 프로젝트로 옮긴 후, style.css 파일에 작성된 코드 또한 우리의 프로프젝트에 작성해주어야 합니다. 폰트를 사용하기 위해서는 @font-face로 선언해주어야 하는데 아이콘 폰트 또한 폰트이므로 그 작업을 해주어야 합니다. 이때 style.css 파일에는 그러한 @font-face 선언이 작성되어 있습니다.

이후에 아이콘 이미지는 <i>를 통해서 생성하며 class 어트리뷰트에 지정된 클래스 명을 작성하여 아이콘의 스타일을 설정할 수 있습니다. 이때 아이콘은 폰트이므로 폰트와 관련된 css 프로퍼티를 사용할 수 있습니다.

profile
Frontend Dev

0개의 댓글