이미지 Base64 변환
Image to Base64 / Data URI
이미지를 Base64 문자열이나 CSS·HTML·JSON에 바로 붙일 수 있는 data URI로 인코딩합니다.
이미지를 data URI로 인라인하면 요청은 하나 줄지만 용량이 3분의 1 늘고, 그것이 페이지를 볼 때마다 영원히 반복됩니다. data URI는 그것을 담은 문서와 따로 캐시될 수 없기 때문입니다. 이 도구는 파일을 인코딩하고, 붙여넣기 전에 그 거래의 양쪽을 모두 보여 줍니다.
이미지를 놓으세요
이 탭에서 인코딩합니다. Base64는 압축이 아니라 파일을 3분의 1만큼 키웁니다.
사용 방법
이미지를 놓습니다
형식은 확장자가 아니라 바이트가 정합니다. 실제로는 JPEG인 .png 파일이 흔하고, 형식이 틀린 인라인 이미지는 표시되지 않습니다.
판정을 읽습니다
4KB 안쪽이면 인라인은 사실상 공짜이고, 100KB를 넘어가면 병렬로 받아 캐시될 수 있었던 자원 때문에 첫 화면이 늦어집니다.
감쌀 형식을 고릅니다
CSS는 url() 형태로, HTML은 img 태그로, JSON은 따옴표로 감싼 문자열로 줍니다. 손으로 조립하지 않고 그대로 붙여 넣으면 됩니다.
자주 묻는 질문
Base64는 이미지를 압축하나요?
반대입니다. 3바이트를 4글자로 표현하므로 전송 압축 이전 기준으로 파일보다 정확히 33⅓% 깁니다. 압축이 아니라 인코딩입니다.
SVG도 이렇게 인라인해야 하나요?
아닙니다. SVG는 이미 텍스트라서 URL 인코딩하면 33%가 아니라 10% 안팎이 들고 읽고 비교할 수도 있습니다. SVG에 Base64를 쓰는 것은 흔한 실수이고, 이 페이지는 그런 파일을 보면 짚어 줍니다.
8MB가 넘는 파일은 왜 거절하나요?
data URI가 한 줄짜리 10MB 넘는 텍스트가 되기 때문입니다. 그 크기가 되면 대부분의 편집기와 여러 브라우저의 개발자 도구가 못 쓸 상태가 됩니다. 애초에 8MB짜리 인라인 이미지가 맞는 답이었던 적도 없습니다.
이 도구로 이어지는 것
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
더미 이미지 생성
Placeholder Image
원하는 크기의 단색·그라디언트 더미 이미지를 만들고 크기를 이미지 위에 표시합니다.
Base64 이미지 복원
Base64 to Image
Base64 문자열이나 data URI를 다시 볼 수 있고 내려받을 수 있는 이미지로 되돌립니다.
Base64 인코딩·디코딩
Base64 Encoder & Decoder
텍스트와 파일을 Base64·Base64URL로 인코딩·디코딩하며 UTF-8을 올바르게 처리합니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
Base64 인코딩·디코딩
Base64 Encoder & Decoder
텍스트와 파일을 Base64·Base64URL로 인코딩·디코딩하며 UTF-8을 올바르게 처리합니다.
Base64 이미지 복원
Base64 to Image
Base64 문자열이나 data URI를 다시 볼 수 있고 내려받을 수 있는 이미지로 되돌립니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
SVG CSS 데이터 URI 변환
SVG to CSS Data URI
SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.