rubyでpng画像をBASE64化してHTMLに貼り付ける

話には聞いていたがやったことないのでやってみる。

環境

$ ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin18]

やり方

png画像をBASE64に変換する

こんな感じで対象画像をtarget.pngという名前で配置

$ tree
.
├── convert.rb
└── target.png

convert.rbは以下

require 'base64'

binary_data = File.read("target.png")
p Base64.strict_encode64(binary_data)

実行すると以下

$ ruby convert.rb 
"iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA3lBMVEU9Q7jT1O////+xs+JKUL3Fx+ry8vrExuo+RLjx8vpSV8BGTLtDSbqkp96usOFCSLpPVb/29vzY2fHDxelOU77i4/RbYMN/g9A/RblJT7zk5PVfZMViZsXOz+1LUL23uuW8vub39/xESrv19fu5u+WXmtmRlNdQVb/3+PxFSrtITrzk5fXKy+xjaMZpbshLUb3t7fhZXsLj5PVRVr/n5/be3/NrcMnu7/lcYcNCR7qrreCwsuKprOCnqd8/RLnLzex+gtCmqd6Okdbw8PlITbzHyOrq6/eUl9hHTbxrb8n+VD9KAAAAAWJLR0QCZgt8ZAAAAAd0SU1FB+MDFQY4O956N5wAAACwSURBVEjH7dC3EoJAFIXhAyqgsigGzIKYEMw55/j+L+TAoGOxBfb7dff83QUYhmH+wfE8HwLCEUEMBytSNBaPywBREgpBoJJUU2o6A2Q1aFl3yHH5QrFEKx/lSrmqG0DNhFn3lkZTb9HLj7YAWDI6lnfZTleiF1+vDwyGQHGE0dhbJtOZTC+++WK5Wm+ALZHIzh32h+PmRC3fv5ydi34FCre7aLvDw8DTedEKwzBMYG/7KBXMD75mAgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0yMVQxNTo1Njo1OSswOTowMFEJEK0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDMtMjFUMTU6NTY6NTkrMDk6MDAgVKgRAAAAAElFTkSuQmCC"

HTML上に記述する

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA3lBMVEU9Q7jT1O////+xs+JKUL3Fx+ry8vrExuo+RLjx8vpSV8BGTLtDSbqkp96usOFCSLpPVb/29vzY2fHDxelOU77i4/RbYMN/g9A/RblJT7zk5PVfZMViZsXOz+1LUL23uuW8vub39/xESrv19fu5u+WXmtmRlNdQVb/3+PxFSrtITrzk5fXKy+xjaMZpbshLUb3t7fhZXsLj5PVRVr/n5/be3/NrcMnu7/lcYcNCR7qrreCwsuKprOCnqd8/RLnLzex+gtCmqd6Okdbw8PlITbzHyOrq6/eUl9hHTbxrb8n+VD9KAAAAAWJLR0QCZgt8ZAAAAAd0SU1FB+MDFQY4O956N5wAAACwSURBVEjH7dC3EoJAFIXhAyqgsigGzIKYEMw55/j+L+TAoGOxBfb7dff83QUYhmH+wfE8HwLCEUEMBytSNBaPywBREgpBoJJUU2o6A2Q1aFl3yHH5QrFEKx/lSrmqG0DNhFn3lkZTb9HLj7YAWDI6lnfZTleiF1+vDwyGQHGE0dhbJtOZTC+++WK5Wm+ALZHIzh32h+PmRC3fv5ydi34FCre7aLvDw8DTedEKwzBMYG/7KBXMD75mAgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0yMVQxNTo1Njo1OSswOTowMFEJEK0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDMtMjFUMTU6NTY6NTkrMDk6MDAgVKgRAAAAAElFTkSuQmCC" />

上記のようにimageを指定すると埋め込まれる

表記例(自分のGithubページ)