Base64 이미지 인코더

이미지(JPG, PNG, SVG, WEBP)를 드래그 앤 드롭하거나 클릭하여 업로드하세요. 이 도구는 CSS 또는 HTML에서 데이터 URI로 사용할 수 있는 Base64 문자열을 즉시 생성합니다.

아이콘, 로고, UI 요소(5KB 미만)와 같은 작은 이미지에는 Base64 인코딩을 사용합니다. 이렇게 하면 이러한 자산에 대한 HTTP 요청이 제거되어 성능이 약간 향상될 수 있습니다. 큰 이미지의 경우 외부 URL이 더 좋습니다.

배경 이미지로 사용: background-image: url('data:image/png;base64,iVBORw0KGgo...'); 도구는 복사할 수 있는 CSS 조각을 자동으로 생성합니다.

img 태그의 src 속성으로 사용하세요: <img src='data:image/png;base64,iVBORw0KGgo...'/>. 이 도구는 이 HTML 조각을 생성합니다.

예. Base64 인코딩은 바이너리 원본에 비해 파일 크기를 약 33% 증가시킵니다. 이것은 절충안입니다. HTTP 요청을 저장하지만 데이터가 더 큽니다. 아주 작은 이미지에는 그만한 가치가 있지만 큰 사진에는 그렇지 않습니다.

예. 디코드 모드로 전환하고 Base64 문자열(data:image/... 접두사 포함 또는 제외)을 붙여넣으면 도구에서 이미지를 렌더링하고 파일로 다운로드할 수 있습니다. 이는 HTML 소스 코드 또는 API 페이로드에서 포함된 이미지를 추출하는 데 유용합니다.

JPG, PNG, GIF, WebP 또는 SVG를 추가하면 도구는 Base64 문자열과 바로 붙여넣을 수 있는 스니펫(데이터 URI, img src 및 CSS 배경 URL)을 출력합니다. 변환은 로컬이므로 이미지가 업로드되지 않습니다.

Base64(또는 전체 데이터 URI)를 붙여넣으면 도구가 렌더링되고 CSS 또는 HTML에서 포함된 이미지를 추출하는 데 유용한 원본 이미지를 다운로드할 수 있습니다.

Base64는 이미지를 HTML, CSS 또는 이메일에 직접 포함하므로 로드할 별도의 파일이 없으며 작은 아이콘과 인라인 자산에 편리하지만 큰 이미지는 일반 파일로 두는 것이 좋습니다.

예, 약 1/3 정도입니다. 바이너리는 텍스트로 표시되기 때문입니다. 그렇기 때문에 요청을 피하는 것이 크기보다 중요한 소규모 자산에 가장 적합합니다.

아니요. 인코딩과 디코딩은 전적으로 브라우저에서 이루어집니다.