Base64 이미지 인코더
이미지를 Base64 데이터 URI로 인코딩·디코딩
모든 처리는 브라우저에서 이루어집니다. 데이터는 기기를 벗어나지 않습니다.
관련 도구
사용 방법
목적에 따라 인코딩 또는 디코딩 모드를 선택하세요. 인코딩은 이미지를 Base64 문자열로, 디코딩은 Base64 문자열을 이미지로 변환합니다.
인코딩 또는 디코딩 모드 선택
인코딩을 선택하면 이미지 파일을 데이터 URI로 변환하고, 디코딩을 선택하면 데이터 URI를 이미지로 복원합니다.
입력값 제공
인코딩 모드에서는 이미지 파일을 업로드하면 FileReader API로 즉시 데이터 URI가 생성됩니다. 디코딩 모드에서는 data:image/로 시작하는 전체 데이터 URI를 붙여넣으세요.
결과 복사 또는 이미지 다운로드
인코딩 모드에서는 생성된 데이터 URI를 복사하여 HTML img src나 CSS background-image에 붙여넣으세요. 디코딩 모드에서는 다운로드를 클릭하여 이미지 파일을 저장하세요.
예시
CSS에 아이콘 삽입하여 네트워크 요청 제거
32×32 PNG 아이콘을 Base64로 인코딩하고 CSS background-image 값으로 붙여넣으면 별도의 HTTP 요청 없이 스타일시트와 함께 즉시 로드됩니다.
소스 코드에서 데이터 URI로 이미지 복원
레거시 HTML 파일에 있는 데이터 URI를 디코딩 모드에 붙여넣으면 이미지를 미리보고 PNG·JPEG 파일로 다운로드할 수 있습니다.
도구 소개
이미지를 Base64 데이터 URI로 변환하여 HTML·CSS·JavaScript에 직접 삽입하거나, 기존 데이터 URI를 이미지로 되돌릴 수 있습니다. 인코딩 모드에서는 이미지 파일을 선택하면 img src나 CSS background-image에 붙여넣을 수 있는 데이터 URI 문자열이 생성됩니다. 디코딩 모드에서는 데이터 URI를 붙여넣으면 이미지를 미리보고 다운로드할 수 있습니다. FileReader API를 사용하며 서버에 업로드되지 않습니다.