이미지 최적화 가이드

사용 사례에 맞게 형식 선택하기

사진에는 보통 JPEG가 첫 후보입니다. 브라우저 지원이 괜찮고 더 나은 압축이 필요하면 WebP가 좋은 기본값입니다. 투명도나 선명한 UI 내보내기에는 PNG가 여전히 중요하며, Base64 이미지 데이터는 매우 작은 자산이나 제한된 임베딩 상황에서만 적합합니다.

너무 큰 자산의 숨은 비용

파일 크기가 합리적으로 보여도 이미지 치수가 크면 경험을 해칠 수 있습니다. 브라우저는 여전히 모든 픽셀을 디코딩하고 래스터화해야 하기 때문입니다. 팀은 압축은 하면서 리사이즈를 잊거나, 레이아웃보다 훨씬 큰 WebP 파일을 만들곤 합니다. 좋은 최적화는 바이트 수와 렌더링 치수를 모두 확인합니다.

• 표시 영역이 원본보다 훨씬 작다면 압축 전에 먼저 리사이즈합니다.
• 화질은 100% 확대뿐 아니라 실제 레이아웃 크기에서도 비교합니다.
• 큰 이미지는 인라인 Base64를 피하세요. payload 증가가 전송과 캐싱에 부담을 주기 때문입니다.

실무에 쓰기 좋은 최적화 루프

원본 파일에서 시작해 레이아웃이 실제로 필요로 하는 최대 크기로 줄이고, 예상 출력 형식으로 압축한 뒤 시각적 결과와 수치를 함께 비교합니다. 히어로 영역용 자산이라면 모바일 뷰포트도 확인하세요. 문서나 UI 가이드용이라면 압축률보다 가독성을 우선합니다.