PNG 画像を HTML ページに埋め込む

画像ファイルにリンクせずに PNG 画像を HTML ページに埋め込むタスクでは、次のような疑問が生じます。 : 画像データを HTML に直接組み込む方法?

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

Base64 エンコーディングは、HTML に画像を埋め込むためのソリューションを提供します。さまざまなオンライン Base64 エンコーダが利用可能ですが、http://www.greywyvern.com/code/php/binary2base64.

にあるような堅牢なエンコーダを使用することをお勧めします。このツールは 2 つの主要な埋め込みオプションを提供します。 : CSS または タグを使用します。

CSS埋め込み

CSS では、次のように埋め込みを行うことができます。

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

タグの埋め込み

代わりに、 タグを使用することもできます:

Base64 エンコーディングを利用すると、PNG 画像を HTML ページに直接埋め込むことができ、外部画像ファイルを必要とせずに画像を表示できるようになります。