[궁금한건 못참아] 다양한 이미지 포맷.. 보이지 않는 너머에 대해

대학시절 미디어 커뮤니케이션학을 전공하면서 

카메라의 발명은 예술작품의 `아우라`의 소멸을 만들어 냈다는 내용을 공부한 적이있다.

카메라만 있으면 누구나 원하는 자신의 얼굴 또는 지인의 얼굴 그리고 배경사진까지 하나의 예술작품으로 간직할 수 있는 시대가 만들어 진것이다.

 

최근 디지털로 넘어오면서 이러한 `아우라`는 완전히 사라진 것 처럼 보인다

물론 NFT 같이 디지털에서 `아우라`를 소생시키려는 시도들은 있지만 

이제 누구나 원한다면 인터넷 상에서 자신이 원하는 예술작품, 사진, 그림 등을

Ctrl + C 와 Ctrl + V 만으로 소유할 수 있는 시대가 되었다.

 

그러나 우리는 이러한 행위에서 무심결에 넘어가는 부분이 있다.

바로 이미지 파일 포맷이다

`JPG, PNG, ...` 등 다양한 방식의 이미지 파일이 존재한다

 

이러한 차이점은 이미지를 표현 및 저장을 위해서 `이미지를 압축`하는 방법의 차이에서 기인한다.

우리가 무심결에 그냥 넘기는 부분이지만 

 

오늘은 `이미지 압축`에 대한 보이지 않는 부분을 살펴보려고 한다

---

참고한 link

이미지 압축방식 이해하기(bmp, jpeg, jpg, png, svg) - dydtjr1128's Blog

 

JPEG vs. PNG | Adobe

---

1. 오늘의 글을 이해하기 위한 사전 지식

1.1 Lossy compression vs. Lossless compression

압축을 하는 방법에는 크게 손실 압축 (Lossy compression)과 무손실 압축(Lossless compression)이 존재한다

 

손실 압축 방법의 경우 특정 부분을 제거하는 등의 방법으로 용량을 줄여 속도와 효율성 측면을 잡는 방법이고

무손실 압축 방법의 경우 큰 제거없이 이미지 원본을 유지해 파일의 질을 유지하는 것에 집중한 방법이다

 

손실 압축 방법의 대표적인 예로는 JPEG가 있으며

무손실 압축 방법의 대표적인 예로는 PNG가 있다

 

물론 위 포맷 내용은 뒤에서 자세히 살펴볼 것이다

---

1.2 Indexed color vs. Direct color

Indexed color의 경우 Color Map이라는 곳에 제한된 수의 색상 (256색상)을 가진 palette로만 저장할 수 있는 속성이다.

이는 이미지 용량을 효율적으로 만들어 줄 수 있다

하지만 표현할 수 있는 색의 수가 제한적이기 떄문에 표현에는 한계가 존재할 수 밖에 없다

 

반면 Direct color의 경우 픽셀마다 색 정보를 갖고 있는 방법으로 다양한 색을 표현할 수 있지만 상대적으로 많은 용량이 필요하다 

 

비유하자면 Indexed color는 화가가 그림을 그릴때 많이 사용할 색상을 미리 팔레트에 짜두고 이들만을 활용해 그림을 그리는 것이고 Direct color는 그때 그때 필요한 컬러를 가져와 그림을 그리는 방식 정도로 이해할 수 있다.

 

1.3  투명도

디지털 사진에서 투명도는 이미지 또는 이미지 레이어의 투명영역을 지원하는 기능이다.

일부 이미지 형식은 투명도를 지원하지 않는다 (JPEG)

---

2. 다양한 이미지 파일 포맷

이번장에서는 다양한 이미지 파일 포맷들을 살펴보고 해당 포맷들이 어떠한 방식으로 저장 및 표현되는지 정리해보도록 하겠다

 

2.1 BMP(BitMap) 

BMP방식은 아주아주아주 x 1000 오래된, 고전느낌의 방식이다.

이는 비트맵 디지털 그림을 저장하는데 사용되는 포맷으로

말 그대로 Bit들의 Map을 저장하는 방식이다.

 

이 방법은 압축을 전혀 하지 않기 때문에

용량이 매우매우매우 크게 만들어진다.

 

위 방법은 indexed color, Direct color 두 속성 모두를 갖고 있다

 

기본적으로 1~24비트의 색을 표현할 수 있다

이때, 1비트는 2가지 색이며 24비트는 16777216가지 색이다

 

해당 방법의 장단 점을 정리하면 아래와 같다

 

장점 : 따로 디코딩이 필요가 없어 속도가 빠름

단점 : 용량이 너무 큼

---

2.2 JPG, JPEG(Joint Photographic Experts Group)

해당 방법은 일반 사용자들도 많이 들어본 파일 포맷일 것이다

참고로, JPG, JPEG는 같은 의미이다

DOS에서 확장자를 4자리 이상 지정할 수 없기 때문에 JPG로 줄였다나 뭐래나..

또한 다양한 확장자들로 표현되기도 하는데 이들은 모두 JPEG에 해당한다

.jpg, .jpeg, .jpe, .jif, .jfif, .jfi ...

 

 

이 방법은 대표적은 손실 압축 방법이다

따라서 파일의 용량이 적어 웹에서 많이 사용된다

하지만 JPG는 RGB 색상 공간 [24비트 색상을 지원한다 - R,G,B -> 8비트 씩]을 사용하기 때문에 투명도를 사용할 수 없다는 단점이 있다

 

JPEG는 사람 눈으로 볼 수 없는 시각적 데이터를 제거하고 색상 변형을 평균화하는 개념을 활용한다

이는 사람이 섬세한 색 구분을 하는 능력이 떨어진다는 것을 활용한다

출처 : 코딩애플

실제 위 사진에서 알 수 있듯이 값은 다르지만 사람이 볼때 같은 색으로 느껴진다

 

JPEG 압축 알고리즘을 직관적으로 설명하자면 Deep learning의 Pooling과 비슷한 방법으로 진행된다

 

이미지에서 밝기 정보를 빼고 색상정보만을 가져와서 (RGB -> YCbCr로 변환 하여 Y: 밝기 정보 빼)

그룹화 한다음 인접한 픽셀을 대표값으로 변환시켜 압축하는 것이다

따라서 이미지를 저장할때 4개의 색상을 저장할때 1개의 숫자만 사용할 수 있기 때문에 용량이 줄어들 것이다

 

하지만 이러한 방법또한 용량을 줄이는데 한계는 존재한다

따라서 DCT를 활용해서 더 줄일 수 있다

 

DCT 및 JPEG압축 자세한 과정 : 

[디지털이미지] JPEG 압축 이해하기

 

하지만 이러한 과정때문에 JPEG를 연속적으로 수행하다 보면 `디지털 풍화` 같은 문제가 발생할 수 있다

그리고 PNG와 비교했을때 투명도가 지원되지 않는 것은 텍스트와 같은 이미지를 활용하기에는 좋지 않다

 

---

2.3 PNG (Portable Network Graphics)

PNG는 대표적인 무손실 압축방법이다

이는 디테일에 손실이 전혀없고 고품질 이미지를 생성하지만 파일의 크기는 커진다

 

PNG는 PNG-8, PNG-24, PNG-32 등으로 나눌 수 있는데

이때 PNG-8은 (2^8지원) 256개의 칸을 가진 색 팔레트를 이용하면 256색까지만 표현이 가능하다

반면 PNG-24 -> 2^24 -> 16,777,216색을 지원한다

 

따라서 같은 PNG라도 아래처럼 차이가 발생한다

확대해서 보길

---

2.4 SVG (Scalable Vector Graphics)

해당 포맷은 포토샵에서 벡터 이미지를 활용할때 가장 자주 마주치는 포맷이다

 

이는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로W3C에서 1999년데 개발된 표준 벡터 그래픽 파일 형식이다쉽게 말하자면 픽셀 단위로 구성된 것이 아니라 수학 공식을 통해서 그리드 위의 점과 선을 기반으로 만들어진다

실제 .svg 파일을 메모장으로 열었을때 내용, 아래 이미지 파일이다

 

SVG는 XML 텍스트 파일로 정의가 되어 웹에 매우 친화적이며

검색, 목록, 스크립트가 가능하며 압축도 가능하다

 

매우 큰 특징은 Vector 파일 포맷은 실제로 픽셀 대신에 라인과 곡선들로 이루어져 있기 때문에이미지를 확대 및 축소 하더라도 깨짐이 발생하지 않는다따라서 모든 스크린에서 선명한 이미지를 보여주기 위해서는 매우 적절한 포맷이다따라서 로고 같은 이미지 파일에 많이 활용된다

 

하지만 단점도 존재한다모양이 복잡해질 수록 벡터 계산이 많이 필요하다따라서 로드 시간이 조금 오래 걸릴 수 있다