이미지 Base64 변환기

이미지를 Base64로 변환하는 방법

1. 이미지를 상자에 놓거나, Ctrl+V(Mac은 Cmd+V)로 클립보드에서 붙여넣거나, 파일 선택 창을 쓰세요. 스크린샷은 클립보드에서 바로 넣을 수 있고, 여러 파일도 한 번에 됩니다.
2. 필요하면 먼저 줄이거나 변환하세요. 최대 너비에 픽셀 값을 입력하거나, 변환 형식에서 PNG, JPEG, WebP를 고르거나, 품질을 설정하거나, 메타데이터(EXIF) 제거를 선택합니다.
3. 출력 형식에서 형식을 고르세요. 이 페이지의 기본값은 Data URI입니다.
4. 출력 복사를 누르거나, 결과가 길면 .txt로 저장을 누르세요.

미리보기에는 파일 이름, 크기, MIME 형식, 픽셀 크기가 표시됩니다. 버튼 아래에는 입력 크기, 출력 크기, 오버헤드 비율이 나오므로 무엇을 붙여넣을지 미리 알 수 있습니다.

출력 형식과 쓰이는 곳

Base64 데이터는 모든 형식에서 같고, 그것을 감싸는 형태만 바뀝니다. 아래 예시는 logo.png라는 32×32 PNG를 줄여서 보여 줍니다.

<img> 출력에는 width와 height가 들어 있어 이미지가 디코딩되기 전에 브라우저가 공간을 확보할 수 있습니다. 일부 Markdown 렌더러, 특히 호스팅 플랫폼의 렌더러는 이미지의 data: URL을 제거하므로, Markdown 출력에 의존하기 전에 확인하세요.

인코딩 전에 크기 조절과 변환하기

Base64는 넣은 것의 크기를 3분의 1 늘리므로, 짧은 문자열을 얻는 가장 좋은 방법은 이미지를 작게 만드는 것입니다. 300픽셀 썸네일로 보여 줄 휴대폰 사진에 원래의 4000픽셀은 필요 없습니다. 최대 너비를 고해상도 화면에서 선명하게 보이도록 표시 크기의 두 배인 600으로 설정하면, 어떤 인코딩 요령보다 훨씬 많이 줄어듭니다.

각 옵션이 하는 일은 다음과 같습니다.

• 최대 너비는 축소만 합니다. 더 좁은 이미지는 크기가 그대로이고, 가로세로 비율은 항상 유지됩니다.
• JPEG로 변환하면 JPEG에 알파 채널이 없으므로 투명한 부분이 흰색으로 채워집니다. 투명도와 작은 크기가 모두 필요하면 WebP를 쓰세요.
• 품질은 다른 옵션 때문에 다시 인코딩할 때마다 JPEG와 WebP 출력에 적용됩니다. PNG는 무손실이라 이 값을 무시합니다.
• 메타데이터(EXIF) 제거는 GPS 좌표, 기기 모델, 촬영 시각 같은 카메라 데이터를 지웁니다. 이미지를 다시 그리는 방식이라 JPEG는 선택한 품질로 다시 압축됩니다.
• GIF, BMP, AVIF는 원래 형식 유지로 다시 인코딩하면 PNG로 저장됩니다. 브라우저가 캔버스에서 이 형식들을 만들 수 없기 때문입니다. 움직이는 GIF는 첫 프레임만 남습니다.
• Safari는 WebP를 인코딩할 수 없습니다. 거기서 WebP를 고르면 대신 PNG를 만들었다고 도구가 알려 줍니다.
• SVG 파일은 그대로 인코딩됩니다. 이미 텍스트이고, 벡터를 래스터화하면 의미가 없어지기 때문입니다.

최적화 도구로 이미 압축한 PNG는 다시 인코딩하면 오히려 커질 수 있습니다. 미리보기에 원본 옆에 새 크기가 표시되니 복사하기 전에 비교하세요.

이미지를 인라인할 때와 하지 말아야 할 때

data URI는 HTTP 요청 하나를 줄이고 모든 것을 한 파일에 담습니다. 다음과 같은 경우에 이득입니다.

• 몇 킬로바이트짜리 아이콘, 로고, 작은 UI 그래픽
• 리포트, 오프라인 문서, 내보낸 대시보드 같은 단일 파일 HTML 문서
• 실제 이미지를 불러오는 동안 보여 주는 작은 흐린 자리 표시자
• 별도 파일이 번거로운 테스트 픽스처와 JSON 페이로드

사진과 큰 이미지에는 오히려 손해입니다. 인코딩된 사본은 약 33% 크고, 그것을 담은 HTML이나 CSS와 따로 캐시할 수 없으며, 포함한 페이지마다 다시 내려받습니다. 스타일시트 안의 이미지는 스타일시트를 늦추고, 그만큼 렌더링도 늦어집니다. loading="lazy"도 소용없습니다. 바이트가 이미 문서 안에 있기 때문입니다. 자세한 내용은 Data URI 성능에 있고, 크기 계산기로 결정하기 전에 인코딩 후 크기를 확인할 수 있습니다.

이메일은 특별한 경우입니다. Gmail을 비롯한 여러 웹메일 클라이언트는 data URI 이미지를 아예 표시하지 않으므로, 뉴스레터는 보통 호스팅된 이미지나 CID 첨부를 씁니다. 이메일 속 Base64를 참고하세요.

API와 AI 비전 모델용 이미지

JSON에는 바이너리 형식이 없으므로, 요청 본문으로 이미지를 받는 API는 Base64를 기대합니다. 이미지를 설명하거나, 분류하거나, 이미지 속 텍스트를 읽는 많은 멀티모달 AI 모델도 마찬가지입니다. 이미지를 넣는 방식은 두 가지입니다.

• 문자열 하나에 담긴 전체 data URI: data:image/jpeg;base64,/9j/4AAQ...
• 한 필드에는 Base64만, 다른 필드에는 미디어 형식(image/jpeg).

첫 번째에는 Data URI를, 두 번째에는 일반 Base64를 쓰세요. Base64만 기대하는 API에 data: 접두사를 보내거나 그 반대로 하는 것이 이런 요청이 거부되는 흔한 이유입니다. 이런 서비스는 대개 요청 크기를 제한하고 큰 이미지는 어차피 자기 쪽에서 줄이는 경우가 많으므로, 인코딩 전에 크기를 줄이면 손해 없이 요청을 작게 유지할 수 있습니다.

넣을 수 있는 이미지 형식

HEIC와 TIFF도 인코딩은 잘 되지만, 둘 중 어느 것의 data URI든 Chrome과 Firefox에서는 깨진 이미지로 보입니다. 대신 무엇을 해야 하는지는 HEIC와 TIFF 페이지에서 설명합니다. 더 많은 시그니처는 자주 보는 Base64 접두사를 참고하세요.

코드로 하기

브라우저에서는 FileReader가 data URI를 바로 돌려줍니다.

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

Python에서는 바이트를 읽고 접두사를 직접 붙이세요.

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

큰 파일 스트리밍을 비롯한 다른 방법은 JavaScript의 Base64와 Python의 Base64에 있습니다.

이미지가 표시되지 않을 때

• HTML에서 깨진 이미지가 보입니다. data URI에서는 URL-safe (- _) 를 해제하세요. 브라우저는 data: URL을 표준 알파벳으로만 디코딩하므로, +나 / 자리에 -나 _가 있으면 이미지가 깨집니다.
• HTML에서는 되는데 CSS에서는 안 됩니다. 76자에서 줄 바꿈은 문자열에 줄 바꿈을 넣습니다. HTML 속성은 이를 허용하지만, CSS url("...") 문자열 안의 줄 바꿈은 규칙을 무효로 만듭니다. 이메일 본문이 아니면 줄 바꿈을 꺼 두세요.
• 접두사가 두 번 붙었습니다. data:image/png;base64,data:image/png;base64,로 시작하는 문자열은 자체 접두사를 붙이는 템플릿에 data URI를 붙여넣은 결과입니다. 그런 곳에는 일반 Base64를 쓰세요.
• 디코딩하니 다른 그림이 나오거나 아무것도 안 나옵니다. 첫 문자를 위 표와 비교하세요. 시작 부분이 형식과 맞지 않으면 문자열이 잘렸거나 뒤섞인 것입니다. Base64 이미지 변환이 바이트의 실제 정체를 보여 줍니다.

자주 묻는 질문