[Image] 래스터(JPG, PNG, BMP, WebP), 벡터(SVG) 이미지

• 대부분의 이미지 파일들은 래스터 파일과 벡터 파일이라는 두 가지의 일반적인 카테고리로 분류할 수 있다.

 

픽셀(pixel)

[Android] px(pixel), dp(dip), sp

 

래스터(Raster) 이미지

• 픽셀이라고 불리는 점들이 그리드(격자무늬) 형태로 모여 만들어진 이미지
• 하나의 픽셀이 한 가지 색상을 표현하며, 일정한 수의 색상 픽셀로 구성되어 있기 때문에 파일 크기를 변경하면 *해상도가 저하된다.
  • 해상도 : 화면이나 인쇄에서 이미지의 정밀도를 나타내는 지표로, 이미지를 표현하는 데 사용된 픽셀 또는 도트의 수를 의미한다.
• 픽셀 수가 제한되어 있기 때문에 크기를 조정할 경우 이미지가 왜곡되거나 흐려질 수 있다.
• 래스터 파일을 올바른 치수로 표시하면 고해상도 사진에서 볼 수 있는 복잡한 디테일과 색상을 고스란히 표현할 수 있다.
  • 파일에 포함된 픽셀 수가 많을수록 이미지 품질이 높아진다.
• 래스터 그래픽이나 사진을 편집할 때 각 픽셀을 개별적으로 변경할 수 있다. 따라서 필요에 따라 이미지를 보정하고 조정할 수 있다.
• 매우 다양한 프로그램과 웹 브라우저에서 열 수 있으므로 이미지를 간편하게 확인하고, 편집하고, 공유할 수 있다.
• 래스터 파일에는 수백만 개의 픽셀이 포함될 수 있다. 이로 인해 매우 디테일한 이미지가 생성되지만 파일 크기가 커지고 로딩 속도가 느려질 수 있다.
• 로고를 단 한 곳에서, 항상 동일한 치수로 활용할 경우에만 사용하는 것이 좋다. 여러 용도로 사용하기 위해 크기를 조정해야 한다면 해상도가 손실되지 않는 벡터 파일이 더 좋다. 일반적으로 사진, 디지털 아트워크, (배너 광고, 소셜 미디어 콘텐츠, 이메일 그래픽 등과 같은) 웹 그래픽에서 사용된다.
• 포맷이 데이터를 어떻게 처리하는 가에 따라서 손실(Lossy) 이미지가 될 수도 있고, 무손실(Lossless) 이미지가 될 수도 있다.

 

JPG (JPEG : Joint Photographic Experts Group)

• 세부 정보가 많고 색상이 풍부한 고품질 디지털 사진을 효율적으로 저장하도록 설계되었다. 최대 24비트 색상을 지원한다.
• 손실 압축 방식을 사용하므로 파일이 압축될 때 이미지의 일부 데이터가 영구적으로 삭제되지만, 대용량 이미지를 관리하기 쉬운 작은 파일 크기로 만들 수 있다. 디스크 저장 공간이 제한적일 경우 유용하며, 로딩 시간이 단축된다는 것도 장점이다.
• 파일 크기가 작아서 빠르게 전송하고 액세스 할 수 있다.
  • 파일 크기와 다운로드 속도가 중요한 온라인에서 사용하기 아주 적합하다.
• 사람의 눈으로 볼 수 없는 모든 색상을 지능적으로 제거하여 파일 크기를 최대한 작게 유지한다.
  • 손실 이미지는 원래의 이미지에 있는 색상의 정보를 줄이거나 불필요한 데이터를 없앨 수 있다. 원래의 이미지가 가진 모습과 거의 비슷하다.
• JPEG 압축은 서로 다른 많은 색상을 저장할 필요가 없도록 색상 값을 변경하고 균일한 색상으로 픽셀 그룹을 차단하여 파일 크기를 줄인다. 파일 크기가 줄어들면서 색상이 변경되기 때문에 실제 이미지가 달라진다.
• 손실 압축은 공간을 절약할 수 있지만 압축률이 매우 높은 이미지를 처리할 때 품질이 저하된다. 가장자리와 선이 뚜렷한 이미지는 압축 시 선명도가 약간 손실된다.
• 너무 많은 데이터가 손실되면 색상 간 전환이 부드럽지 않아 이미지가 부자연스럽게 보이는 ‘포스터화’ 현상이 발생할 수 있다. 또한, 이미지 품질에 심각한 영향을 줄 수 있는 ‘결함’(가장자리의 앨리어싱, 블루밍, 노이즈)이 나타날 수 있다.
• 파일을 편집하고 저장할 때마다 더 많은 데이터가 손실되기 때문에 시간이 지나면 파일의 품질이 더욱 저하된다.
• 투명한 배경을 지원하지 않기 때문에 로고나 텍스트 중심의 그래픽은 적합하지 않다. 또한, 배경 색상이 다른 웹 페이지와 자연스럽게 조화를 이루기 어렵다.
• 24비트 색상을 지원하므로 1,670만 가지 색상을 표시할 수 있다. 이 기능은 다양한 색상과 부드러운 그라데이션을 표현하는 데 유용하다. 

 

PNG (Portable Network Graphics)

• 무손실 압축 방식을 사용하므로 이미지가 압축될 때 손실되는 데이터가 없고, 저장과 전송이 매우 간단하다.
• 무손실 이미지 포맷은 원본 파일에 있는 모든 데이터를 포함하고 있다. 파일이 압축되어 있는 경우에도 원래 상태로 재구성할 수 있다.
• 아무리 파일을 편집하고 저장해도 이미지 품질이 유지되고 이미지가 흐려지거나 왜곡되지 않으므로, 선명한 로고나 수치가 많이 포함되는 그래프에 적합하다.
• 압축 시 모든 원본 데이터를 유지하므로 JPEG 보다 파일 크기가 훨씬 크다. 따라서 컴퓨터의 하드 드라이브에서 공간을 많이 차지한다.
• 압축된 PNG 에는 고품질의 디테일한 이미지 데이터가 포함되어 있지만, 파일 크기가 클수록 페이지 로드 시간과 응답 속도가 느려진다.
• 무손실 압축 방식으로 더 많은 정보를 담고 있기 때문에 파일 크기가 크다.
• 용량이 크기 때문에 저장 공간이 추가로 필요할 뿐만 아니라 웹 페이지의 로딩 속도도 느려진다.
• 투명도를 지원한다. 투명한 배경을 이미지에 적용할 수 있고, 투명도 수준도 조절할 수 있다. 그래서 다양한 배경색과 PNG 이미지를 잘 어우러지게 할 수 있고, 텍스트도 쉽게 읽힌다.
• 24비트 및 32비트 색 심도를 모두 지원한다. 즉, 최대 1,670만 개의 색상과 256단계의 투명도를 추가로 표시할 수 있다. 색 농도가 높을수록 이미지를 더욱 정밀하게 렌더링할 수 있어 그래픽 디자인 및 사진 등의 분야에서 전문가용으로 사용하기에 이상적이다.

 

비트맵(BMP) 이미지

• 컴퓨터 그래픽 초창기 시절, 모든 디바이스에서 이미지를 표시하기 위해 설계된 래스터 기반의 파일 포맷
• Windows 에서 이미지를 고품질로 보여주고, 인쇄 가능한 사진을 저장할 수 있도록 설계된, 비압축 형식의 래스터 파일
  • 래스터 형식으로 제공되므로 이미지가 픽셀로 구성된다. 따라서 다양한 색상과 디테일이 포함된 이미지를 저장할 수 있으므로 고품질 2D 디지털 사진에 이상적이다.
• 이미지가 흐려지거나 왜곡되는 것을 방지하기 때문에, 그래픽 어댑터 없이도 다른 디바이스에서 이미지를 볼 수 있게 되었다.
• 데이터를 압축하지 않으므로 고품질 디지털 이미지를 저장하고 보여주는 데 이상적이다. 하지만 압축이 되지 않아 JPEG 파일보다 파일 크기가 크다.
  
• 디바이스에 종속되지 않는다. 품질 저하 없이 다양한 디바이스와 화면에 저장 및 표시할 수 있다.
• 여러 색상 심도, 프로파일 및 알파 채널을 처리하고 데이터 압축도 지원한다.
• 비압축 형식의 대용량 파일이다. JPG, PNG 보다 파일 크기가 훨씬 커서 공유가 쉽지 않다. 또한 웹 사이트에서 사용하거나 여유 공간이 많지 않은 하드 드라이브에 저장하기에는 너무 클 수 있다.

 

WebP

• 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google 이 출시한 파일 포맷
• 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아진다.
• WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로 데이터 손실 없이 또는 중요한 정보를 손실하지 않고 이미지를 압축할 수 있다.
• 무손실 WebP 이미지가 PNG 보다 최대 26%까지 줄어들 수 있다.
• 예측 코딩 기술을 기반으로 이미지 품질을 그대로 유지하면서 사진과 그래픽을 압축한다.
• 이미지 크기가 작을수록 사용자의 광대역 네트워크 연결에 대한 부담이 줄어들고 웹 사이트 탐색 속도가 빨라져 웹 경험이 향상된다.
• 애니메이션 WebP 는 GIF 보다 파일 크기가 훨씬 작고, 더 적은 바이트를 필요로 한다.

---

벡터(Vector) 이미지

• 그리드에 점을 설정하는 수학 공식을 기반으로 만들어진 고해상도 이미지
• 수학 공식을 기반으로 하므로 해상도를 잃지 않으면서도 제한 없는 크기 조정이 가능하기 때문에 래스터 파일보다 특정 유형의 작업에 더 널리 활용할 수 있다.
• 그리드에 점을 설정하는 수학 공식과 선, 곡선을 사용하여 이미지를 만든다. 
• 벡터 이미지 안에는 기본적으로 수많은 수학 방정식을 포함하고 있으며, 각각의 ‘방정식’들은 색상, 스트로크(stroke), 두께 등에 관한 정보를 갖고 있기 때문에 이를 이용해서 특정한 모양을 만들어낼 수 있다.
• 래스터 이미지와는 다르게 벡터 이미지는 해상도에 의존적이지 않다. 벡터 이미지는 줄이거나 늘리더라도, 그 안의 디테일이 사라진다거나 픽셀 현상이 나타나지 않는다.

 

SVG (Scalable Vector Graphics)

• 웹 친화적인 벡터 파일 포맷
• 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다.
• 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합하다.
• XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다.
  • Google 과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으며, 이는 웹 사이트의 검색 순위를 높이는 데 큰 도움이 된다.
• 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합하다. 그러나 픽셀이 부족하므로 고품질 디지털 사진을 표현하기는 어렵다.

---

png jpg 차이, 이미지 파일 형식에 숨겨진 비밀 - wishket

이미지 파일 포맷에 대해 알아보기 | Adobe

JPEG 파일에 대해 더 알아보기 | Adobe

PNG 파일의 정의와 여는 방법 | Adobe

JPEG와 TIFF 파일의 용도 | Adobe

BMP 파일의 정의와 여는 방법 | Adobe

초보자를 위한 벡터 파일 형식 안내 | Adobe

SVG 파일 생성, 편집 및 여는 방법 | Adobe

WebP 파일 정의 | Google의 웹 이미지 포맷 | Adobe

JPEG와 PNG: 주요 차이점 및 최상의 사용법 설명