이미지 URL 생성
이미지를 문자열로 바꿔 HTML·CSS에 바로 넣습니다. 늘어나는 용량도 함께 보여 드립니다.
이미지 URL 생성
이미지 고르기
작은 아이콘에 알맞습니다 (20KB 이하 권장)
이미지를 끌어다 놓으세요
PNG·JPG·WebP·SVG·GIF
사용법
- 이미지를 넣으면 data URL이 만들어집니다.
- 붙여넣을 곳에 맞춰 HTML·CSS·마크다운 형태를 고릅니다.
- 복사해 그대로 붙여 넣습니다. 이미지 파일을 따로 올릴 필요가 없습니다.
- 20KB가 넘으면 파일로 두는 편이 낫습니다.
언제 쓰고 언제 쓰지 말아야 하나
쓸 만한 경우. 메일 서명이나 이메일 HTML처럼 이미지를 따로 올릴 수 없는 곳, 파일 하나로 끝내야 하는 문서, 아주 작은 아이콘 몇 개. 요청 횟수가 줄어드는 이점이 손해보다 큽니다.
쓰면 안 되는 경우. 여러 페이지에서 함께 쓰는 이미지입니다. data URL은 따로 저장되지 않아 페이지를 열 때마다 매번 다시 내려받습니다. 파일로 두면 브라우저가 한 번만 받고 재사용합니다.
용량은 늘어납니다. Base64는 3바이트를 4글자로 바꾸므로 약 33% 커집니다. "문자열로 넣으면 가벼워진다"는 말은 사실이 아닙니다. 화면의 숫자로 직접 확인하세요.
SVG는 그대로 넣는 편이 낫습니다. 원래 글자로 된 형식이라 Base64로 바꾸면 괜히 커집니다. HTML에 SVG 태그를 직접 넣으면 CSS로 색도 바꿀 수 있습니다.
자주 묻는 질문
- Base64로 바꾸면 용량이 줄어드나요?
- 반대로 늘어납니다. 3바이트를 4글자로 바꾸는 방식이라 약 33% 커집니다. 이 도구는 늘어난 양을 숫자로 보여 줍니다. 용량을 줄이려면 이미지 리사이즈나 포맷 변환을 쓰세요.
- 그럼 왜 쓰나요?
- 파일을 따로 올릴 수 없는 곳에 이미지를 넣기 위해서입니다. 메일 서명, 이메일 HTML, 이미지 업로드가 안 되는 게시판, 파일 하나로 끝내야 하는 문서 같은 경우입니다. 아주 작은 아이콘을 넣어 요청 횟수를 줄이는 용도로도 쓰입니다.
- 큰 이미지를 넣어도 되나요?
- 권하지 않습니다. data URL은 따로 저장(캐시)되지 않아 그 파일을 받을 때마다 이미지도 매번 다시 내려받습니다. 또 문자열이 수 MB가 되면 편집기가 느려집니다. 20KB 이하의 작은 아이콘 정도가 알맞고, 그보다 크면 이 도구가 화면에서 알려 드립니다.
- 이미지가 서버로 올라가나요?
- 올라가지 않습니다. 변환은 브라우저 안에서만 이뤄집니다. 다만 만들어진 문자열을 어딘가에 붙여 넣는 순간 그곳으로 이미지가 통째로 들어간다는 점은 기억하세요.
- SVG도 되나요?
- 됩니다. 다만 SVG는 글자로 된 형식이라 Base64로 바꾸지 않고 그대로 넣는 편이 더 작습니다. CSS에 넣을 때는 따옴표와 특수문자 처리만 신경 쓰면 됩니다.
이 도구는 브라우저 안에서만 계산하며 입력값을 서버로 보내지 않습니다. 분류: 변환 · 마지막 수정 2026-09-08