PNG 画像を HTML に直接埋め込むにはどうすればよいですか?

PNG 画像を HTML に直接統合する

PNG 画像を HTML に埋め込むと、外部ファイルを参照せずにブラウザ内で直接表示できます。これを実現するには、Base64 エンコード技術を利用します。

PNG 画像を Base64 エンコードします。

オンライン エンコーダを使用して、PNG 画像を Base64 文字列に変換します。この文字列は、テキスト形式のバイナリ画像データを表します。

Base64 文字列を HTML に組み込む:

CSS オプション:

画像の CSS クラスを定義し、url() 関数と Base64 文字列を使用して、background-image プロパティを設定します。例:

<code class="css">div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

イメージ タグ オプション:

または、Base64 文字列を に直接埋め込みます。 tag:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

これにより、PNG 画像がデータ URI スキームに変換され、ブラウザーが画像を直接解釈して表示できるようになります。

以上がPNG 画像を HTML に直接埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。