이미지 Base64 변환
이 이미지 Base64 변환기에 그림을 끌어다 놓으면 데이터 URI와 HTML, CSS, JavaScript용 코드 조각을 바로 받을 수 있습니다. 인라인 이미지는 작은 아이콘의 HTTP 요청을 줄여 주며, 단일 파일 HTML, 이메일 템플릿, 오프라인 앱에 꼭 필요합니다.
이미지 파일
이미지를 여기에 끌어다 놓거나 선택하세요
이미지 Base64 변환 온라인 변환 방법
- 이미지 파일을 선택하거나 이미지 URL을 붙여넣으세요.
- 출력 형식을 선택하세요: 데이터 URI,
<img>, CSS 배경, 파비콘, JSON 등. - 이미지를 Base64로 인코딩을 클릭하세요.
- 이미지를 미리 보고 코드를 복사하세요.
더 많은 이미지 Base64 변환 변환기
출력 형식
결과를 어떤 형태로 감쌀지 선택하세요. 변환기는 다음 형식으로 결과를 제공합니다:
- txt: 코드, 데이터베이스 필드, API 요청에 바로 붙여넣을 수 있는 Base64 문자열만.
- uri: 브라우저 주소창에 붙여넣거나 URL을 받는 모든 곳에서 사용할 수 있는 완전한
data:URI. - html img:
src에 데이터 URI가 들어간<img>태그. - css background image:
background-image: url(data:...)를 사용하는 CSS 규칙. - html favicon: 인라인 파비콘용
<link rel="icon">태그. - html hyperlink: 삽입된 파일을 다운로드하거나 여는
<a>링크. - html iframe: 콘텐츠를 인라인으로 렌더링하는
<iframe>. - javascript image:
Image객체를 생성하는 JavaScript. - javascript popup: 콘텐츠를 새 창에서 여는 JavaScript.
- json: 파일 이름, MIME 타입, 데이터를 담은 JSON 객체.
- xml: CDATA 섹션 안에 데이터를 담은 XML 요소.
이미지를 Base64로 인라인해야 하는 경우는 언제인가요?
아이콘, 로고, 플레이스홀더처럼 작은 이미지(대략 5–10 KB 미만)는 인라인으로 넣어 요청 수를 줄이세요. 큰 사진은 인라인하지 마세요. HTML/CSS가 무거워지고, 별도로 캐시할 수 없으며, 렌더링이 지연됩니다. 자세한 내용은 데이터 URI 설명을 참고하세요.
자주 묻는 질문
이미지를 Base64로 변환하려면 어떻게 하나요?
이미지를 선택하고 출력으로 "데이터 URI" 또는 "<img>"를 고른 뒤 "이미지를 Base64로 인코딩"을 클릭하세요. 결과를 HTML이나 CSS에 복사해 넣으세요.
어떤 이미지 형식을 지원하나요?
브라우저가 읽을 수 있는 모든 형식: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF 등.
HTML에서 Base64 이미지를 사용하려면 어떻게 하나요?
데이터 URI를 src 속성에 넣으세요: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
댓글 (0)
“이미지 Base64 변환”에 대한 질문, 아이디어, 버그가 있으신가요? 댓글을 남기거나 도구를 평가하거나 다른 사람에게 답글을 달아 주세요.
아직 댓글이 없습니다. 첫 번째로 의견을 남겨 주세요!