이미지 형식 이해하기
이미지는 웹 트래픽의 대부분을 차지하며 잘못된 형식을 선택하면 사이트가 느려지고 화질이 저하될 수 있습니다. 가장 흔한 이미지 형식을 살펴보겠습니다.
1. JPEG (Joint Photographic Experts Group)
JPEG는 사진에 가장 널리 호환되는 형식입니다. 파일 크기를 줄이기 위해 손실 압축을 사용합니다. 투명도나 애니메이션은 지원하지 않습니다.
2. PNG (Portable Network Graphics)
PNG는 무손실 형식입니다. 투명도(알파 채널)를 완전히 지원하므로 로고, 그래픽 및 스크린샷에 적합합니다.
3. WebP (Google Web Picture)
WebP는 웹을 위해 설계된 차세대 형식입니다. 손실 및 무손실 압축, 투명도, 애니메이션을 모두 지원하며 JPEG/PNG보다 25-35% 더 작습니다.
4. SVG (Scalable Vector Graphics)
SVG는 픽셀 대신 수학적 경로를 사용하는 벡터 형식입니다. 품질 손실 없이 무한으로 확대할 수 있어 로고와 아이콘에 이상적입니다.
5. GIF (Graphics Interchange Format)
GIF는 256색으로 제한된 간단한 애니메이션용 형식입니다. 현대 웹 애니메이션에는 WebP나 동영상을 권장합니다.
비교 표
| 형식 | 유형 | 압축 | 투명도 | 애니메이션 | 가장 좋은 용도 |
|---|---|---|---|---|---|
| JPEG | 래스터 | 손실 | ❌ 아니요 | ❌ 아니요 | 사진 및 복잡한 이미지 |
| PNG | 래스터 | 무손실 | ✅ 예 | ❌ 아니요 | 로고, 텍스트, 투명 그래픽 |
| WebP | 래스터 | 모두 | ✅ 예 | ✅ 예 | 모든 용도의 현대 웹 리소스 |
| SVG | 벡터 | 무손실 | ✅ 예 | ✅ 예 | 아이콘, 로고, 벡터 드로잉 |
| GIF | 래스터 | 무손실 | ✅ 예 (1비트) | ✅ 예 | 간단한 애니메이션 밈 |