Saving image into html code

Question

OK so I was wondering do any of you know if it is possible to save an image inside of the html code so you don't have to load it from another place on your website? I am making a website and when I was uploading images it crossed my mind...

you can probably stash a non-binary encoded version of the stream inside some `script` tag, wrapped in an xml element or html tag. another option would be to use localstorage to store the data. last not least there still is websql (though officially deprecated), a full-fledged sqlite browser data base. — collapsar, Aug 30 '13 at 22:48
Your question appears to be a duplicate: http://stackoverflow.com/questions/5258057/images-in-css-or-html-as-data-base64 — dcaswell, Aug 30 '13 at 22:52

score 2 · Answer 1 · edited May 23 '17 at 10:33

It is possible to encode the images directly into the HTML file, by using Data Uris. However, you don't want to do this for images, because it causes the image to take up more space, which will make your website load slower.

See here: Embedding Base64 Images

Additionally, if the image is a separate file, modern web browsers will load in it parallel over a second network connection, so if you have multiple images they can download at the same time.

score 2 · Answer 2 · answered Aug 30 '13 at 22:53

2

This is possible with data URL that you put instead the usual URL.
Here some more infos & a data URL generator.

answered Aug 30 '13 at 22:53

Codophage

85
8

score 0 · Answer 3 · answered Aug 30 '13 at 22:51

It is possible to encode the image contents as a "data uri" which modern browsers can decode into the image to display.

Do note that this will make your [src] attribute very large and your HTML file unwieldy. Browsers will not be able to cache resources loaded as data: URIs, so there will be a significant performance hit if the same image is used multiple times on multiple pages.

Here is an example of a data uri for a file icon

Saving image into html code

3 Answers3