JPEG, PNG, WebP, AVIF: 적절한 이미지 포맷 선택

이미지를 내보내. 옵션이 JPEG, PNG, WebP, GIF, AVIF, SVG 등이야.

모두 이미지를 만들어. 서로 바꿔 쓸 수는 없어.

JPEG: 사진 표준

최적: 사진, 그라데이션 있는 복잡한 이미지, 많은 색상이 있는 모든 것.

피해: 텍스트, 로고, 스크린샷, 날카로운 가장자리가 있는 모든 것.

JPEG는 손실 압축을 써. 사진에서 아마 눈치 못 챌 데이터를 버려. 하지만 날카로운 가장자리에선 고전해—텍스트가 흐릿하고, 로고에 아티팩트가 생겨.

품질 설정이 중요해. 80-85%가 보통 스위트 스팟이야. 60% 아래면 압축 아티팩트가 명백해져.

PNG: 날카로운 가장자리와 투명도

최적: 스크린샷, 로고, 텍스트 있는 그래픽, 투명도가 필요한 이미지.

피해: 큰 사진 (파일이 거대해져).

PNG는 무손실 압축을 써. 모든 픽셀이 정확히 보존돼. 날카로운 가장자리엔 좋지만 복잡한 이미지에선 파일 크기가 끔찍해.

PNG-8 (256색) vs PNG-24 (수백만 색). 가능하면 8을 써.

WebP: 현대의 절충안

최적: 웹의 거의 모든 것.

피해: 구형 브라우저와 최대 호환성이 필요할 때.

WebP는 손실과 무손실 압축 둘 다 하고, 종종 같은 품질에서 JPEG나 PNG보다 25-35% 작아.

브라우저 지원이 이제 훌륭해. 고대 브라우저를 위해 JPEG/PNG 폴백과 함께 WebP 써.

AVIF: 최신이고 제일 작아

최적: 좋은 품질로 최대 압축.

피해: 브라우저 지원 요구사항, 인코딩 속도 우려.

AVIF는 WebP보다 더 나은 압축을 달성해. 하지만 인코딩이 더 느리고 브라우저 지원이 아직 성장 중이야.

포맷을 미리 생성할 수 있으면 (정적 사이트), 폴백과 함께 AVIF 써.

GIF: 움직이는 이미지, 제한된 색상

최적: 단순한 애니메이션, 아주 단순한 그래픽.

피해: 사진 (256색 제한), 큰 애니메이션 (거대한 파일).

GIF의 애니메이션 지원이 살아있게 해. 하지만 최대 256색은 사진이 끔찍해 보인다는 뜻이야.

애니메이션은 MP4나 WebM 비디오가 종종 더 작고 품질이 나아.

SVG: 벡터 그래픽

최적: 아이콘, 로고, 일러스트레이션, 스케일되어야 하는 모든 것.

피해: 사진, 복잡한 이미지.

SVG는 비트맵 포맷이 아니야. 도형을 설명하는 XML이야. 품질 손실 없이 어떤 크기든 스케일.

아이콘이랑 로고는 SVG가 거의 항상 올바른 선택이야.

빠른 결정 가이드

| 콘텐츠 타입 | 포맷 | |-------------|--------| | 웹용 사진 | WebP (JPEG 폴백) | | 스크린샷 | PNG | | 로고/아이콘 | SVG | | 단순 애니메이션 | GIF 또는 animated WebP | | 복잡한 애니메이션 | MP4/WebM 비디오 | | 최대 품질 아카이브 | PNG |

흔한 실수

모든 사진에 PNG. 10MB PNG가 눈에 보이는 차이 없이 500KB JPEG가 될 수 있어.

스크린샷에 JPEG. 텍스트가 흐려져. PNG 써.

2026년에 WebP 안 쓰기. 브라우저 지원이 훌륭해. 써.

JPEG를 반복 저장. 저장할 때마다 압축 아티팩트가 추가돼. 소스 파일을 유지하고 한 번만 내보내.

---

포맷 선택은 이미지별이야. 사진은 JPEG/WebP. 그래픽은 PNG/SVG. 트레이드오프를 이해하고 그에 따라 골라.