이미지와 Base64를 브라우저에서 양방향 변환

Image to Base64는 언제 사용하는가

작은 아이콘이나 플레이스홀더를 HTML, CSS, JSON 설정 파일에 직접 포함해야 할 때 Base64 Data URL이 유용합니다. 별도 이미지 요청이 없어 배포 단위가 단순해지지만, 인코딩 결과는 원본 바이너리보다 대략 33% 커지므로 큰 사진을 통째로 포함하는 방식은 권장하지 않습니다.

이 도구는 PNG, JPEG, GIF, WebP, SVG 파일을 읽어 `data:image/png;base64,...` 형식과 헤더가 없는 순수 Base64를 모두 제공합니다. 결과를 복사해 API 테스트 데이터나 이메일 템플릿, CSS의 `background-image` 값에 사용할 수 있습니다.

Base64 to Image 복원 방식

Data URL을 붙여 넣으면 포함된 MIME 타입을 사용하고, 순수 Base64라면 PNG, JPEG, GIF, WebP, SVG의 파일 시그니처를 확인해 형식을 자동 감지합니다. 자동 감지가 어려운 문자열은 MIME 타입을 직접 선택해 복원할 수 있습니다.

미리보기가 정상이라도 파일 확장자만 바꿔 저장하면 실제 형식이 변환되는 것은 아닙니다. 이 페이지는 원본 바이트를 그대로 복원하며 이미지 리사이즈, 압축률 변경, PNG와 JPEG 간 포맷 변환은 수행하지 않습니다.

지원 형식과 제한 사항

• 지원 형식: PNG, JPEG/JPG, GIF, WebP, SVG
• 최대 파일 및 디코딩 결과 크기: 10MB
• Data URL과 줄바꿈이 포함된 순수 Base64 입력 지원
• MIME 타입과 실제 이미지 시그니처가 다르면 오류 표시
• 모든 처리는 현재 브라우저 탭 안에서만 실행

보안과 성능 메모

민감한 스크린샷이나 내부 이미지를 온라인 변환기에 올릴 때는 전송 여부를 확인해야 합니다. JSON2Class의 이 페이지는 FileReader와 브라우저 Blob API만 사용하므로 선택한 파일과 Base64 내용이 변환을 위해 서버로 전송되지 않습니다.

Base64는 네트워크 전송량을 줄이는 압축 형식이 아닙니다. 큰 이미지는 일반 파일로 제공하고 HTTP 캐시와 최신 이미지 포맷을 활용하는 편이 좋습니다. Data URL은 작은 로고, 테스트 fixture, 짧은 이메일 리소스처럼 요청 하나를 줄이는 이점이 더 큰 경우에 사용하세요.

함께 쓰기 좋은 도구

같은 워크플로에서 바로 이어 쓸 수 있는 JSON2Class 도구를 연결해 두었습니다.