画像をdataURLで表示させてみた※速度比較あり

この記事は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タイプ