Base64 이미지 변환기

Base64 이미지 변환기란?

Base64 이미지 변환기는 Base64 문자열과 이미지 파일을 서로 오가며 확인할 수 있는 온라인 도구입니다. 이미 Data URI로 준비된 문자열을 미리보기로 검토하거나, 순수 Base64만 있는 데이터도 가능한 범위에서 이미지 형식을 감지해 다시 파일로 저장할 수 있도록 구성했습니다.

반대로 PNG, JPG, GIF, WebP, SVG 같은 이미지를 올리면 Base64 문자열을 즉시 만들어 복사할 수 있어 웹 개발, 이메일 템플릿, JSON 전송, 인라인 에셋 확인 작업을 더 빠르게 이어갈 수 있습니다. 모든 처리는 브라우저 안에서만 이루어져 민감한 시안이나 내부 이미지도 비교적 부담 없이 확인할 수 있습니다.

• Data URI와 순수 Base64를 빠르게 검토해야 하는 개발자와 디자이너
• 웹/앱에 넣을 인라인 이미지를 준비하거나 디코딩해야 하는 작업 흐름
• 이미지 파일을 코드 문자열로 보관·전달하기 전에 결과를 확인하고 싶은 상황

이런 상황에서 활용하기 좋습니다

API 응답에서 받은 Base64 이미지가 실제로 어떤 그림인지 확인해야 하거나, CSS와 HTML에 바로 붙여 넣을 Data URI를 만들어야 할 때 이 도구가 특히 유용합니다. 이메일 템플릿, 작은 아이콘 인라인 처리, 테스트용 이미지 payload 확인처럼 코드와 이미지를 오가야 하는 흐름에서 빠르게 쓸 수 있습니다.

문자열 자체의 길이나 용량이 부담되는지 먼저 보고 싶다면 같은 개발 흐름에서 UTF-8/UTF-16 바이트 계산기를 함께 확인해 볼 수 있습니다. 일반 텍스트 Base64 변환이 필요하면 Base64 변환기를 이어서 사용하면 문자열 처리 흐름을 더 넓게 점검할 수 있습니다.

• 웹 개발 – img src, CSS background-image, 이메일 템플릿용 Data URI를 만들 때
• API 점검 – JSON 응답 안의 Base64 이미지가 올바른지 미리보기로 확인할 때
• 파일 복원 – 저장된 Base64 문자열을 다시 이미지 파일로 꺼내야 할 때
• 공유 전 검토 – 접두사를 포함할지, 순수 Base64만 전달할지 빠르게 비교할 때

주요 기능

이 도구는 단순히 문자열만 보여 주는 변환기가 아니라, 실제로 사용할 때 필요한 판단 정보까지 함께 확인할 수 있도록 설계했습니다. 디코드 모드에서는 형식 감지와 미리보기, 다운로드를 한 흐름으로 묶었고, 인코드 모드에서는 파일 정보와 출력 모드를 함께 정리해 복사 실수를 줄이는 데 집중했습니다.

• 양방향 변환 – Base64 → 이미지, 이미지 → Base64 흐름을 한 페이지에서 오갈 수 있습니다.
• 형식 자동 감지 – 순수 Base64 문자열에서도 PNG, JPG, GIF, WebP, SVG, BMP, ICO 형식을 우선 감지합니다.
• 미리보기와 다운로드 – 디코드 결과를 이미지로 확인하고 감지한 형식 기준으로 바로 저장할 수 있습니다.
• 접두사 토글 – 인코드 결과를 Data URI 포함/제외 모드로 전환해 필요한 형식만 복사할 수 있습니다.
• 로컬 처리 – 붙여넣은 문자열과 업로드한 파일은 브라우저 안에서만 처리됩니다.

사용 방법

사용 흐름은 간단합니다. 확인하려는 문자열이 있으면 디코드 모드에 붙여넣고 이미지를 확인하면 되고, 파일을 코드 문자열로 바꾸고 싶다면 인코드 모드에서 이미지를 올린 뒤 접두사 포함 여부를 정해 복사하면 됩니다. 두 모드 모두 입력 직후 필요한 판단 정보를 카드로 같이 보여 주기 때문에 중간 확인 단계가 줄어듭니다.

Base64 → 이미지

1. 상단에서 Base64 → 이미지 모드를 선택합니다.
2. Data URI 전체 문자열 또는 순수 Base64 문자열을 입력란에 붙여넣습니다.
3. 이미지로 확인을 누르면 형식을 감지하고 미리보기를 표시합니다.
4. 해상도·형식·이미지 크기를 확인한 뒤 이미지 다운로드로 저장합니다.

이미지 → Base64

1. 상단에서 이미지 → Base64 모드를 선택합니다.
2. 이미지 파일을 드래그하거나 클릭해 업로드합니다.
3. 기본 출력은 Data URI 포함 상태로 준비되며, 필요하면 접두사 포함 옵션을 끕니다.
4. Base64 복사 버튼으로 원하는 결과를 클립보드에 복사합니다.

상세 설명

Base64는 바이너리 데이터를 텍스트로 바꾸기 때문에 이미지 파일을 코드 문자열처럼 다룰 수 있다는 장점이 있습니다. 다만 원본보다 문자열 길이가 늘어나고, 접두사 포함 여부에 따라 바로 사용할 수 있는 위치가 달라지므로 단순 변환뿐 아니라 출력 형태를 함께 점검하는 것이 중요합니다.

특히 순수 Base64만 전달받은 경우에는 원본 형식 정보가 빠져 있을 수 있습니다. 이 도구는 대표 이미지 서명을 우선 확인해 형식을 추정하지만, 감지할 수 없는 특수 케이스라면 Data URI 접두사를 포함해 다시 확인하는 것이 가장 안전합니다. 접두사를 포함한 Data URI는 HTML/CSS에 바로 쓰기 좋고, 접두사를 제외한 순수 Base64는 API payload나 데이터 저장에 더 많이 활용됩니다.

• Data URI 필요 상황 – img src, CSS background-image, 이메일 템플릿 등
• 순수 Base64 필요 상황 – JSON 저장, API 요청, DB 보관용 텍스트 필드
• 용량 주의 – Base64는 원본보다 대략 33% 정도 문자열 길이가 늘어날 수 있습니다.
• 형식 판단 – 접두사가 있으면 가장 정확하고, 없으면 이미지 서명 감지 결과를 먼저 확인하면 됩니다.

자주 묻는 질문