이미지 포맷 분석하기

👋 들어가기 전

 

부스트 캠프가 끝나고 1주일 동안 생각보다 큰 무기력함이 많이와서 3,4일 동안은 정말 좀비처럼 지냈다..

 

이제는 슬슬 루틴을 생각 찾아야 된다고 생각해서 CS 공부쪽 주제로 가볍게 시작하려고한다.

 

여러 채용공고를 살펴보며 좋은 CS 주제를 살펴보고 있는데 이미지쪽 얘기가 많이보여
이번 시간은 이미지에 대한 공부를 해보려한다. 

 

이미지는 앱을 만들 때 그냥 디자이너가 준 것을 쓰기만 했지 각 포맷의 차이점, 등장한 이유를
깊게 살펴보지 않은 것 같다.

 

이번 시간에는 png, jpeg의 특징과 등장한 이유를 살펴보자.

---

📷 이미지 종류

파일 포맷에 들어가기 전 먼저 이미지의 종류부터 알아보자.

 

이번에 공부하면서 알게된건데 이미지에도 종류가 있더라.. ❓❓❓
얼마나 그냥 썼는지 진짜 반성하게 된다.

 

여기서 말하는 종류는 단순히 포맷을 말하는 것이 아니다!

1. Raster 이미지

레스터 이미지는 아래와 사진과 같이 픽셀이라는 단위를 그리드 형태로 나열된 데이터로
가장 기본적으로 사용되는 형태이다. 다른 말로는 Bitmap 그래픽이라고도 한다.

 

레스터 이미지는 다음과 같은 특징을 갖고 있다.

 

1. 해상도에 따라 다르다

 

사이즈가 고정되어 있어 이미지 크기가 변할 경우 픽셀의 크기도 변해 픽셀이 쪼개지거나 이미지가 흐려진다.

2. 포맷에 따라 손실과 무손실로 나뉜다.

손실(Lossy)이미지는 무손실 파일보다 훨씬 용량이 작아 다운로드 속도가 중요한 온라인에서 주로 사용한다.

 

무손실(Lossless)이미지는 원본 파일에 있는 모든 데이터를 포함하고 있다.

파일이 압축되어 있는 경우에도 무손실 이미지는 원래 상태로 재구성할 수 있다. 

3. 컴퓨터에 부담을 적게 준다.

웹에서 이미지를 표시할 때 대부분 레스터 이미지를 사용하는 이유이다.

4. 종류

JPG / JPEG , GIF, PNG, RAW, PSD 

 

2. Vector 이미지

점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식으로 백터 이미지안에는 기본적으로 수 많은
수학 방정식 을 포함하고 있으며 각 방정식은 생상, stroke, 두께등의 정보를 만들어 낼 수 있다.

 

특징은 다음과 같다.

1. 해상도에  의존적이지 않다.

수식으로 계산되기 때문에 손실이 일어나거나 픽셀이 깨지는 현상이 일어나지 않는다.

2. 컴퓨터에 많은 부담을 준다.

복잡한 그림을 수식으로 표현하기 위해 컴퓨터에 많은 부담을 준다.

그렇기 때문에 로고나 아이콘 같이 특정 이미지쪽으로만 많이 쓰인다.

3. 종류

PDF, EPS, AI, EPS, SVG

---

1. JPG / JPEG

JPEG는 Joint Photographic Experts Group의 약자로 이미지 압축 표준을 개발한 ISO 소위원회의
이름에서 파생되었다.

 

그렇다면 JPG와 JPEG는 다른 점은 무엇일까 ??

정답은 사실상 동일한 파일 형식이다. 이름이 달라진 이유는 과거 Windows 운영체제의 확장자 길이가
최대 3글자 였기 때문에 JPEG -> JPG로 표시 된 것이다.

 

현재 Windows 운영체제의 확장자 길이가 늘어났기때문에 JPEG로 다시 통일되는 추세이다.

 

특징은 다음과 같다.

• 무손실 Raster 이미지 포맷
• 온라인에서 가장 널리 사용되는 포맷으로 사진 , 배너 광고 등의 커다란 이미지에서 일반적으로 사용됨
• 다양한 압축 알고리즘을 통해 용량을 최적화할 수 있다.

압축 알고리즘을 한번 간단하게 정리해보자.

 

👀 눈의 허점을 이용하라.

 

사람의 눈은 밝기를 잘 구분하고 색깔에는 예민하지 않다.

그렇기 때문에 우리는 RGB보다는 YCbCR 방식을 이용하면 압축을 진행할 수 있다.

Y는 밝기 Cb는 초록색에 파란색이 얼마나 섞였는가, Cr은 초록색에 빨간색이 얼마나 섞여있는가를 나타낸다.

 

이후 밝기인 Y는 유지한채 Cb와 Cr을 줄여서 압축을 진행한다.

왼쪽에 있는 색깔을 오른쪽과 같이 평균값등의 값으로 퉁치면 표현하는 색깔이 1 / 4로 줄어든다.

 

이 과정을 우리는 다운샘플링(downsampling) 또는 크로마 서브 샘플링(chroma subsampling)이라한다.

 

위 과정을 진행하면 훌륭하게 압축이 진행되지만 한계가 분명히 존재한다.

만족하는 퀄리티를 위해 색깔을 뭉개는데는 한계가 존재하기 때문이다.

⠿ 패턴을 이용하라 (DCT)

많이 사용하는 64개의 패턴을 이용하여 픽셀에 존재하는 패턴을 만드는 과정이다.

어떻게 이게 가능할까 ?? 대부분의 이미지의 경우 인접한 픽셀은 거의 비슷한 색상으로 형되어 있기 때문에

특정 패턴이 형성된다. 

 

따라서 평균값과 비슷한 성분은 좌측 상단에 몰리게되고 평균값과 차이가 많이 나는 성분은 오른쪽 아래로 모이게 된다.

 

여기서 평균값과 비슷한 값들을 저주파, 차이가 많이 나는 값들을 고주파라고 칭한다.

 

실제 예시는 다음과 같다.

 

이렇게 패턴을 사용하게 된다면 무슨 장점이 있을까 ?? 

 

패턴이 있다는 건 단순 나열을 곱셈으로 퉁칠 수 있다는 뜻이다.

 

즉 각 픽셀의 데이터를 색깔이 아닌 시용된 패턴의 개수로 퉁 칠 수 있다는 뜻이다.

🗑️  많이 안쓰는 거는 과감히 버려라 (Quantization)

DCT 과정을 통해 우리는 패턴의 개수까지 알게되었다.

 

 

위 사진은 실제 자주쓰는 quantization table이다. 보면 왼쪽위는 작은 값들이 오른쪽 아래로는 큰 값들이 있다.

 

여기서 높은 숫자는 자주쓰는 값 높은 값을 갖고 자주 쓰지 않은 값은 낮은 값을 갖고 있다.

 

그럼 여기서 자주쓰는 값을 작은 값을 나누고, 자주쓰지 않는 값을 높은 숫자로 나눠버리면 어떻게 될까?

 

자주 사용하지 않는 애들은 대부분 0이된다.

 

이렇게 0이 많아지게 되면 0은 그냥 0 x n 의 형식으로 압축이 될 수 있다.

 

21 3 3 8 ... 0 0 0 0 0 0 = 21 3 3 8 0 x(6)

---

2. PNG

png는 Portable Network Graphics의 약자로 PNG 역시 무손실 Raster 이미지 포맷이다.

 

png의 특징은 다음과 같다.

• 무손실 Raster 이미지 포맷
• 투명도 성질을 갖고 있다
• 색상의 심도가(depth)가 깊어 더 많은 색상을 표현할 수 있다.
• 고퀄리티의 투명한 웹 그래픽일 경우 대부분 PNG를 사용한다.
• jpeg에 비해 용량이 크다.

---

😀 소감 및 마무리

번아웃을 깨기위해 간단한 주제로 시작했는데 어느새 이미지 압축 알고리즘에서 정말 깊게 공부가 됐다.

 

🍎 갓 코딩 애플님의 영상을 항상 재밌게 보고 있는데 블로그 포스팅에 정리한 것은 처음이다.

 

블로그 글을 정리하면서 라디오처럼 영상을 틀어놨는데 진짜 개념이 쏙쏙 박히는 힘이 있다.

 

앞으로도 많으 CS 지식을 갓 코딩 애플님 영상과 함께 해야겠다.

---

출처

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