Data URI Scheme を使うと、画像データをBase64データ形式でHTMLに埋め込むことができる。

〔書式〕 data:[<MIME-type>][;charset=<encoding>][;base64],<data>

〔例〕<img src="http://agorian.com/assets/img/camera.png">を下記のように書く。

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABIAAAALCAYAAAByF90EAAAACXBIWXMAAAsRAAALEQF/ZF+RAAACIUlEQVR4nG3O20uTARiA8e//8bITW
XiRuagQtFw2nM5ZX2Zb6jZ16jZTp0TZATURVkZ0YUQuF+lwmUEewkPWZtbcvqlJlqkLCWvG0J7mdyHqeuF39T68vMLGxt+ExsamObVazS
atVsvw8Eg7IITDP0yxweN5Mbi+vpHQ1dU9KIoii4tLps39dkIwKN2yVVcx+2te9m5mgvKyCpqb7/gtlba1zt7nqDJV1NTULqSeTMXd78F
YbFpruH7Tv9ncddzzLy+Hq4TMDBVjfi/fCMu+RBcZD/kY+jjC8NQ4n39/5dVoP56hPt74RpmLLPB+dpIxySs3HT0urBYbQtrx07wN+/nA
TJzJP7M8cbkoOK+j1FCGqMmne6xvR9M7PYSpuBQhXaGk9/sor/HFefCygzKTmUgkQjQaZXV1lSK9kbbpTpz0y9qkpxj0pthHyUpa5ztp5
Vkcs9WO2+1m+zgcDqqabnODx7L60H3ycy4hnDmm5urMQ67xKI6xshan07njUEtzCzmuCvQ0ynRSA+cyLyJkHMlCI9Wjwh7Pb0OZkoXX62
VlZYWBgQEU2gyUS9atRh2oRpMmIpxN0XB0qohDsfu7HV6/TLbLTnKJir2FCk6Y8zjw8wKJ6LYaRcDAqaQsBFGpI6lH5GBoF0lkfzCPfUH
tf+SyJ5AjS3TnkpdegDA58am9SFuCTm3YQZ9txKy3UF5ojWMxXqGmsi7GTq2lDikQav8HEgU16lm0N7YAAAAASUVORK5CYII=">

画像をBase64に変換するツールがある。

PHPを使って変換することもできる。

<img src="data:image/png;base64,<?php echo base64_encode(file_get_contents("../img/camera.png")) ?>">

補足

  • IE6/7が対応していなかったためかあまり普及しなかった。
  • IE8で対応したがデータサイズが最大32KBになっている。IE9は4GBまで扱える。参考
  • CSSに書くことができる。
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACN
    Ms+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1
    eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=)

 

counter