PNG 画像を CSS データ URI の Base64 としてエンコードするにはどうすればよいですか?

CSS データ URI で PNG 画像に Base64 エンコーディングを使用する

データ URI を使用して PNG 画像を CSS スタイルシートに埋め込むには、PNG データ最初に Base64 形式にエンコードする必要があります。この手法により、外部画像ファイルをスタイルシート内に直接含めることができます。

Unix コマンドライン ソリューション:

base64 -i /path/to/image.png

このコマンドは、Base64 でエンコードされた PNG を出力します。 data.

Python ソリューション:

<code class="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)</code>

この Python スクリプトは、バイナリ モードで PNG ファイルを読み取り、Base64 に変換して、次のようなデータ URI を構築します。適切な MIME タイプと拡張子。

追加の注意:

• 画像の拡張子が MIME タイプの後のデータ URI に含まれていることを確認してください。例: "data :image/png;base64".
• Unicode 関連の潜在的な問題を処理するには、Python の "decode('utf-8')" メソッドを使用します。

以上がPNG 画像を CSS データ URI の Base64 としてエンコードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。