この記事はQiitaに投稿していたものです。最終更新:2021年09月03日 普通、画像を表示するときには<img src="./img/hoge.png">とか、<img src="http://example.com/hoge.png">とかやるわけですが、HTMLやCSSファイルに直接データを書く方法があるようなので試してみました。 やり方 HTMLに埋め込み <img src="data:[<mediatype>][;base64],<data>"> 画像はbase64エンコードするのが一般的です。 <mediatype>の部分にはいわゆるMIMEタイプが入ります。代表的なものは以下の通りになります。 ファイル形式 MIMEタイプ
![画像をdataURLで表示させてみた※速度比較あり](https://cdn-ak-scissors.b.st-hatena.com/image/square/756ac5ff57df7dc23280919a5112d4a939984abb/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--1YHFtYmS--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E7%252594%2525BB%2525E5%252583%25258F%2525E3%252582%252592dataURL%2525E3%252581%2525A7%2525E8%2525A1%2525A8%2525E7%2525A4%2525BA%2525E3%252581%252595%2525E3%252581%25259B%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525E2%252580%2525BB%2525E9%252580%25259F%2525E5%2525BA%2525A6%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E3%252581%252582%2525E3%252582%25258A%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%25258A%2525E3%252581%25258B%2525E3%252581%252597%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1MWQwOGFmNGUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)