[이미지 확장자] Vector? Raster? PNG, JPEG 뭐가 다를까?

코딩을 하다보면 이미지를 사용할 일도 있고

이미지 포스팅

피피티

문서.. 등

이미지를 사용할 일 이 많지만

어떤 확장자를 써야하는지 고민하는 사람들은 적을거에요

대부분 고민 한다고하면 투명도를 지원하고 안하고의 차이정도인 png를 사용하느냐 마느냐정도가 있겠네요

 

뭐가다른지 궁금하게되서 정리해보려고해요

 

 

이미지는 크게 Raster와 Vector타입으로 나뉜다고해요

 

각 타입에 해당하는 대표적인 확장자로

png 비트맵(Raster) - 고정된크기 늘어나면 문제생김(깨짐현상)

pdf 백터 - 늘어남에 따라서 문제없음(잘늘어나고 선명)

 

Raster

JPG, GIF, PNG, TIFF, RAW, PSD 파일이 속함

픽셀베이스 그래픽으로 사진이나 웹그래픽에 사용

픽셀이라고 불리는 점들이 그리드형태로 모여서 하나의 그림을 완성하는 것

픽셀은 한가지의 색상을 표현하고 해상도에 따라서 달라짐 → 사이즈가 하나로만 고정되어 있다

이미지를 크게변형하면 픽셀도 함께 커져서 픽셀이 쪼개지거나 이미지가 흐려지게 되는 현상

 

Vector

커브베이스 그래픽으로 로고, 아이콘, 폰트, 디지털일러스트 등에 사용

해상도에 의존적이지 않음

점, 선, 곡선 등을 컴퓨터가 계산하는 디지털 아트워크

이미지안에 기본적으로 수많은 수학방정식을 포함하고

각각 방정식은 색상, 스트로크, 두께 등에 관한 정보를 갖고있어서 특정한 모양을 만들어 낼 수 있음

크기에 상관없이 이미지가 언제나 동일한 모습을 유지함

 

 

---

 

JPG/JPEG(Joint Photographic Experts Group)

무손실 래스터 이미지 포맷

24비트 넓은범위색지원 → 카메라, 스캐너에서 흔히사용

압축형식이라서 디테일을 일부 희생시켜 파일크기를 줄임 → 메모리공간 절약, 온라인,이메일 공유시 유리

압축될수록 부자연스럽고 픽셀처럼 보이는 현상

PNG(Portable Network Graphics)

GIF보다 압축률이 더 높음

8비트의 알파 채널 사용 → 투명도 조절 가능

JPG보다 깔끔하게 저장됨

파일용량이 크게저장 될 수 있음

고퀄리티의 투명한 웹그래픽 필요한경우사용

RAW

원래 그대로의것

디지털카메라나 스캐너가 읽어들인 가공되지 않은 데이터

이미지는 (색상,노출등에대한)처리과정을 거친다음에 다른 이미지포맷으로 압축변환

처리되지 않은 데이터와 처리된 데이터 두가지를 별도 파일로 저장함

GIF(Graphics Interchange Format)

무손실 래스터 포맷

256가지 색만 저장가능 → 그라데이션같은경우 계단현상 나타날수도

비손실 압축방법

배경이 투명한 이미지 지원

움직이는 이미지 지원

PDF(Portable Document Format)

벡터 그래픽 기반

기기나 프로그램, 브라우저에 관계없이 문서와 그래픽을 정확하게 보여주기위해 사용

AI(Adobe Illustrator)

어도비에서 개발한 벡터 이미지 포맷