CSS 데이터 URI에서 PNG 이미지에 Base64 인코딩 사용

데이터 URI를 사용하여 PNG 이미지를 CSS 스타일시트에 포함하려면 PNG 데이터 먼저 Base64 형식으로 인코딩되어야 합니다. 이 기술을 사용하면 외부 이미지 파일을 스타일시트 내에 직접 포함할 수 있습니다.

Unix 명령줄 솔루션:

base64 -i /path/to/image.png

이 명령은 Base64로 인코딩된 PNG 데이터를 출력합니다.

Python 솔루션:

import base64

with open("/path/to/image.png", "rb") as f:
    binary_data = f.read()

base64_data = base64.b64encode(binary_data).decode("utf-8")
ext = "png"

data_uri = f"data:image/{ext};base64,{base64_data}"

print(data_uri)

이 Python 스크립트는 바이너리 모드에서 PNG 파일을 읽고 이를 Base64로 변환한 다음 적절한 MIME 유형 및 확장자를 포함하여 데이터 URI를 구성합니다.

추가 참고 사항:

• MIME 유형 뒤의 데이터 URI에 이미지 확장자가 포함되어 있는지 확인하세요(예: "data:image/png;base64").
• 잠재적인 유니코드 관련 문제를 처리하기 위한 Python의 "decode('utf-8')" 메서드.