이미지와 Base64를 오가는 도구

작은 아이콘 하나를 위해 이미지 파일을 따로 올리고 경로를 관리하는 일이 번거로울 때가 있습니다. Base64 data URI는 그림 파일의 바이트를 글자로 바꿔 놓은 것이라, 문서나 스타일시트 안에 문자열로 직접 박아 넣을 수 있습니다. 이 화면은 그 변환을 양방향으로 처리합니다. 이미지를 넣으면 data URI를 뽑아 주고, 반대로 data URI를 붙여 넣으면 어떤 그림인지 보여 줍니다.

이미지를 넣는 쪽에서는 파일을 끌어다 놓거나 점선 상자를 눌러 고르면 됩니다. 브라우저의 파일 판독기가 그 자리에서 data URI를 만들고, 파일 이름과 형식, 원본 용량, 가로세로 픽셀 크기, 그리고 변환 후의 문자열 길이를 칩 형태로 나란히 보여 줍니다. 결과는 세 가지 형태로 준비됩니다. data URI 원문, 그것을 넣은 <img> 태그, 그리고 background-image CSS 한 줄입니다. 각각 버튼 하나로 복사됩니다.

반대 방향에서는 data:image/png;base64, 로 시작하는 전체 문자열도 되고, 앞부분 없이 본문만 붙여 넣어도 됩니다. 앞머리가 없으면 PNG로 가정해 붙여서 해석합니다. 미리보기가 뜬 뒤에는 이미지 저장 버튼으로 실제 파일로 내려받을 수 있고, 확장자는 문자열에 적힌 형식을 보고 png·jpg·webp·svg 중 알맞은 것으로 정합니다.

사용 방법

1. 위쪽에서 이미지 → Base64와 Base64 → 이미지 중 방향을 고릅니다.
2. 이미지에서 뽑을 때는 점선 상자에 파일을 끌어다 놓고, 아래에 나온 세 가지 스니펫 중 필요한 것을 복사합니다.
3. 반대로 확인할 때는 텍스트 칸에 문자열을 붙여 넣고 미리보기를 누릅니다.
4. 필요하면 이미지 저장으로 파일을 내려받습니다.