개발자 도구이미지 base64 변환

이미지 Base64 변환기사진을 data URL로 인코딩

이미지 파일을 Base64 data URL로 바꿔 CSS·HTML에 바로 넣을 수 있게 하는 온라인 변환기입니다. 파일은 브라우저 안에서만 처리됩니다.

이미지 base64 변환 사용법

이미지 파일을 Base64 data URL 로 바꿉니다. 작은 아이콘을 CSS 나 HTML 에 직접 넣을 때 씁니다.

  1. 이미지를 고릅니다

    파일을 고르거나 끌어다 놓거나, 캡처한 화면을 Ctrl+V(⌘V)로 바로 붙여 넣습니다. 브라우저 안에서 변환하고 서버로 올리지 않으며, 이미지의 가로·세로 크기도 알려줍니다.

  2. 결과를 복사합니다

    data:image/png;base64, 로 시작하는 문자열이 나옵니다.

  3. 코드에 넣습니다

    CSS 의 background-image 나 HTML 의 img src 에 그대로 넣으면 됩니다.

자주 묻는 질문

언제 쓰는 게 좋나요?
아주 작은 아이콘처럼 요청 한 번을 아끼는 게 이득일 때만 씁니다. Base64 는 원본보다 약 33% 커지므로 큰 이미지에는 손해입니다.
SVG 도 Base64 로 넣어야 하나요?
SVG 는 글자라서 꼭 필요한 글자만 퍼센트 인코딩해 넣는 편이 Base64 보다 작습니다. SVG 파일을 올리면 이 방식을 기본으로 쓰고, 두 크기를 함께 보여줍니다.
파일 크기 제한이 있나요?
브라우저가 감당할 만한 크기로 제한을 두었습니다. 큰 이미지는 이미지 크기 변환으로 먼저 줄여 보세요.

개발자 도구 다른 도구