10

So this may be a weird question, but bear with me. I am designing a block of code for a website. I am creating a 

<div></div>

element with all the content inside it. Style tags are included within it, as are script tags. For ease of design, they wish for only an HTML file with the script and CSS inside of it. I also have a background image that I am using. It is used elsewhere on the webpage, and SHOULD show up when the code is inserted into the website> However, since I have no way of verifying this, I would like to include the image into the HTML file. I am NOT talking about the image tag (as below)

<img src='image.jpg/>

I am talking about somehow including or encoding the image into the physical HTML file, So that there isn't a separate HTML file and JPEG file, but just one HTML file. Is this even possible? If so, how?

EDIT: Thanks for the help with Base64, but that can be rather long, and add a whole bunch of length to the HTML file. Are there any OTHER possible solutions?

1 Answers1

14

You can base64 encode the image data, so you would end up with something like this

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

Here are some resources:

Base64 image converter

http://www.bigfastblog.com/embed-base64-encoded-images-inline-in-html

Embedding Base64 Images

Lonnie Best
  • 9,936
  • 10
  • 57
  • 97
mittmemo
  • 2,062
  • 3
  • 20
  • 27