Base64 이미지 인코더

사용방법

Base64 이미지 인코더 사용 방법

사용 사례

개요

이미지를 Base64로 인코딩하면 더 큰 파일에 대한 네트워크 요청이 교환됩니다. 이는 왕복 대기 시간이 추가 바이트보다 더 많은 비용이 드는 작고 자주 사용되는 자산(아이콘, 작은 로고, 간격 그래픽)에 대한 승리입니다. 큰 사진의 경우 별도의 파일로 보관하세요.

데이터 URI는 data:image/png;base64,로 시작하는 문자열입니다. CSS 배경 이미지나 HTML img src에 놓으면 브라우저가 이를 인라인으로 렌더링합니다. 이 도구는 두 조각을 모두 생성하므로 올바른 조각을 직접 붙여넣을 수 있습니다.

Base64 인코딩은 이진 데이터를 텍스트로 나타내기 때문에 파일 크기에 약 33%를 추가합니다. 인라인은 또한 자산이 여러 페이지에 걸쳐 별도로 캐시될 수 없음을 의미합니다. 모든 것보다는 작고 페이지에 중요한 그래픽에 의도적으로 사용하십시오.

특징

FAQ

온라인에서 이미지를 Base64로 어떻게 변환합니까?+

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

CSS에서 언제 Base64 이미지를 사용해야 합니까?+

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

CSS에서 Base64 이미지를 어떻게 사용합니까?+

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

HTML에서 Base64 이미지를 어떻게 사용합니까?+

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

Base64 인코딩을 사용하면 이미지가 더 커지나요?+

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

Base64 문자열을 이미지 파일로 다시 디코딩할 수 있나요?+

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

Base64를 사용하면 이미지가 더 커지나요?+

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

내 이미지가 인코딩을 위해 업로드되었나요?+

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