본문 바로가기
꿀정보/그 외 기타

이미지 파일 JPEG, PNG, TIFF, SVG, GIF 차이점

by HejG 2021. 5. 12.

 

 

 

온라인에서 우리가 보는 수 없이 많은 이미지들의 속성을 확인해보면 파일 형식이 매우 다양합니다. 

자주 볼 수 있는 JPEG 부터 약간은 생소한 TIFF, SVG 파일까지.

 

이 글은 어떤 종류의 이미지 파일을 언제, 왜 사용하는지에 대한 약간의 정보 제공을 하고자 작성하였습니다. 

 

 

 

 

JPEG (Joint Photographic Experts Group) 혹은 JPG 파일

 

흔하게 볼 수 있는 보편적이고 일반적인 이미지 파일 형식으로서, .JPEG, .JPG 라는 파일 확장자를 사용합니다. 

웹사이트나 소셜 미디어에 업로드하기에 가장 적합하기에 웹브라우저에서 가장 많이 볼 수 있는 파일 확장자이지요. 

 

이미지 파일을 압축하여 작게 만들어서 빠르게 로딩될 수 있도록 만든 압축된 그래픽 파일이기 때문에, 

저화질이나 중간 화질 정도의 사진으로 볼 수 있습니다.  

 

그렇지만 일반적으로 웹에서 우리가 보는 이미지가 외부 인쇄 작업을 해야하는 고품질의 이미지 파일일 필요는 없기 때문에, 

크롬이든 사파리든 웹사이트에서 일반적인 이미지 공유로 매우 적합한 파일 형식이지요. 

 

동일한 JPEG 파일을 반복 저장하게 되면, 저장할 때마다 이미지의 품질이 낮아지는 단점이 있습니다. 

 

 

TIFF (Tagged Image File Format) 파일

 

 

광고와 같은 상업적 목적, 출판용 인쇄에 적합

 

 

압축되지 않은 고품질의 디지털 이미지를 의미합니다. 

웹에서 우리가 일반적으로 보는 이미지는 해상도나 화질이 그렇게 중요하지 않을 수도 있지만, 품질과 해상도가 중요할 때가 있습니다.

바로 광고와 같은 상업적 목적 또는 출판 인쇄정교한 그래픽 작업에서 그렇습니다. 

 

따라서, TIFF 는 상업 또는 전문 작업을 인쇄하거나 출판을 위한 작업을 위한 파일 형식이라고 할 수 있습니다. 

주로 Adobe Photoshop이나 InDesign 과 같이 출판용 페이지 레이아웃을 그리는 소프트웨어 프로그램에서 지원하는 형식입니다. 

 

JPEG와 달리 TIFF는 이미지의 품질을 그대로 유지하기 위해 무손실 압축 알고리즘을 사용합니다.

이 때문에, 고해상도 이미지 그대로를 보여주는 파일입니다.  

손실이 없으니 이미지의 사이즈는 커진다는 단점이 있습니다. 

 

Tiff 형식은 벡터가 아닌 래스터 형식(픽셀)으로서, 인터넷에 TIFF 확장자로 이미지를 올리면 당연히 로딩 시간이 매우 길어질 것입니다. 

이 때문에 웹 사이트에서는 이 tiff 형식이 지원되지 않는 경우가 많습니다. 

 

 

 

PNG (Portable Network Graphics) 파일

 

 

브랜드의 로고, 배경이 투명한 이미지에 적합 

 

 

 

이미지의 품질에서는 TIFF와 비슷하지만, 배경이 투명하기 때문에 좀 더 복잡한 이미지를 작업하기 좋은 파일 형식입니다. 

 

정교한 작업이 필요한 웹 그래픽, 예를 들면 브랜드의 로고일러스트레이션, 프린트물을 작업하기에 좋습니다.

회사 홈페이지를 보면 색깔있는 배경 위에 로고가 있는 경우를 많이 보셨을 것입니다.

이처럼, 웹 사이트의 컬러 배경 위에 오버레이하려는 그래픽이나 로고가있는 경우 PNG로 저장해야 합니다. 


JPEG와 달리 이미지 저하없이 PNG 파일을 반복해서 다시 저장할 수 있습니다.

PNG 파일은 본질적으로 무손실이므로, 똑같은 PNG 파일을 반복 저장하면 파일이 점점 더 커질 것입니다. 

 

JPEG랑 비교했을 때, 웹 사이트에 PNG 파일로 업로드하면 웹 사이트 로딩 속도가 느려집니다.

그러나 그래픽의 품질을 유지하려면 어쩔 수 없겠지요. 

 

 

 

 

SVG (Scalable Vector Graphics) 파일

 

 

출처: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

 

웹 디자인에 관심있는 분이라면 이 SVG파일을 자주 보셨을 것입니다. 

 

SVG 파일은 GIF, JPEG, PNG와 같은 픽셀 기반(Raster 형식)의 이미지 파일과 다른 XML기반의 이미지 형식입니다.

SVG 파일은 로고, 아이콘 및 간단한 그래픽에 사용되는 확장자라고 할 수 있겠습니다. 


SVG 파일은 모양, 색상, 크기를 정의하는 일종의 수학 방정식 같은 코드로서, 

디자이너는 그래픽 편집 응용 프로그램에서 이미지를 렌더링할 필요없이 텍스트 편집기에서 이미지 요소를 정의할 수 있습니다.

 

따라서, 이 SVG 형식을 지원하는 Adobe Illustrator, Sketch와 같은 벡터 기반의 그래픽 편집 프로그램이 필요합니다.

특수한 프로그램을 사용하여 코드로 프로그래밍 할 수 있기 때문에, 반응형 웹 사이트 작업에 적합하겠습니다. 

 

본래 위에서 다룬 이미지 파일 형식은 래스터(Raster) 기반이기 때문에,

이 파일들을 원래 크기 이상으로 확대하면 점들처럼 흐릿하게 깨져보일 것입니다. 

 

하지만 SVG 파일은 벡터(Vector) 기반이므로, 확대해도 깨지는 것 없이 품질이 그대로 유지됩니다.

PNG 파일보다 더 선명하게 보이고 훨씬 더 파일 사이즈가 작기 때문에, 웹 사이트 속도가 느려지는 단점은 없습니다. 

 

 

GIF (Graphics Interchange Format) 파일

 

 

gif 형식의 밈 

 

 


"Graphic Interchange" 라는 이름에서 알 수 있듯이, 흔히들 "움짤"이라고 하는 애니메이션을 지원하는 파일 확장명입니다.

움직이는 이미지 또는 투명한 이미지에 쓰이는 파일이라고 볼 수 있겠습니다. 

 

png 파일과 마찬가지로 gif는 본질적으로 무손실이지만, 실제로는 png 이미지보다 더 많은 용량을 차지합니다.

투명한 이미지에도 쓰이지만, 투명도에 대한 지원이 약하고 256색만 있으며 웹 사이트 속도를 느리게 만듭니다.

(짤이 다운로드 안되서 사이트 로딩이 안됐던 경험 다들 있으실 겁니다.)

 

따라서, 웹 사이트에서 애니메이션을 제외하고는 gif 형식을 사용하지 않는 것이 좋습니다.

 

 

 

 

반응형

댓글