이미지 Base64 변환기

브라우저에서 이미지를 HTML, CSS 또는 JSON에 내장하기 위한 Base64 데이터 URI로 변환합니다.

이 변환기의 기능

이 이미지-Base64 변환기는 사진을 데이터 URI, 이미지를 직접 포함하는 긴 텍스트 문자열 및 즉시 사용 가능한 CSS 배경 조각으로 변환해요. 별도의 파일에 연결하는 대신 이미지를 인라인할 수 있어요.

브라우저에서 로컬로 실행되므로 이미지는 기기에서 읽혀지고 업로드되지 않아요.

데이터 URI는 마크업 내부에 전체 이미지를 전달하므로 브라우저는 이를 가져오기 위해 별도의 네트워크 요청을 하지 않아요. 아이콘과 같은 작은 자산의 경우 왕복을 저장하면 페이지가 더 빠르게 느껴질 수 있어요.

문제는 크기와 캐싱이에요. Base64는 제한된 텍스트 알파벳으로 이진 데이터를 나타내기 때문에 대략 33%의 오버헤드를 추가하고 인라인 이미지는 별도로 캐시할 수 없으므로 이미지가 포함된 모든 페이지에서 다시 다운로드돼요.

경험상 작은 이미지, 아이콘, 작은 로고 또는 스프라이트를 인라인하여 요청을 피하는 것이 오버헤드 가치가 있는 경우, 큰 이미지를 브라우저가 캐시하고 병렬로 로드할 수 있는 일반 파일로 유지하는 것이에요.

데이터 URI는 URL가 허용되는 모든 곳(img src, CSS 배경, JSON의 필드 또는 이메일 템플릿)에서 작동해요. 따라서 독립된 스니펫에 편리해요.

자주 묻는 질문

이미지가 서버에 업로드되나요?

아니요. 이미지는 브라우저에서 완전히 읽히므로 기기 밖으로 나가지 않습니다.

데이터 URI는 언제 사용해야 하나요?

추가 네트워크 요청을 피하는 것이 크기 증가를 감수할 만한 아이콘 같은 작은 이미지에 사용하세요. 큰 이미지에는 일반 파일이 더 좋습니다.

Base64가 파일보다 큰 이유는 무엇인가요?

Base64 인코딩은 제한된 텍스트 알파벳을 사용하여 이진 데이터를 나타내므로 약 33%의 오버헤드가 발생합니다.