Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

Embedding Graphics in HTML

You’ve seen images on websites before, but what about images in the html code itself? No, I’m not talking about your typical <img src=”(URI)” … /> reference to an image, but actually sticking the image (base64 encoded) into the page itself. Here’s what the code looks like to do it (linefeeds have been entered to facilitate viewing on the page).

<img src=”data:image/jpeg;base64,/9j/4AAQSkZJRg
ABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAs
LDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ
0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMj
IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy
MjIyMjIyMjIyMjIyMjIyMjL/wAARCACWAIEDASIAAh
EBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQF
BgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAA
QRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2Jy
ggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVF
VWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKT
lJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8
jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6
/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQ
oL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNO
El8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldY
WVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZ
aXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK
0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADA
MBAAIRAxEAPwDpzdSE5yPyqaC4kYNz8wPpVHIxjIzV
i2+67e9BBaMkufvA/hSF5PUflSHpkUhbvTAUs/cj8q
Tc3TI/IUjHP1poJ70AP3Mf7v8A3zUbSMMABTz6VFcX
awKeNzegrntS1W5KkRusR6/e/wAKQHTEkbice/Gaqy
ahAs6xNKql8gEqO1eb3+rX/Pl3DiQc/e4estNbupIz
ukZwjbsMc9sf40DPZRuByMD8KUbx0YDPtXBaH4yAjg
iuWctvKH12Y+X8cnmuytNVtry6kgRl3x9cHj6CgRcO
4j+H64phVz3H5VN70xvWgCIF2O1iM/Sl/eA43D8qdG
QevuP1oZwD70AM8yX++fyopN59KKBjnlaPYQiHcuel
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
l/55iiiigZ/9k%3D” />

Share

You may also like...

2 Responses

  1. Darbus says:

    That is pretty cool that you can do that, but wouldn’t it just be easier to put <img src=”(URL)”>?

  2. Joe says:

    Ah… yes, it is easier to just URI refererence the image, but you then have two files: the html and the image. What if you want to deliver just one file?

    Using this method, one could build a single html page with CSS in the header, javascript in the header, and all the images embedded (either in the body or in the CSS). Thus, a single document can be delivered, rather than a directory.

    This extends beyond just html, as you can base64 encode an image into, say, a vcard file, that way the end-user need not have web access to be able to access the image source, because the source is in the file itself.

    More difficult to author? Yes. Larger file size? Absolutely. But, in certain circumstances, it does have its advantages.

Leave a Reply