주요 이미지 형식 이해하기

JPEG (Joint Photographic Experts Group)

사진과 복잡한 색상의 이미지에 최적입니다. 손실 압축으로 작은 파일 크기를 구현하지만 높은 압축률에서는 품질이 저하됩니다. 투명도를 지원하지 않습니다.

용도: 사진, 풍경, 그라데이션 이미지 장점: 작은 파일 크기, 광범위한 지원 단점: 투명도 미지원, 편집 시 품질 저하

PNG (Portable Network Graphics)

투명도를 지원하는 무손실 압축 형식입니다. 일러스트, 로고, 스크린샷에 이상적이지만 사진에서는 파일 크기가 큽니다.

용도: 로고, 아이콘, 스크린샷, 투명도가 필요한 이미지 장점: 고품질, 투명도 지원, 무손실 단점: 큰 파일 크기

WebP

구글의 차세대 형식. JPEG보다 25-35% 작은 크기로 동일한 품질. 투명도와 애니메이션 지원.

용도: 웹사이트 이미지, 모바일 이미지 장점: 높은 압축률, 투명도, 애니메이션 단점: 일부 브라우저 미지원

HEIC/HEIF (High Efficiency Image Format)

애플의 효율적인 형식. JPEG의 절반 크기로 동등하거나 더 나은 품질.

용도: iPhone/iPad 사진, 고품질 저장 장점: 높은 압축률, 고품질, 풍부한 메타데이터 단점: Windows/Android 호환성 낮음

이미지 형식으로 웹 성능 극대화

1. WebP 우선 선택

최신 브라우저는 WebP를 지원하여 품질을 유지하면서 파일 크기를 크게 줄입니다. Core Web Vitals를 직접 개선합니다.

2. 대체 전략

<picture> 태그를 사용하여 WebP를 지원하지 않는 브라우저용 JPEG/PNG 대체를 제공합니다.

3. 용도별 형식 권장사항

• 사진/배경: WebP → JPEG
• 로고/아이콘: SVG → WebP → PNG
• 스크린샷: WebP → PNG
• 애니메이션: WebP → GIF