PNG, JPG, WebP
1. 기초 개념
a. 레스터 VS 벡터 → 둘 다 컴퓨터가 이미지를 저장하는 방식
레스터
•
비트맵으로 이미지를 저장
비트맵
•
비트의 배열로 이미지를 점으로 나누고, 그 점에 색상 데이터를 저장
•
데이터를 세밀한 격자 모양으로 나누고 각각의 공간에 0 or 1을 할당
•
흑백 이미지의 경우 한 점이 검은색 or 흰색(0 or 1) 값을
•
컬러는 색상 값을 갖기에 더 많은 데이터를 한 점에 할당 (RGB 각 8비트, 총 24비트)
•
이미지의 크기나 고해상도일수록 파일의 크기가 커짐
•
그렇기에 데이터 처리 분야에서 이미지를 좀 더 쉽게 다루기 위해 압축 기술을 개발해옴
•
반복되는 패턴이나 중복된 데이터들을 축약하는 방식으로 데이터 크기를 줄여왔음
•
그 압축 기술의 결과물이 Jpg나 gif등의 래스터 파일임
벡터
•
이미지를 레스터처럼 잘게 나누지 않고, 하나의 선이나 도형으로 저장하는 방식
•
이미지의 데이터가 갖는 모양을 연속적인 함수로표현, 그 함수를 저장하는 방식
•
레스터보다 크기가 작고, 효율적임
•
연속적인 함수로 표현하기 때문에 확대해도 그림이 깨지지 않음
◦
예를 들어 "점 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비트씩
•
사진 후보정 작업에서 중요함
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 크로마 서브샘플링이라 부름