현재 다니고 있는 회사에서는 피그마를 이용하여 디자이너와의 협업을 진행하였는데, 이미지를 추출하는 과정에서 jpg, png, svg ..어떤 이미지 타입을 사용할지 항상 고민을 하게된다. 각 파일 형식들은 저마다 용량이나 화질의 차이, 색상 표현의 다양성, 압축방식, 호환성 등 각기 다른 특성을 가지고 있다. 더 정확한 의미를 알아보고, 기록하게 위해 정리하고자 한다.

JPG

우선 사전적 의미를 살펴보자면, '웹에서 표준으로 사용되고 있는 그래픽 파일의 확장자에 해당하며, JPEG 압축 방식을 사용하여 이미지 파일에 사용되는 파일 확장명' 이라고 설명되어 있다. 즉 JPEG는 압축 형식이므로 디테일을 일부 희생시켜 파일 크기를 줄인다.

• 이미지를 저장할 때 그래픽 파일 포맷 중 하나에 해당하는 데, PNG와 GIF 같은 포맷보다 압축률이 제일 뛰어나다.

• 용량을 최소화시킬 수 있다.

• 이미지 손실이 많다.

• 랜딩페이지의 메인 배경이미지에 주로 JPEG타입을 사용한다,

PNG

다양한 색과 투명 백그라운드를 지원하는 특성 덕분에 다른 백그라운드 위에 그래픽을 얹는 경우 유용하다. 이 형식은 무손실 압축을 사용하므로 이미지 디테일 손실이 전혀 없고 결과적으로 JPEG 형식보다 더 고품질 이미지를 생성하지만 파일 크기는 JPEG에 비해 더 커진다.

• 상대적으로 용량이 많으나, 이미지 손실이 적다.
• 온라인에 게시할 때도 텍스트와 로고를 선명하게 유지하므로 소셜 미디어 표지 이미지에 적합하고, 투명 배경을 사용하는 고화질 풀 컬러 이미지가 필요한 경우 PNG가 가장 적합하다.

SVG

사전적 의미는, SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도 편집이 가능하다.

• Vector(벡터)화된 그래픽 이미지이다.

• Vector ? 수학적 함수를 이용하여 도형이나 선을 그려서 표시하는 방식, 확대했을 때 계단식 현상이 일어나지 않고 선명함을 유지. 또한 레스터 방식에 비해 용량이 작다. 그러나 색상의 자연스러운 변화나 세밀한 표현이 어렵다.

• 로고나, 아이콘, 간단한 벡터이미지들을 사용할 때 적합하다.

• SVG를 사용하여 색상을 변경할 수도, 애니메이션을 적용할 수도 있다. 따라서 SVG를 잘 이해하고 사용하는 것이 매우 중요하다고 생각한다. 이에 관해서는 글을 추후에 작성할 예정이다.

Raster

• JPG, PNG, GIF, BMP 파일 형식이 Raster 방식으로 표현된다.

• 래스터 방식은 이미지의 모양과 색을 색상 정보가 담긴 픽셀로 표현하는 방식이다. 흔히 비트맵방식이라고 불린다. 각각의 픽셀에 색을 입혀, 그 픽셀을 하나로 모아서 그림이나 선 등을 만들어낸다. 각각의 픽셀을 이용해 작업하는 만큼 자연스러운 이미지를 표현할 수는 있지만, 확대를 할 경우 그림이 깨져서 보이는 계단식 현상이 나타나며, 픽셀의 수가 많아질수록 파일의 크기가 커지는 단점이 존재한다.

• 확대를 할수록 레스터로 표현된 이미지는 픽셀이 드러나며 선명도가 떨어지는 반면에, 벡터로 표현된 이미지는 어떠한 크기에도 원본의 선명도를 유지한다.