이미지를 Base64로 바꿔 HTML·CSS에 바로 넣는 방법
2026-11-08
이미지를 Base64 문자열(Data URI)로 바꾸고, HTML img 태그와 CSS 배경 코드로 만드는 방법을 설명합니다. 용량이 늘어나는 점과 알맞은 이미지 크기도 알려 드립니다.
Base64와 Data URI는 무엇인가
Base64는 이미지의 데이터를 글자로 바꾼 문자열입니다. Data URI는 data:image/png;base64,… 형태로 앞에 형식을 붙인 것이라, 이미지 주소처럼 바로 쓸 수 있습니다.
변환 순서 (이미지 → Base64)
1. 이미지 Base64 도구에서 "이미지 → Base64"를 고르고 이미지를 올립니다. 한 번에 한 장이고, 20MB까지입니다.
2. 네 가지 결과가 나옵니다: "Data URI (주소창·src에 바로)", "Base64 본문만", "HTML <img> 태그", "CSS 배경 이미지".
3. 쓰려는 곳에 맞는 항목의 "복사"를 누릅니다. 화면에는 앞부분만 보이지만 복사하면 전체가 복사됩니다.
되돌리기 (Base64 → 이미지)
Data URI나 Base64 문자열을 "Base64 문자열 또는 Data URI 붙여넣기" 칸에 넣으면 이미지로 복원해 미리 보여 줍니다. 줄바꿈과 공백은 무시합니다. 앞부분의 바이트로 JPG, PNG, GIF, WebP, AVIF, BMP 중 어떤 이미지인지 판별하고, 맞는 확장자로 저장할 수 있습니다.
언제 쓰면 좋은가
작은 아이콘이나 로고를 HTML·CSS에 바로 넣을 때 좋습니다. 파일 요청을 줄이고 싶을 때도 쓰입니다.
주의할 점
- Base64는 원본 파일보다 약 33% 커집니다.
- Base64로 넣은 이미지는 브라우저가 따로 캐시하지 못하고, HTML이나 CSS 파일이 그만큼 커집니다. 100KB가 넘는 이미지나 여러 곳에서 쓰는 이미지는 일반 파일로 두는 편이 낫습니다.
- 이 도구는 이미지를 줄여 주지 않습니다. 더 작게 하려면 먼저 이미지 용량 줄이기 도구로 압축하세요.
- 20MB가 넘는 파일은 변환하지 않습니다.