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

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

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

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

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

CSS オプション:

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

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

画像タグ オプション:

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

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