Showing a bitmap on html page possible?



I have the esp32 board and I’m writing a wheather station with it.
It all goes well , but now I like to know if it is possible to import a bitmap on sdcard , so that it can be used
with html code

In html it looks like this:

< img src="./moon.jpeg" width="30px" height=“30px” >

The problem I think is to specify the image source
I could send the html code with a

(princ "< img src="./moon.jpeg" width="30px" height=“30px”  >"  s)

But how to specify the source of the image ?
Can this be done anyway ?

Thanks for any advice

Ronny Suy


You need to encode the image data using Base64 encoding. Here’s an example that transfers a PNG image of a red dot and displays it on a web page:

(defun webpage ()
   (with-client (s)
      (let ((line (read-line s)))
        (when (null line) (return))
        (print line)))
    (println "HTTP/1.1 200 OK" s)
    (println "Content-Type: text/html" s)
    (println "Connection: close" s)
    (println "" s)
    (princ "<!DOCTYPE HTML><html><body><h1>ADC Value: " s)
    (princ (analogread 0) s)
    (princ "<img src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA" s)
    (princ "9TXL0Y4OHwAAAABJRU5ErkJggg==' alt='Red dot' />" s)
    (println "</h1></body></html>" s)
    (println "" s))
   (delay 5000)))

There are several web sites that will convert an image to Base64 for you, or you could try using my uLisp base64 function on the Wi-Fi examples page (I haven’t tried it).

An alternative to serving the images from the ESP32 would be to host them on an external site, and include a reference to them in your server HTML.


Hi David

Thanks !
If I choose a small jpeg and do a conversion online , then I get a rather long string.
Is this correct ? And can I just copy paste this long string into 1 (princ …) instruction , or do I have to cut it into pieces ?

Kind regards , Ronny


Hi Ronny,

The number of characters in the Base64 string will be 4/3 times the size of the file in bytes. GIF would be a better file format as it tends to give smaller files. In theory you can paste it the string into one princ instruction, as uLisp doesn’t have any limit on the length of strings it supports, but uLisp may run out of memory allocating space for such a long string so it might be safer to break it into pieces. Some Base 64 converters split the string up into pieces for you.

Try it!

Regards, David


Hi David

I’ve tried several sites and they all work !
It works like a charm.

I have 1 remaining question: Is it also possible to use something simular using sd-card.
Because it consumes some memory, and maybe this can avoided with an sd card.

Regards ,
Ronny Suy


Yes, you could read the Base 64 string encoding for the image from an SD card, and it won’t take up memory in uLisp. You could also store the actual image on the SD card, and Base 64 encode it each time you use it using the uLisp function for Base 64 encoding.



Yes ok, but … how ??
I don’t have any idea how to do this
Hope you don’t mind my question



Presumably you’ve already converted your image to Base 64 encoding. On your computer save this into a text file, and copy the file onto the SD card; call it something like: image.txt.

Put the SD card into the SD card socket on your ESP32 board. Now in the (webpage) function, instead of the princ statements to print the image data to the stream you would put something like:

(with-sd-card (sd "image.txt")
    (let ((data (read-line sd)))
      (when (null data) (return))
      (princ data s))))

So this would read each line from the SD card and write it to the web stream.

You would either need to princ the HTML each side of the data:

<img src='data:image/png;base64, 

or you could include this in the file.

I haven’t had a chance to test this, so please let me know if it works.


Hi David

I have successfully implemented images on my website.
I used your construction as above:

(with-sd-card (sd "image.txt")
    (let ((data (read-line sd)))
      (when (null data) (return))
      (princ data s))))

This piece of code is running inside a (with-client (s) form.
Image.txt is a file on sd-card which contains a text in base64 which is the image (giff, bmd, tiff or whatever) converted to base64 and added with html tags.

I have an image of lets say a first quarter image of the moon and the contents of the file look like this :

<img src='data:image/gif;base64,R0lGODlhgACAAPUAAC8vLzAwMKeGI6eFJKiFI6mGI6yJI62KI6+LIq

The html tags added are in the beginning of the file: <img src=' and at the end '/> (mind the single quotes !)

The image was a gif file of 128x128 pixels.

I use this website url to convert the image to base64 :

You can do a lot of conversions on this site, and the advantage of this site is that you can split the base64 string into smaller chunks of lines. This way it looks nicer on your editor.

After the conversion you can copy/paste the string into a text editor, add the tags as described above, and save it to sd-card on the pc.

Hope someone finds this useful.
Greetings Ronny Suy