이미지 미리보기 및 정보
원본 Base64 문자열
Base64-encoded data (no prefix)
데이터 URI
Complete data URI (data:image/...;base64,...)
CSS 배경
CSS background-image property
HTML 이미지 태그
Ready-to-use <img> element
이미지를 즉시 Base64 문자열로 변환합니다. 데이터 URI, CSS 배경 코드, HTML img 태그를 얻을 수 있습니다 -- 모든 작업이 브라우저에서 처리되며 서버 업로드가 전혀 없습니다.
Base64 인코딩은 퍼즐의 한 조각에 불과합니다. OneStepToRank는 로컬 검색 결과를 장악할 수 있도록 완전한 도구 모음과 최적화 인텔리전스를 제공합니다.
무료 시작Base64 인코딩은 64개의 인쇄 가능한 문자를 사용하여 바이너리 데이터를 일반 ASCII 텍스트로 변환하는 방법입니다. 이미지에 적용하면 전체 이미지 파일을 나타내는 텍스트 문자열이 생성됩니다. 이 문자열은 <img> 태그의 src 속성을 통해 HTML에 직접 삽입하거나, background-image 속성을 통해 CSS에, 혹은 API 통신을 위한 JSON 페이로드에 삽입할 수 있습니다. 인코딩은 A-Z, a-z, 0-9, +, / 문자를 사용하며, =는 패딩으로 사용됩니다. 바이너리 데이터 3바이트당 Base64 출력 4문자가 생성되어 인코딩 결과는 원본 파일보다 약 33% 크게 됩니다.
데이터 URI (Uniform Resource Identifier)는 data:[mediatype];base64,[data] 구문을 사용해 파일 내용을 URL 자체에 직접 삽입합니다. 이미지의 경우 별도의 서버 파일 없이 전체 이미지를 HTML이나 CSS에 포함할 수 있습니다. 이는 HTTP 요청을 없애주어 아이콘, 로고, UI 스프라이트와 같은 작은 이미지에 유리합니다. 하지만 데이터 URI는 HTML이나 CSS 문서의 크기를 증가시키고, 브라우저가 독립적으로 캐시할 수 없으며, 원본 바이너리보다 약 1/3 정도 크게 됩니다. 일반적으로 5~10KB 이하의 이미지는 인라인 삽입에 적합하고, 그보다 큰 파일은 적절한 캐시 헤더를 가진 별도 파일로 제공하는 것이 전체 성능에 좋습니다.
HTTP 요청을 없애면 초기 페이지 렌더링 속도가 빨라질 수 있지만, 큰 이미지를 Base64 문자열로 삽입하면 여러 단점이 있습니다. HTML이나 CSS 파일이 크게 증가해 초기 문서 다운로드가 지연되고, 브라우저는 포함된 문서와 별도로 이미지를 캐시할 수 없습니다. 또한 33%의 크기 오버헤드로 인해 바이너리 파일을 직접 제공하는 것보다 전송되는 데이터가 더 많아집니다. 중요한 렌더링 경로에서는 작은 인라인 이미지를 사용해 렌더링 차단 요청을 피함으로써 체감 로드 시간을 줄일 수 있습니다. 그러나 콘텐츠 이미지, 히어로 배너 또는 몇 킬로바이트를 초과하는 이미지의 경우 CDN 캐시와 WebP, AVIF와 같은 최신 포맷을 사용한 최적화된 바이너리 파일을 제공하는 것이 더 나은 성능을 제공합니다. 요청 수 감소의 이점을 얻을 수 있는 작고 자주 사용되는 자산에 대해서만 Base64 인코딩을 전략적으로 활용하십시오.
background-image 속성에 Base64 인코딩된 이미지를 직접 CSS에 삽입할 수 있습니다. 구문은 다음과 같습니다: background-image: url(data:image/png;base64,...); 이는 작은 UI 요소, 패턴, 아이콘 등에 흔히 사용됩니다. 장점은 네트워크 요청을 없앨 수 있다는 것이고, 단점은 CSS 파일이 커지고 이미지가 별도로 캐시되지 못한다는 점입니다. 최적의 결과를 위해서는 5~10KB 이하의 이미지에만 이 기법을 사용하는 것이 좋습니다.