2024/03/11

Base64エンコードの画像をHTMLに埋め込んで表示する方法

HTML

Base64

はじめに

Base64エンコードの画像をHTMLに埋め込んで表示する方法のメモ。

Base64エンコードの画像をHTMLに埋め込んで表示する

HTMLで画像を表示するには、通常以下のように記述します。

<img src="{画像のURL}" />

Base64エンコードの画像を表示するには、以下のように記述します。

<img src="data:{MIMEタイプ};base64,{画像のBase64エンコード文字列}" />

MIMEタイプは以下のとおりです。

ファイル形式	MIMEタイプ
PNG	`image/png`
JPEG	`image/jpeg`
GIF	`image/gif`
BMP	`image/bmp`
TIFF	`image/tiff`
SVG	`image/svg+xml`
WebP	`image/webp`

Base64エンコードの画像を埋め込む手順

HTMLに埋め込みたい画像を準備します。
（※ テスト用にYahoo! JAPANのアイコンを使用してます。）

PowerShellを使用して画像からBase64エンコード文字列を取得します。

[Convert]::ToBase64String([IO.File]::ReadAllBytes("{画像ファイルのパス}"))

PS > [Convert]::ToBase64String([IO.File]::ReadAllBytes("D:\yahoo.png"))
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMA/wD/AP83WBt9AAAAQ0lEQVQoz2P4TyJgGIwaGIzREXaFUFkGND6mCjTEgEUFmggqmwGrvdhVY9GA5hJsVuHWQGyw4vcJigaswYJPw5BNSwCbpJUhVv1lrwAAAABJRU5ErkJggg==

Base64エンコード文字列を記載した<img>タグを作成しHTMLに埋め込みます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMA/wD/AP83WBt9AAAAQ0lEQVQoz2P4TyJgGIwaGIzREXaFUFkGND6mCjTEgEUFmggqmwGrvdhVY9GA5hJsVuHWQGyw4vcJigaswYJPw5BNSwCbpJUhVv1lrwAAAABJRU5ErkJggg==" alt="Yahoo"/>

ブラウザでHTMLを開くと画像が表示されます。

表示結果