Base64 이미지 변환
base64-image• 이미지를 Base64(Data URL)로 인코딩하거나 Base64를 이미지로 디코딩해요. • 브라우저에서 처리돼 서버로 업로드되지 않아요. HTML·CSS 삽입 형식도 지원.
모든 변환은 브라우저에서 처리돼요. 이미지는 서버로 전송되지 않아요.
이미지 Base64는 언제 쓰나요
이미지를 Base64 문자열로 바꾸면 파일이 아니라 텍스트가 돼요. 그래서 HTML·CSS·JSON 안에 이미지를 그대로 넣을 수 있어요. data:image/png;base64,… 로 시작하는 그 값이에요.
작은 아이콘이나 로고를 data URI로 넣으면 이미지 요청이 한 번 줄어 로딩이 빨라져요. 이메일 서명, 마크다운 문서, 이미지 호스팅 없이 결과를 공유해야 할 때도 유용해요.
다만 용량이 약 33% 늘고 브라우저가 따로 캐시하지 못해서 큰 사진에는 맞지 않아요. 수십 KB 이하의 작은 이미지에 쓰는 걸 권해요. 변환은 브라우저에서만 이뤄지고 이미지는 서버로 올라가지 않아요.
자주 묻는 질문
이미지를 base64로 바꾸면 용량이 얼마나 커지나요
3바이트가 4글자가 되니 대략 3분의 1이 늘어요. 100KB 사진이라면 문자열은 약 137KB가 돼요. 이 도구는 변환 뒤 원본 크기와 Base64 크기를 나란히 보여주니 실제로 얼마나 불었는지 바로 확인할 수 있어요.
data URL 형식은 어떻게 생겼나요
data: 뒤에 image/png 같은 형식 표시, 세미콜론과 base64, 쉼표, 그리고 실제 데이터가 이어져요. 이 도구는 이 값을 Data URL 그대로, 순수 Base64만, img 태그, CSS background-image 네 가지 형태로 뽑아줘요.
base64 이미지가 화면에 안 보여요
앞머리의 data:image/png;base64, 부분이 빠졌거나 문자열이 중간에 잘린 경우가 대부분이에요. 붙여넣은 값이 순수 Base64면 이 도구가 시작 글자로 형식을 추측해요. PNG는 iVBORw0KG, JPG는 /9j/ 로 시작해요.
몇 MB짜리 이미지까지 변환되나요
이미지 파일만 받고 한 장에 5MB까지 처리해요. 다만 제한과 별개로 큰 사진은 애초에 Base64에 맞지 않아요. 아이콘이나 로고처럼 수십 KB 수준일 때 이점이 있고, 그보다 크면 파일로 두는 편이 나아요.
인라인 이미지는 캐시가 안 된다는 게 무슨 뜻인가요
이미지가 별도 파일이 아니라 HTML이나 CSS 안의 글자가 되니 브라우저가 이미지만 따로 저장해 두지 못해요. 그래서 페이지를 열 때마다 함께 내려받고, 이미지를 하나 바꾸면 그 문서 전체를 새로 받아야 해요.
base64 문자열을 다시 이미지 파일로 저장하려면
디코딩으로 바꾸고 Base64나 Data URL을 붙여넣으면 미리보기가 뜨고 저장 버튼이 나와요. 확장자는 판별한 형식에 맞춰 정해지며 jpeg는 jpg, svg+xml은 svg로 붙어요. 이 과정도 모두 브라우저 안에서 끝나요.