컴퓨터에서 사용되는 다양한 이미지 파일 형식에 대한 이해

---

관련 기본 개념

 

벡터 vs 래스터

Raster

픽셀/개별 블록의 집합, 이미지의 형태 등을 뜻하는 형식. JPEG, PNG, GIF 등이 있습니다.

픽셀은 해상도(resolution)에 따라 일정 비율을 갖기에 마음대로 줄이고 늘이면 왜곡이 발생할 수 있으며 각 어플리케이션이나 출력 장치에 적합한 파일형식과 크기를 계산해줘야 합니다.

Vector

벡터이미지는 더 유연한 스타일입니다. 픽셀이 아닌 비율 공식에 따라 정의됩니다. EPS, AI, PDF 등이 그러합니다. 

로고나 그래픽 등은 벡터 값을 이용하는게 좋습니다. 

 

Resolution 해상도,  (높은 해상도 vs 낮은 해상도)

DPI (Dots Per Inch) , PPI (Pixel Per Inch) 등은 픽셀 밀도가 해당 어플리케이션에 적합한 지 따지는 요소 중에 하나.

이런 구분의 사용은 출력 형식이 종이냐 웹이냐데 따라서 또 다릅니다.

 

---

종류

 

이미지 파일 형식 분류

1) JPEG 

Joint Photographic Experts Group

가장 기본이 되는 형태. 손실압축법 사용하므로 3세대부터는 파일 손상 불가피. 

 

JPEG와 JPG의 차이점은? 없음! JPEG가 저 약어의 회사가 만든건데 엄첨 많이 쓰이는 확장자가 4글자나 되는 것이 너무 낭비라서 3글자로 줄인 것입니다.

2) TIFF

Tagged Image File Format

TIFF는 손실 없는  큰 Raster 이미지 파일 형식입니다. = 무손실압축: 복사 재저장, 압축하던간에 파일 퀄리티를 유지시켜준다는 뜻입니다. TIFF는 앞서 말한 여러 가공 후에도 원본파일을 다시 살릴 수 있다는 점에서 베리떙큐입니다.

그러나 웹 구성 시에는 이 파일을 피하는게 좋은데, 로드하는데 시간이 엄청 오래 걸려 웹 성능을 잡아먹을 수 있다는 것입니다. 

그래서 보통 TIFF는 사진을 출력물로 바꿀 때 사용합니다. 

3) PNG

Portable Network Graphics

투명도 배경 지원하는 형태.

PNG-8과PNG-24로 나뉘어 24에서는 더 많은 색상 지원하고 부분 불투명도 지원해서 그라디언트, 그림자 효과 등에 유리.

JPEG에 비해 온라인 게시할 때 선명한 색감 유지해서 로고, 텍스트에 유리

 

인쇄물에 비해 웹에 게시할 때 JPEG보다 장점이 두드러지는 파일형태입니다. 편집 가능하고 무손실 압축 가능하다는 장점이 있지만 해상도 자체는 낮은 편입니다.

4) GIF

Graphics Interchange Format

작은 애니메이션을 위한 작은 파일 생성.

 

텀블러페이지나 웹배너 같은 것들을 위한 짧막한 애니메이션을 저장하기 좋습니다. 색상수는 256개로 제한됩니다.

이미지를 매우 빨리 업로드하기에 좋은 형식입니다. 

5) PSD

PhotoShop Document

어도비사의 네이티브 파일 형식. 어도비 프로그램이 범용적이므로 다른 앱에서도 자주 지원됨.

레이어를 지원함. -> 이미지 조정, 그래픽 요소, 텍스트를 하나의 문서에 레이어별로 지정 가능

 

Adobe Photoshop(Raster file을 만들어냄)에서 사용되는 파일 형태로, 레이어를 사용한다는 것이 가장 큰 특징. 

 

6) PDF

Portable Document Format

모든 단일/다중 문서의 파일을 사진 찍은 형태. 단순 옵션 설정으로 압축이 가능해 초대장, 명함, 브로셔 등을 PDF형태로 많이 사용 중.

 

Adobe ! Adobe ! 또도비! PDF마저 Adobe 사에서 만들어졌습니다. PDF는 누구나에게 어떤 기기에서도 어떤 어플리케이션에도 어디에서나 충분한 정보를 제공하는 캡쳐이미지를 제공하기 위해 만들어졌습니다. 정말 고대로 캡쳐링하기에 어떤 프로그램에서도 View가 가능합니다. 그리고 각 소프트웨어는 PDF를 받아 각각 어떤 조작도 가능합니다. 

7) BMP

윈도우 기반 PC에서 많이 사용하는 그래픽 파일 형태

8) RAW

Raw

 

가장 가공이 덜 된 형태의 파일 형식, 카메라에서 사진 찍힌 바로 그 상태나 raw file format으로 저장된 상태, 또는 어떤 기기에 막 업로드된 상태 등등. 정말 작은 디테일도 가공되기 전의 말그대로 순수한 원본 파일을 의미합니다.

 

CR2, CRW, NEF, PEF 등 다양한 타입은 보통 각 기기에서 비롯됩니다. Canon, Nikon, Pentax 등 회사 이름의 약어 가지는 것 생각하면 쉬워요.

9) EPS

Encapsulated PostScript

 

EPS는 벡터 형식입니다. 출력을 위한 고해상도 파일을 위해 만들어졌습니다. 거의 모든 design 소프트웨어는 EPS지원이 가능합니다. 그래서 PDF처럼 범용적인 형식이라고 할 수 있습니다. 디자인 툴을 위한 벡터 기반의 작업이 가능합니다. 

10) AI

Adobe Illustrator document

 

디자이너들이 선호하는 이미지 형식으로 웹에서 출력물까지 거의 모든 형식의 프로젝트에서 신뢰할만한 파일 형식입니다.

벡터 기반의 작품을 만들어냅니다. 그리고 앞서 말한 모든 파일 형식으로의 연계가 가능합니다. 

11) INDD

adobe INDesign Document

 

Adobe의 Indesign 프로그램을 위한 파일 형식입니다. Indesign 프로그램은 큰 출력물, 신문, 잡지, e-book 등을 작업을 위해 사용합니다. 

Adobe의 Illustrator, Photoshop의 파일들을 위 프로그램에서 결합해서 고급 타이포그래피, 고급 그래픽, 페이지 컨텐츠를 만드는데 사용합니다. 

 

 

출처:

“JPG와 PNG의 차이점은?”  ( 링크 )

10 Types of Image File Extensions and When to Use Them ( 링크 )

 

---

개인적 고찰 

 

프론트엔드 개발 관점의 이미지 파일 형식 고려 포인트 ?

 

1. 성능 개선

 

2.