이미지 ↔ Base64는 이미지 파일과 텍스트 인코딩을 서로 바꿉니다. 인코딩 방향에서는 이미지를 고르면 네 가지 출력을 한꺼번에 보여줍니다. 완전한 Data URL(data:image/png;base64,…, src나 url()에 바로 사용), 접두사를 뺀 순수 Base64, background-image: url('…'); CSS 조각, <img src=… alt=파일이름 /> HTML 조각입니다. 각각 복사 버튼이 따로 있고 카드 제목에 인코딩 후 크기와 증가율이 표시됩니다. 디코딩 방향에서는 Data URL이나 순수 Base64를 붙여넣으면 파일 헤더로 PNG / JPEG / GIF / WebP / BMP / SVG를 판별해 미리보기하고 다운로드합니다. 처리는 브라우저에서 로컬로 이루어집니다.

일반 'Base64 변환'과의 차이: 여기는 이미지를 다루며 MIME 접두사를 붙여 주고 바로 붙여넣을 수 있는 CSS / HTML을 만들며, 텍스트를 다시 볼 수 있는 이미지로 되돌립니다.

1. 01방향 선택위쪽에서 '이미지 → Base64' 또는 'Base64 → 이미지'를 전환합니다.
2. 02인코딩이미지를 한 장 이상 추가하고 파일 목록에서 '보기'를 눌러 전환합니다. '인코딩 결과'의 네 텍스트 상자는 1,500자를 넘으면 앞부분만 보여주고 전체 길이를 적어 주며, 복사 버튼은 전체 내용을 가져갑니다.
3. 03디코딩'Base64 붙여넣기' 상자에 data:image/...;base64,로 시작하는 문자열이나 순수 Base64를 붙여넣고(공백과 줄바꿈은 지워집니다) '디코딩 미리보기'를 누릅니다.
4. 04저장디코딩에 성공하면 MIME과 크기를 보여주고, '이미지 다운로드'를 누르면 base64-이미지.png 같은 확장자 파일을 받습니다.

Base64는 원본 파일의 약 1.33배가 됩니다

접두사가 없으면 파일 헤더로 형식을 판단합니다

12 KB PNG 아이콘

Data URL 약 16 KB(+33%), CSS 조각 `background-image: url('data:image/png;base64,iVBOR…');`

`iVBORw0KGgo`로 시작하는 순수 Base64 붙여넣기

image/png로 판별되어 미리보기가 뜨고 `.png`로 다운로드

절반만 잘린 문자열 붙여넣기

'디코딩 실패: 올바른 Base64 내용이 아닙니다. 내용이 완전한지 확인하세요'

지원 입력

JPG / PNG / WebP / GIF / BMP / AVIF / HEIC / SVG. HEIC는 먼저 JPEG로 바꾼 뒤 인코딩하므로 원본 HEIC 바이트가 아닙니다

큰 파일

3 MB를 넘으면 문자열이 아주 길어진다고 알려 줍니다. 브라우저 텍스트 상자는 수십 MB 문자열에서 눈에 띄게 버벅입니다

판별 범위

디코딩할 때 PNG, JPEG, GIF, WebP, BMP, SVG를 알아보고 다른 형식은 모두 PNG로 처리합니다

SVG

data:image/svg+xml;base64,…로 인코딩하며 URL 인코딩 형태의 인라인은 지원하지 않습니다

하지 않는 일

압축하거나 형식을 바꾸지 않고('이미지 압축', '이미지 형식 변환' 사용), 이미지가 아닌 파일의 Base64도 다루지 않습니다('Base64 변환' 사용)

인코딩과 디코딩 모두 브라우저에서 FileReader와 atob로 로컬 처리하며 이미지와 Base64 텍스트는 어떤 서버로도 업로드되지 않습니다.