웹에서의 이미지 기술: 압축, 포맷, 최적화

웹에서 이미지 최적화의 기술적 기반(압축 방식, 포맷별 특성, 로딩 전략)을 다룬다. JPEG/PNG/WebP/AVIF 포맷의 차이부터 크로마 서브샘플링, next/image를 활용한 자동 최적화까지 폭넓게 설명한다.

핵심 포인트

손실(lossy) 압축은 파일 크기를 크게 줄이지만 아티팩트가 생기고, 무손실(lossless)은 원본을 보존하지만 크기가 크다.
크로마 서브샘플링은 인간 시각이 색상보다 밝기 변화에 민감한 특성을 이용해 색상 채널을 줄이는 기법이다. 4:4:4, 4:2:2, 4:1:1 표기로 색상 채널 축소 정도를 나타낸다.
AVIF가 JPEG보다 훨씬 높은 압축률을 제공하며, WebP는 손실/무손실, 투명도, 애니메이션을 모두 지원하는 범용 포맷이다.
next/image가 AVIF, WebP, 원본 포맷으로 자동 폴백하고, sizes prop으로 뷰포트별 반응형 이미지를 자동 서빙한다.
Exif 메타데이터는 카메라 설정과 위치 정보를 포함해 파일 크기를 키우고 프라이버시 위험을 유발하므로 웹 서빙 전 제거를 권장한다.

상세 정리

압축 방식: 손실(lossy)은 JPEG처럼 비가역적 데이터 제거로 파일 크기를 줄인다. 무손실(lossless)은 PNG처럼 압축 후 완벽 복원이 가능하다.
해상도와 픽셀 밀도: Retina 같은 고밀도 디스플레이는 더 높은 해상도 이미지가 필요하다. 파일 크기와 화질 사이의 균형이 중요하다.
비트 깊이: 8비트는 256색, 16비트는 65,536색을 지원한다. 비트 깊이가 높을수록 색상이 풍부하지만 파일이 크다.
크로마 서브샘플링: 색상 채널(Cb, Cr)의 해상도를 낮춘다. 4:4:4는 색상 정보를 완전 보존, 4:2:2는 절반, 4:1:1은 1/4로 줄인다. 파일 크기 절감에 효과적이다.
베이스라인 vs 프로그레시브 로딩: 베이스라인은 위에서 아래로 순차 로드, 프로그레시브는 낮은 화질로 전체를 먼저 표시 후 점진적으로 선명해진다.
JPEG: YCbCr 색공간 기반 손실 압축. 사진과 복잡한 이미지에 최적, 투명도 미지원.
PNG: 무손실 압축, 알파 채널(투명도) 지원. 로고, 아이콘, 날카로운 경계선이 필요한 그래픽에 적합.
WebP: 손실/무손실 모두 지원, 투명도와 애니메이션 가능. 브라우저 호환성이 높아 범용으로 사용 가능.
AVIF: AV1 기반. JPEG 대비 훨씬 높은 압축률, 투명도 지원. 고품질 이미지를 작은 크기로 제공할 때 최적.
next/image 자동 최적화: formats에 image/avif와 image/webp를 설정하면 지원 브라우저에 AVIF를 서빙하고 미지원 시 WebP로 폴백한다. sizes prop으로 반응형 이미지를 자동 제공한다.

왜 읽나- 웹 이미지 포맷 선택과 최적화 전략의 기술적 근거를 이해하고 싶은 프론트엔드 개발자에게, 각 포맷의 특성부터 next/image 설정까지 체계적인 레퍼런스를 제공한다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

웹에서의 이미지 기술: 압축, 포맷, 최적화

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기