ì´ë¯¸ì§ Base64 ë³í기
ì´ë¯¸ì§ë¥¼ Base64 문ìì´ë¡ ë³ííê±°ë ë¤ì ì´ë¯¸ì§ë¡ ë³íí©ëë¤. 모ë ê³¼ì ì ë¸ë¼ì°ì ìì ì²ë¦¬ë©ëë¤.
ì¬ê¸°ì ì´ë¯¸ì§ë¥¼ ëë¡íê±°ë í´ë¦íì¬ ì í
ì´ë¯¸ì§ Base64 ë³í기 ì ë³´
ì´ë¯¸ì§ë¥¼ Base64ë¡ ì¸ì½ë©ë 문ìì´ë¡ ë³ííì¬ HTML, CSS, JSONì ì½ì íê±°ë, Base64 문ìì´ì ë¤ì´ë¡ë ê°ë¥í ì´ë¯¸ì§ë¡ ëì½ë©í©ëë¤. 모ë ì²ë¦¬ë ë¸ë¼ì°ì ìì ë¡ì»¬ë¡ ìíë©ëë¤.
이 도구란?
이미지를 Base64로 인코딩된 텍스트 문자열로 변환하거나, 기존 Base64 문자열을 다시 볼 수 있고 다운로드 가능한 이미지로 디코딩합니다. 모든 과정은 브라우저에서 로컬로 처리되며 서버로 업로드되지 않습니다.
사용 방법
- 이미지를 업로드 영역에 드래그 앤 드롭하거나 클릭하여 파일을 선택하세요.
- Base64 문자열이 자동으로 표시됩니다——복사를 클릭하여 코드에 사용하세요.
- 반대로 변환하려면 data:image/... 형식의 Base64 문자열을 텍스트 상자에 붙여넣고 미리보기를 클릭하세요.
- 다운로드를 클릭하여 미리보기 중인 이미지를 기기에 저장하세요.
주요 활용 사례
- 추가 HTTP 요청 없이 작은 이미지를 HTML이나 CSS에 직접 삽입
- JSON 페이로드나 이메일 템플릿에 이미지 포함
- Base64 이미지 문자열이 실제로 어떤 이미지인지 빠르게 확인
- API 응답의 데이터 URI 디버깅
활용 팁
- Base64 인코딩은 파일 크기를 약 33% 증가시킵니다——큰 사진보다는 작은 아이콘에 적합합니다.
- 결과에는 전체 data:image/... 접두사가 포함되어 있어 <img> 태그의 src 속성에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
이미지를 파일로 연결하는 대신 Base64로 변환하려는 이유는 무엇인가요?
Base64 이미지를 포함하면 별도의 HTTP 요청을 피할 수 있으며, 추가 네트워크 왕복이 가치가 없는 HTML, CSS 또는 JSON에 직접 번들로 된 아이콘이나 인라인 이미지에 유용합니다.
큰 사진에 Base64 인코딩이 좋은 아이디어인가요?
일반적으로 아닙니다. Base64는 파일 크기를 약 33% 증가시키고 브라우저가 이미지를 별도로 캐시하지 못하게 하므로 아이콘이나 로고와 같은 작은 자산에 가장 좋습니다.
data:image/... 접두사는 무엇을 의미하나요?
브라우저에 다음 문자열이 인라인 이미지 데이터이며 MIME 유형(예: image/png)을 지정하는 데이터 URI 스킴이므로 브라우저는 별도 파일 없이 직접 렌더링하는 방법을 알 수 있습니다.
이미 있는 Base64 문자열에서 이미지를 미리 볼 수 있나요?
네. 전체 data:image/... 문자열을 디코드 텍스트 상자에 붙여넣고 미리보기를 클릭하여 렌더링한 다음 다운로드를 사용하여 일반 이미지 파일로 저장합니다.
이미지를 변환할 때 업로드되나요?
아니요. 인코딩과 디코딩 모두 브라우저에서 로컬로 이루어집니다——이미지 데이터가 서버로 전송되지 않습니다.
이미지를 Base64 문자열로 변환하고 Base64를 다시 이미지로 디코딩하세요. 모든 과정이 브라우저에서 이루어집니다. 무료, 빠르고 업로드가 필요 없습니다.