이미지를 Base64로 변환
이미지 파일을 선택하여 Base64 인코딩 문자열로 변환하세요. 데이터 URI 접두사를 전환하여 바로 사용할 수 있는 CSS/HTML 출력을 얻을 수 있습니다. 모든 처리는 브라우저에서 이루어집니다.
이미지를 Base64로 변환에 대하여
이 도구는 브라우저에서 완전히 이미지를 Base64 인코딩 문자열로 변환합니다. 어떤 서버로도 데이터가 업로드되지 않습니다.
- 데이터 URI: 접두사가 활성화되면 출력을 CSS
background-image또는 HTML<img src="...">에서 바로 사용할 수 있습니다. - 원시 Base64: 접두사 없이 순수 인코딩된 문자열을 얻습니다.
- JPEG, PNG, GIF, WebP, SVG 및 기타 브라우저 지원 이미지 형식을 지원합니다.
이미지를 data URI로 끼워 넣으면 요청이 하나 줄고 크기는 약 3분의 1 늘어납니다. base64가 3바이트마다 네 글자를 쓰기 때문입니다. 이 교환은 작고 늘 필요한 것에는 값어치가 있지만 사진에는 없습니다. 끼워 넣은 이미지는 따로 캐시할 수도 없어서, 그것을 담은 파일이 내려올 때마다 함께 다시 내려옵니다.
관련 도구
마크업이 말을 안 듣나요
이스케이프된 엔티티, 깨진 인코딩, CMS에서는 이렇게 보이는데 페이지에서는 저렇게 보이는 콘텐츠. 대개는 파이프라인 어딘가가 추측하고 있다는 뜻입니다. 저희는 프런트엔드와 그 뒤의 배포 경로까지 만듭니다. 쓴 그대로 방문자에게 보이도록 말이죠.
사이트에 대해 이야기하기자주 묻는 질문
data URI는 언제 값어치가 있나요
곧바로 필요한 작은 이미지일 때입니다. 아이콘, 간격용 이미지, 외부 이미지가 기본으로 차단되는 HTML 메일의 로고 같은 것들입니다. 어림잡아 몇 킬로바이트이고, 그 위로는 늘어난 크기가 아낀 요청을 넘어섭니다.
인코딩한 쪽이 왜 더 큰가요
base64가 3바이트를 네 글자로 나타내기 때문에, 접두사를 빼고도 3분의 1 커집니다. 전송 중에는 압축이 일부를 되찾지만, 브라우저는 문서 안에서 더 큰 형태를 그대로 들고 있습니다.
캐시에 나쁜 영향이 있나요
있고, 바로 이 부분을 놓칩니다. 별도 이미지 파일은 한 번 캐시되어 재사용되지만, 끼워 넣은 이미지는 스타일시트나 페이지의 일부라서 그 파일이 바뀔 때마다 다시 내려받습니다.
어떤 형식을 끼워 넣을 수 있나요
무엇이든 됩니다. base64는 내용에 무관심하니까요. 흥미로운 것은 SVG입니다. 이미 텍스트라서 data URI로 끼워 넣는 편이 SVG를 그대로 넣는 것보다 커지는 경우가 많습니다.
제 이미지가 업로드되나요
아닙니다. 파일은 브라우저가 읽어 페이지 안에서 인코딩하므로 기기를 벗어나지 않습니다. 이미지가 내부 화면을 찍은 것일 때, 그러니까 대개의 경우에 중요합니다.