Consider inline data for images

Buried in my mind, an old information came up: images do not have to be loaded as files, there is the possibility of inline images in the internet explorer. So, it came back to my mind, that I do not have to upload resources for pictures in my solutions, small pictures can be held within my file. This reduces the amount of (web) resources used and may also enhance performance a little bit, when you have many small pictures. You have a bigger html file instead, but fewer requests to your server (ok, I admit, that does not save a squaremile of wood).

So, how does one get the necessary Base64 encoded data from? Well, write a short program for that or use an online service. I used (in german, but you will get the story). You can upload a local picture and copy the Base64 encoded string.

For a picture like instead of something like <img src=”” /> you will get something like <img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6Q                                         AAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB9wDCQotDcCM4CoAAABlSU RBVDjLY/z//z8DJYCJgUIw8AawkKqBcZnhXRj7f9R5ZSZyNZPsBWyaiTYAl2Z4GKAr+B91XpmQZpgaFlJtRLeA5Gh                                                                                                                                     E1szAwMDAiJy USbEZqwuwKSAkx0SMQnwGU5yUGSnNzgDd4i2x9fhF0QAAAABJRU5ErkJggg==” /> (where all after data:image/png;base64, is the base64 encoded data) for this picture (unfortunately, wordpress screws the data up, so no prove is visible here).




No comments yet.

Leave a Reply