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")。
• Unicode 関連の潜在的な問題を処理するための Python の「decode('utf-8')」メソッド。