이미지 → Base64
PNG, JPG, WebP, GIF 이미지를 Base64 Data URI, Base64 문자열, HTML img 태그, CSS 배경으로 변환합니다
여기에 이미지 파일을 놓으세요
또는 클릭하여 파일 선택
PNG, JPG, WebP, GIF, SVG를 Base64로 바꾸고 실제로 필요한 형태로 받습니다. 완전한 Data URI, Base64 문자열만, HTML <img> 태그, 또는 CSS 배경 선언 중에서 골라 바로 붙여 넣을 수 있습니다.
작은 그래픽을 코드에 직접 넣으면 네트워크 요청이 하나 줄고 스타일시트가 로드되기 전에도 아이콘이 반드시 나타나므로, 아이콘과 로딩 표시, 이메일 서명에 Data URI가 널리 쓰입니다. 대가는 크기입니다. Base64는 원본 바이너리 파일보다 약 3분의 1 크고 따로 캐시할 수도 없으므로 작은 자산에만 쓰고 큰 이미지는 평소처럼 링크하세요.
이미지를 Base64로 변환하는 방법
이미지를 선택합니다
필요한 출력 형식을 고릅니다
Data URI나 태그, CSS를 복사합니다
자주 묻는 질문
이미지를 링크하지 않고 언제 직접 넣어야 하나요?
대략 10KB 미만의 작고 자주 쓰는 그래픽, 예를 들어 아이콘이나 로고, 로딩 표시처럼 요청 하나를 아끼는 것이 용량 증가보다 중요한 경우입니다. 큰 사진은 파일로 두어야 브라우저가 캐시할 수 있습니다.
Base64 문자열이 원본 파일보다 큰 이유는 무엇인가요?
Base64는 바이트 세 개를 문자 네 개로 인코딩하므로 약 33%가 늘어납니다. 이 부담은 인코딩 방식 자체에 포함된 것입니다.
어떤 형식을 쓸 수 있나요?
PNG, JPG, WebP, GIF, SVG입니다. 벡터 SVG는 Data URI로 넣어도 확대가 자유로우므로 아이콘에 가장 좋은 선택인 경우가 많습니다.
HTML뿐 아니라 CSS에서도 되나요?
네. CSS 형태를 복사해 background-image 선언에 쓰거나 HTML 형태를 img src 속성에 쓰면 됩니다.
이메일 클라이언트에서도 표시되나요?
요즘 클라이언트는 대부분 표시하지만, 일부는 보안을 이유로 Data URI를 제거합니다. 이메일 템플릿이라면 레이아웃이 중요할 때 이미지를 호스팅하고 링크하는 편이 안전합니다.
이미지가 업로드되나요?
아니요. 인코딩은 브라우저 안에서 이루어집니다.
한눈에 보기
| 입력 | 이미지 |
|---|---|
| 여러 파일 | 예 |
| 실행 위치 | 브라우저에서 실행 - 파일은 업로드되지 않습니다 |
| 오프라인에서도 작동 | 예 — 페이지를 불러온 후 |
| 가격 | 무료, 가입 필요 없음, 워터마크 없음 |
변환이 조용히 깨지는 곳
변환 버그는 대부분 문법이 아니라 의미의 문제입니다. 우편번호 CSV 열은 스프레드시트가 숫자라고 추측하는 순간 앞의 0을 잃습니다. 긴 ID는 부동소수점 정밀도를 넘어섭니다. 날짜는 일이 먼저인지 월이 먼저인지에 따라 의미가 달라집니다. JSON 키에는 순서가 없지만 배열에는 있습니다. 키를 정렬하는 도구는 아무것도 바꾸지 않지만 배열을 정렬하는 도구는 데이터를 바꿉니다. Unicode도 함정입니다. 텍스트는 UTF-8이나 UTF-16으로, 또는 BOM과 함께 도착할 수 있고, 잘못 추측한 디코더는 강세 문자가 있는 글자를 깨진 문자로 만듭니다. 어떤 변환이든 믿기 전에 첫 행과 마지막 행, 앞에 0이 붙은 필드, 따옴표나 쉼표, 줄바꿈이 들어 있는 필드를 표본 검사하십시오.
데이터 형식 고르기
JSON은 API가 반환하거나 프로그램이 읽는 데이터의 기본 선택입니다. 중첩 구조, 숫자, 불리언, null을 자연스럽게 다루고 모든 언어가 파싱합니다. CSV는 더 작고 스프레드시트에서 바로 열리지만, 중첩을 표현할 방법이 없고 구분자, 인용, 문자 집합에 관한 공통 표준도 없습니다. 변환이 어긋나는 지점이 바로 여기입니다. XML은 장황하지만 속성, 혼합 콘텐츠, 스키마를 담을 수 있어 문서 형식과 기존 연동에서 여전히 주류입니다. YAML은 설정 파일에 가장 읽기 좋지만 공백에 민감하고 형 변환이 뜻밖의 결과를 냅니다("no"가 false가 되거나 1.10 같은 버전이 1.1이 됩니다). 보기 좋은 형식이 아니라 그것을 사용하는 도구가 선호하는 형식을 고르십시오.