이미지 → Base64 변환
이미지를 data URI와 순수 base64 문자열로 바꿉니다. HTML img 태그와 CSS 배경 코드도 바로 복사할 수 있고, 큰 파일은 용량 경고를 보여 줍니다.
내 기기 안에서만 처리돼요. 서버로 전송하지 않아요.
관련 도구
SVG 여백 제거
SVG 파일의 빈 여백을 찾아 viewBox를 그림 경계에 딱 맞게 줄입니다. 남길 여백을 고르고 고친 SVG 코드를 복사하거나 저장합니다.
이미지 압축
이미지 용량을 줄입니다. JPG(mozjpeg)·WebP·AVIF 형식과 품질을 선택할 수 있고 절감률을 보여줍니다.
파비콘 만들기 (ICO)
로고 이미지(PNG·JPG·WebP·SVG)로 16·32·48px favicon.ico와 애플 터치 아이콘, 안드로이드 아이콘, site.webmanifest를 한 번에 만들어요. 브라우저 탭 모양을 미리 보고 <head> 코드도 복사할 수 있어요.
자주 묻는 질문
base64로 바꾸면 왜 커지나요?
3바이트를 영문·숫자 4글자로 나타내는 방식이라 약 4/3배, 즉 33% 정도 커져요. 압축 효과는 없어요.
data URI와 순수 base64는 언제 쓰나요?
HTML의 src나 CSS의 url() 안에는 data URI 전체를 넣어요. API나 데이터베이스가 형식을 따로 받는 경우에는 순수 base64만 넣는 경우가 많아요.
base64 문자열을 다시 이미지로 바꿀 수 있나요?
data URI는 브라우저 주소창에 붙여 넣으면 이미지로 보여요. 텍스트 base64를 디코딩하려면 'Base64 인코딩·디코딩'을 쓰세요(텍스트 전용).
이미지가 서버로 올라가나요?
아니요. 브라우저의 FileReader로 기기 안에서만 변환해요.
이미지 → Base64 변환, 어떤 도구인가요?
이미지 파일을 base64 문자열로 바꿔 HTML·CSS·JSON에 바로 넣을 수 있게 합니다. 'data:image/png;base64,…' 형태의 data URI 전체와 앞부분을 뺀 순수 base64를 모두 복사할 수 있고, img 태그와 CSS background-image 코드도 만들어 줍니다. base64는 원본보다 약 33% 커지기 때문에 결과 크기를 함께 보여 주고, 100KB·1MB를 넘으면 그대로 넣었을 때의 문제를 경고합니다. 아이콘이나 작은 로고를 파일 하나에 담거나, API 요청에 이미지를 넣을 때 씁니다.
이럴 때 쓰세요
메일·HTML에 작은 아이콘 넣기
외부 파일 없이 HTML 안에 아이콘을 넣어야 할 때 img 태그를 바로 복사해요.
API 요청에 이미지 담기
JSON 본문에 이미지를 base64로 넣어야 하는 API에 순수 base64를 붙여 넣어요.
CSS 배경 이미지
작은 패턴 이미지를 CSS 파일 안에 넣어 요청 수를 줄여요.
사용 방법
이미지 올리기
변환할 이미지 1개를 올립니다. PNG·JPG·GIF·WebP·SVG 등을 넣을 수 있습니다(최대 20MB).
- 큰 사진은 '이미지 압축'으로 먼저 줄이면 결과가 훨씬 짧아져요.
형식 고르기
data URI 전체, 순수 base64, HTML img 태그, CSS 배경 중 필요한 탭을 고릅니다.
- 순수 base64는 'data:…;base64,' 앞부분을 뺀 문자열이에요.
- 원본 크기와 base64 크기가 함께 표시돼요.
복사하기
'복사' 버튼으로 코드나 문자열을 복사해 붙여 넣습니다.
- 용량 경고가 뜨면 파일로 링크하는 방법도 함께 생각해 보세요.
자주 나는 문제와 해결
- 붙여 넣었더니 이미지가 깨져요
- 문자열이 중간에 잘렸을 가능성이 커요. 일부 편집기·메일은 긴 문자열을 자르니, 크기가 크면 이미지를 압축한 뒤 다시 변환하세요.
- data URI가 application/octet-stream으로 시작해요
- 형식 정보가 없는 파일은 확장자(.svg·.png·.jpg 등)를 보고 이미지 형식을 채워 넣어요. 그래도 그렇게 나오면 파일 확장자가 실제 형식과 맞는지 확인해 주세요.
- 페이지가 느려졌어요
- base64 이미지는 브라우저 캐시를 쓰지 못하고 HTML·CSS 파일을 키워요. 큰 이미지는 파일로 두고 주소로 연결하는 편이 빨라요.