# PNG, JPG, WebP

# 1. 기초 개념

### a. 레스터 VS 벡터 → 둘 다 컴퓨터가 이미지를 저장하는 방식

### 레스터

- 비트맵으로 이미지를 저장

> 비트맵

- 비트의 배열로 이미지를 점으로 나누고, 그 점에 색상 데이터를 저장

![Image](https://upload.cafenono.com/image/slashpageHome/20260410/150915_B73G691YvCTKLvUd52?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260410/150915_7jeI8tDvrr7SM3cvca?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260410/150858_MFUx9PGTO5IbUK5LlC?q=80&s=1280x180&t=outside&f=webp)

- 데이터를 세밀한 격자 모양으로 나누고 각각의 공간에 0 or 1을 할당

- 흑백 이미지의 경우 한 점이 검은색 or 흰색(0 or 1) 값을 

-  컬러는 색상 값을 갖기에 더 많은 데이터를 한 점에 할당 (RGB 각 8비트, 총 24비트)

- 이미지의 크기나 고해상도일수록 파일의 크기가 커짐

- 그렇기에 데이터 처리 분야에서 이미지를 좀 더 쉽게 다루기 위해 압축 기술을 개발해옴

- 반복되는 패턴이나 중복된 데이터들을 축약하는 방식으로 데이터 크기를 줄여왔음

- 그 압축 기술의 결과물이 Jpg나 gif등의 래스터 파일임

### 벡터

- 이미지를 레스터처럼 잘게 나누지 않고, 하나의 선이나 도형으로 저장하는 방식

- 이미지의 데이터가 갖는 모양을 연속적인 함수로표현, 그 함수를 저장하는 방식

![Image](https://upload.cafenono.com/image/slashpageHome/20260410/150928_w9NE5AQM0mO2fAtEub?q=80&s=1280x180&t=outside&f=webp)

- 레스터보다 크기가 작고, 효율적임

- 연속적인 함수로 표현하기 때문에 확대해도 그림이 깨지지 않음

    - 예를 들어 "점 A(10,20)에서 점 B(100,200)까지 두께 2px 빨간 선을 그어라", "중심 (50,50), 반지름 30인 파란 원을 채워라" 같은 식

    - SVG나 폰트 파일에서 곡선을 표현하는 핵심 방식

- 실물 사진처럼 색상 데이터의 구성이 복잡하면 함수로 표현하는 것이 까다로워 지고 처리시간이 길어지게 됨

### b. 손실 압축 VS 무손실 압축

> 데이터 압축이란?

- 한정된 저장 공간을 효율적으로 사용하고, 데이터 전송 속돌르 높이기 위해 쓰이는 기술

### 손실

- 데이터 일부를 제거하여 압축률을 높이는 방식

- 완벽복원 불가

- 사람이 인지하기 어려운 차이를 이용하여 효과적으로 용량을 줄임

- 이미지, 비디오, 오디오 압축 등

- JPEG 압축 , MP3 압축, MPEG 비디오 압축 등이 있음

장점

- 높은 압축률

- 파일 크기 크게 줄임

단점

- 원본 복원 불가능

- 품질이 낮아지게 되면 시각적/청각적 아티팩트(오류)가 발생

    - JPEG의 경우 8*8 픽셀 블록 단위로 압축, 압축률을 높이면 블록 경계가 눈에 보이는 블로킹 현상이 생기고, 색상 주변에 번짐이 나타남

### 무손실

- 원본 데이터 손상 X

- 파일 크기를 줄이면서도 데이터의 정확성이 중요한 경우 사용

- 텍스트파일, 실행 파일, 금융 데이터, 소스 코드 등

장점

- 데이터 손실X → 원본 복원

단점

- 압축률 제한적

- 효율 문제

### c. bit depth(비트 심도)

- 이미지에서 컬러나 톤의 범위를 결정

- 비트 심도가 높을 수록 표현할 수 있는 컬러와 톤은 넓어짐

- 비트심도도 2의 제곱형태로 증가

- 당연히 색이 풍부할 수록 파일 크기도 커짐

1비트

- 픽셀 당 0,1, 흑백

8비트

- 픽셀당 256가지 색상, GIF가 대표적

- 사진을 담아 내기엔 부족한 수치, gif가 저화질처럼 보이는 이유

24비트

- RGB 각 채널 8비트씩, 약 1667만색

- 사람 눈이 구분할 수 있는 색상을 거의 다 커버

- JPEG, PNG-24가 해당

- 트루컬러라 불림 → 여기서부터 사람눈에 자연스럽기 때문

32비트

- 24비트 + 8비트(알파채널)

- 투명도까지 추가

- PNG-32, WebP추가 

48비트

- RGB 각 채널 16비트씩 

- 사진 후보정 작업에서 중요함 

![Image](https://upload.cafenono.com/image/slashpageHome/20260410/151015_f6l1JPRcoV2oCr7Krx?q=80&s=1280x180&t=outside&f=webp)

### d. 알파 채널

- 각 픽셀의 투명도를 정의

- 보통 8비트 0 ~ 255까지의 범위인데 0이면 완전 투명, 255면 완전 불투명

포맷별 지원 여부

- 지원 0 → PNG, WebP, AVIF, GIF

- 지원 X → JPEG

# 2. JPEG

### 특징

- 손실압축

- 알파 채널 미지원

- 24비트 RGB(트루컬러 약 1677만 개의 색)

### JPEG 압축 작동 원리 (자세히는XX 너무 어려움;;)

1. 색 공간 변환(RGB → YCbCr)

- RGB밝기를 밝기(Y)와 색차 (CbCr)로 분리한 뒤, 색차 정보를 줄임 → 다운샘플링 or 크로마 서브샘플링이라 부름

For the site tree, see the [root Markdown](https://slashpage.com/madein.md).