外部リンクを使用せずに PNG 画像を HTML ページに直接埋め込む方法

HTML ページへの PNG 画像の埋め込み

デジタル領域では、画像はユーザー エクスペリエンスを向上させ、視覚的な情報を伝える上で重要な役割を果たします。 Web 開発者が直面する一般的な質問の 1 つは、外部にリンクせずに、ポータブル ネットワーク グラフィックス (PNG) 画像を HTML ページに直接埋め込む方法です。

Base64 エンコーディングによる画像の埋め込み

PNG 画像を HTML に埋め込むには、Base64 エンコーディングを利用できます。このプロセスでは、バイナリ画像データを HTML コードに埋め込むことができる文字列に変換します。

いくつかのオンライン Base64 エンコーダがこのタスクを支援します。推奨ツールの 1 つは http://www.greywyvern.com/code/php/binary2base64 にあります。

画像をエンコードした後、次の 2 つの方法のいずれかを使用して画像を埋め込むことができます。

1. CSS の Background-Image プロパティの使用:

div 要素を作成し、そのbackground-image プロパティを Base64 でエンコードされた文字列に設定します。例:

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

2. を使用するタグ:

または、 を使用することもできます。タグを使用して画像を直接埋め込みます。 src 属性は、エンコードされた文字列を値として受け取ります。例:

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

これらのメソッドを使用すると、PNG 画像を HTML ページに埋め込むことができ、外部ファイル参照なしで画像を表示できるようになります。

以上が外部リンクを使用せずに PNG 画像を HTML ページに直接埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。