Data URL Encoder
HTML과 CSS에 포함하기 위해 파일을 Base64 Data URL로 변환합니다.
여기에 파일을 드롭하거나 클릭하여 업로드
이 도구 소개
Data URL은 파일 내용을 URL 문자열에 직접 인코딩하는 특수한 URL 형식으로, HTML과 CSS에 이미지, 폰트, 기타 리소스를 별도의 HTTP 요청 없이 인라인으로 삽입할 수 있게 해줍니다. 이 도구는 모든 파일을 Base64 인코딩된 Data URL로 변환하여 서버 요청을 줄이고, 작은 에셋의 페이지 로드 시간을 개선하며, 자체 포함 마크업이 필요한 경우 배포를 단순화하는 데 유용합니다.
이 도구를 사용하려면 파일을 업로드하거나 내용을 붙여넣기만 하면, 인코더가 즉시 Data URL을 생성하여 CSS background-image 속성, HTML img src 속성, 또는 다른 임베드 컨텍스트에 직접 복사하여 붙여넣을 수 있습니다. 도구는 파일 타입을 자동으로 감지하고 Data URL에 올바른 MIME 타입을 설정하므로 브라우저가 임베드된 콘텐츠를 어떻게 해석할지 알 수 있습니다.
Data URL은 작은 파일(보통 100 KB 미만)에 가장 적합합니다. 큰 파일을 임베드하면 HTML과 CSS가 비대해질 수 있기 때문입니다. 웹 성능을 최적화하는 개발자, 맞춤형 폰트를 임베드하는 디자이너, 외부 에셋 요청이 실질적이지 않은 이메일 템플릿이나 오프라인 우선 애플리케이션을 구축하는 팀에게 특히 유용합니다.
자주 묻는 질문
코드 구현
import base64
import mimetypes
from pathlib import Path
def file_to_data_url(filepath: str) -> str:
"""Convert a file to a base64 Data URL."""
path = Path(filepath)
mime_type, _ = mimetypes.guess_type(filepath)
if mime_type is None:
mime_type = "application/octet-stream"
with open(path, "rb") as f:
data = f.read()
encoded = base64.b64encode(data).decode("utf-8")
return f"data:{mime_type};base64,{encoded}"
# Example usage
url = file_to_data_url("image.png")
print(url[:80] + "...")
print(f"Total length: {len(url)} chars")
# Embed in HTML
html = f'<img src="{url}" alt="Embedded image">'Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.