用途
新着
履歴
分類


HTML Base64エンコードで画像を表示

HTML Base64エンコードで画像を表示
HTML Base64エンコードで画像を表示
画像をテキストデータに変換してimgタグで表示させるサンプルです。

普通のimgタグでPNG画像を掲載する場合

<img src="/img/article/294/2020-04-18-181228.png">

これはサーバにアップされた画像を通信して表示しています。

以下はBase64エンコードされた画像データを表示する場合

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAMAAAD0WI85AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiODViMDYzZC0yY2ZiLTRlMDUtYTA3YS04NTEzNDlkMDY5OTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkVDQTI3N0E3OTc4MTFFQUEyRkFCRDY5Q0FERDFGNzYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkVDQTI3Nzk3OTc4MTFFQUEyRkFCRDY5Q0FERDFGNzYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NDQyNWVjOC04NzBjLTQzZTMtYmQ2MS1hMzI2MjJiNzlhNzgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Yjg1YjA2M2QtMmNmYi00ZTA1LWEwN2EtODUxMzQ5ZDA2OTkzIi8+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">

Base64エンコードは画像をテキストデータにして表示する方法なので、画像への通信が発生しません。

なので表示速度は理論上早くなります。

Macのターミナルで「base64 画像ファイルのパス」を実行するとテキストへの変換が可能です。

他の方法でも変換できますが、生成されるテキストは同じです。

JPEG、GIF、SVGなどにも使えますが、HTMLがとんでもないことになるので、小さい画像でどうしてものときだけ利用するのが良さそうです。

公開 : 2020-04-18 18:12:02
更新 : 2020-04-18 18:38:30
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top