[CS] 이미지

 

 

 

이전에 잭님이 다뤄주신 부분이지만, 휴님께서 CS 정리 할 때 한번 더 이미지와 관련된 부분을 정리해주셔서 수업 키워드 내용을 기반으로 개인적으로 정리를 하기로 했다. 오늘 정리할 내용은 이미지에 대한 내용으로, 비트맵과 벡터, JPG - PNG - GIF 에 대한 내용을 개인 복기용으로 (정말) 간단하게 다룰 예정이다.

 

 

 

 

 

 

 

📌 비트맵 vs 벡터

 

- 비트맵(Bitmap)이란?

 

📖  서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식으로, 일정 이상 사이즈를 늘리면 픽셀이 깨져버린다.

 

우리가 흔히 아는 JPG, JPEG, PNG, GIF가 비트맵 표현방식 기반으로 이미지를 표현하는 종류의 예시. 그 특징은 아래와 같다.

 

종류	특징	투명도 지원	용량
JPG	손실 압축 RGB (세 가지 컬러에 대한 처리)	X	적음
PNG	무손실 압축 RGBA (알파값에 대한 처리도 해야하므로, JPG보다 용량이 더 크다)	O	큼
GIF	8비트 색상 파일로써 0 ~ 255, 즉 256 컬러를 사용 (이미지베이스 애니메이션)	O	적음

 

 

 

 

✔︎ 압축

 

아리송한 부분인 압축 용어에 대해 정리하고 넘어가기로 했다.

 

- 압축

: 데이터 크기를 줄여서 저장공간을 효율적으로 잘 활용하기 위한 기술.

 

- 손실 압축

: 주로 멀티 데이터를 압축할 때 일어나며, 특성상 압축하는 과정에서 원본 데이터가 손상된다. 

 

- 무손실 압축 (Lossless compression)

: 압축을 하더라도 원본 데이터가 손상되지 않는다.

 

 

 

 

✔️ JPG vs PNG

 

: PNG는 투명도, 즉 알파값을 처리할 수 있다. JPG는 투명처리가 불가하다. 또한, 일정부분 손상이 나도 육안상 차이가 나지 않기 때문에 풍경과 같은 배경 이미지는 JPG가 더 적합하며, 텍스트 기반 (북스캔, 문서)나 도형 표시 등은 무손실 압축의 PNG가 손상도가 낮아 활자에 대한 가독성이 올라가기 떄문에 PNG를 사용하는 게 더 적합하다.

 

 

 

 

- 벡터(Vector)란?

 

📖 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식으로, 일정 사이즈 이상 확대하더라도 화질이 깨지는 게 없다.

 

 

 

 

 

 

📌 이미지 용량을 줄이는 방법

 

✔️ 리사이징을 하는 것이 권장된다.

 

- 이미지에 대한 다운샘플링을 한다 → 이미지에 대한 압축을 의미함.

 

: 하는 이유는 이미지를 디코딩할 때, CPU의 사용률이 증가하는데 메모리 관점에서 효율적이지 못하기 때문에 이미지 데이터를 받을 때는 리사이징이 필요하다. 예를 들어, 사이즈가 큰 이미지를 받아올 때 CPU가 과부화 되면 메모리 부족으로 앱이 터질 수도 있어서 이걸 사전에 방지하고자! 리사이징을 한다.

 

 

 

 

 

 

---