활용 사례사용 예시

Base64 이미지는 어떻게 쓰나요

가장 흔한 사용 시나리오와 그대로 복사해 쓸 수 있는 예시를 제공합니다. 변환 결과로 예시를 치환해 빠르게 검증해 보세요

두 가지 형태를 얻습니다: Data URL(mime 접두사 포함)과 원본 Base64(접두사 없음)

Data URL(권장)

data:image/png;base64,QUJDZA==

원본 Base64

QUJDZA==

웹에서 바로 표시(HTML)

빠른 미리보기, 정적 페이지 임베딩, 별도 리소스 호스팅이 필요 없는 경우에 적합합니다

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

배경 이미지로 사용(CSS)

아이콘/플레이스홀더/소형 장식 이미지에 적합하며 요청 1회를 줄일 수 있습니다

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

API / JSON 전송

디버깅/프로토타입/임시 전송에 적합합니다. 운영 환경에서 큰 이미지를 장기간 인라인으로 사용하는 것은 권장하지 않습니다

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

백엔드가 원본 Base64만 필요하다면 QUJDZA==만 전달하고 mime/type은 별도로 전달하세요.

모바일 / 크로스플랫폼 사용(예시)

Base64를 지원하는 런타임이라면 어디서든 사용할 수 있습니다. 흔한 작성 예시를 제공하니 치환해 검증해 보세요

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

언제 Base64를 권장하지 않나요?

Base64는 ‘데이터 전달과 빠른 배포’에 적합하며, 완전한 정적 리소스 체계를 대체하기엔 부적합할 수 있습니다