← 기능 섹션으로 돌아가기
Free

이미지 ↔ Base64

이미지 ↔ Base64 도구는 이미지 파일(PNG, JPG, SVG, WebP, GIF)을 Base64로 인코딩된 데이터 URI로 변환하거나 그 반대로 변환합니다. 이미지를 드래그, 붙여넣기 또는 클릭하여 로드하고 CSS, HTML 또는 설정에 인라인으로 포함할 수 있는 'data:image/...;base64,...' 전체 문자열을 복사하세요. 또는 데이터 URI를 붙여넣어 해당 이미지를 미리보고 파일로 다운로드할 수 있습니다.

Base64로 인코딩된 이미지는 CSS, HTML 또는 설정 파일에 직접 포함될 수 있습니다. 이는 작은 아이콘, 이메일 템플릿 또는 외부 이미지 요청을 지양해야 하는 빌드 산출물 등에 유용합니다. 이 도구는 변환 과정을 매우 간편하게 해줍니다. 이미지 파일을 드래그하거나 클립보드에서 붙여넣거나 클릭하여 찾아보세요. 도구는 이를 올바른 MIME 타입(data:image/png;base64,..., data:image/svg+xml;base64,... 등)을 가진 데이터 URI로 변환합니다. 반대 방향도 작동합니다. 데이터 URI를 붙여넣으면 도구가 이미지를 렌더링하여 미리보기를 제공하고 실제 파일로 저장할 수 있는 다운로드 링크를 제공합니다. 모든 작업은 브라우저 내부에서 이루어지며 업로드 과정이 없어 이미지가 기기를 벗어나지 않습니다. PNG, JPG/JPEG, SVG, WebP, GIF 및 ICO 형식을 지원합니다.

라이브 미리보기
example.com
Image ↔ Base64 이미지 → Base64 Base64 → 이미지
이미지를 드롭하세요
드롭, 붙여넣기 또는 클릭
PNG, JPG, SVG, WebP
logo.png
8.4 KB · 256×256
Base64 데이터 URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNrs0rERwCAIhFEwjv9/6OS...
복사 다운로드
주요 기능

드래그, 붙여넣기 또는 찾아보기

이미지를 로드하는 다양한 방법: OS에서 파일을 드래그하거나, 클립보드에서 붙여넣거나(스크린샷 가능), 클릭하여 파일 선택기를 엽니다.

실시간 이미지 미리보기

데이터 URI를 붙여넣는 즉시 이미지가 렌더링되어 복사하거나 다운로드하기 전에 내용을 확인할 수 있습니다.

원클릭 데이터 URI 복사

CSS, HTML의 src 속성 또는 JSON 설정에 바로 붙여넣을 수 있는 'data:image/...;base64,...' 전체 문자열을 복사합니다.

즉각적인 변환

업로드 대기 시간이 없습니다. 모든 작업이 로컬에서 이루어지므로 대용량 이미지도 1초도 안 되는 시간에 변환됩니다.

파일로 다운로드

Base64 데이터 URI로부터 디코딩된 이미지를 올바른 확장자를 가진 실제 파일(PNG, JPG, SVG 등)로 저장합니다.

모든 공통 형식 지원

PNG, JPG, SVG, WebP, GIF 및 ICO를 지원합니다. MIME 타입이 자동으로 감지되므로 항상 정확한 데이터 URI가 생성됩니다.

주요 활용 사례

CSS에 작은 아이콘 포함

16×16 아이콘을 Base64로 변환하여 background-image: url(...)에 인라인으로 삽입하세요. HTTP 요청과 캐시 미스 없이 CSS와 함께 아이콘이 전송됩니다.

이메일 템플릿

외부 이미지 참조가 클라이언트에 의해 차단되거나 스팸으로 분류될 수 있는 경우, HTML 이메일에 이미지를 데이터 URI로 직접 삽입하세요.

빌드 산출물 및 번들

앱 시작 시 에셋 요청 횟수를 줄이기 위해 webpack/vite 번들 출력물에 작은 이미지를 포함시킵니다.

데이터 URI에서 이미지 추출

개발자 도구, HTML 소스 또는 CSS 파일에서 가져온 데이터 URI를 붙여넣어 미리보고 원본 이미지를 파일로 다운로드하세요.

포함된 이미지 디버깅

포함된 이미지가 렌더링되지 않을 때, 데이터 URI를 디코더에 붙여넣어 Base64가 유효한지, MIME 타입이 올바른지 확인하세요.

사용법
1

이미지 ↔ Base64 도구 열기

DevSuite Pro 독에서 이미지 Base64 아이콘을 클릭합니다. 드롭 존과 데이터 URI 필드가 있는 두 개의 패널이 열립니다.

2

이미지 로드

드롭 존에 파일을 드래그하거나, 클립보드에서 이미지를 붙여넣거나(Ctrl+V), 해당 영역을 클릭하여 파일을 찾아보세요. 미리보기가 나타납니다.

3

데이터 URI 가져오기

Base64 데이터 URI가 출력 필드에 즉시 생성됩니다. 복사를 클릭하여 클립보드로 보낸 후 인라인으로 붙여넣으세요.

4

반대 방향 변환

Base64를 이미지로 바꾸려면 필드에 데이터 URI를 붙여넣으세요. 미리보기에 이미지가 렌더링되고 다운로드 버튼이 나타납니다.

5

다운로드 또는 복사

복원된 이미지를 실제 파일로 저장하거나, 데이터 URI를 복사하여 다른 곳에 공유 또는 포함시키세요.

시작할 준비가 되셨나요?

DevSuite Pro를 무료로 설치하고 브라우저용 64개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가