이미지 데이터 URI의 자리
HTML/CSS에 이미지를 외부 파일 없이 직접 임베딩할 때 데이터 URI 사용. 작은 아이콘·로고에 자주. 단계별 점검표로 정리.
STEP 1: 이미지 크기 점검
- 10KB 이하 → 데이터 URI 적합
- 50KB 이상 → 외부 URL 권장
- 큰 이미지는 페이지 로딩 부담
STEP 2: 이미지 형식 결정
- 아이콘 → SVG·PNG
- 사진 → JPG
- 투명 배경 → PNG
STEP 3: Base64 변환
이미지 파일을 Base64 문자열로 변환. Base64 인코더의 이미지 업로드 옵션 활용.
STEP 4: MIME 타입 추가
data:image/png;base64,XXXXX 형태로 조립. MIME 타입 정확:
- PNG → image/png
- JPG → image/jpeg
- SVG → image/svg+xml
- GIF → image/gif
- WebP → image/webp
STEP 5: HTML/CSS 적용
- HTML <img src="data:..." />
- CSS background: url('data:...');
STEP 6: 결과 미리보기
브라우저에서 이미지가 정상 표시되는지 확인. 표시 안 되면 MIME·Base64 데이터 점검.
STEP 7: 페이지 로딩 시간 확인
데이터 URI는 페이지 크기에 직접 포함. 너무 많이 쓰면 로딩 부담. 외부 URL과 균형.
점검 체크리스트
- 이미지 크기 적정
- 이미지 형식 결정
- Base64 변환 정확
- MIME 타입 일치
- HTML/CSS 적용 정상
- 로딩 시간 균형
Base64 디코더로 임베딩 결과 검증.
마무리
이미지 데이터 URI는 작은 자원에 효과적. 점검 흐름 한 번 자리 잡으면 매 작업이 부드럽다.