In this document and accompanying video we will discuss the significance of embedding images directly into the HTML, which is a new feature in Version 12.
When we choose to embed the image directly into the HTML then the Base64 encoded data for the image is rendered when the grid is rendered.
Below is an example of this. When we right-click on an image in the first Grid, then click on Inspect Element with Firebug, we see the Base64 encoded version of the image in the source tag:
In comparison, if we right-click on an image in the second Grid and click on Inspect Element with Firebug, we can see in the source tag that the source of the image is a file on the server:
The significance of having the image embedded in the HTML or not is best illustrated by looking at the network traffic when we refresh the Grid:
When we sort the grid by clicking on SALES PERSON ID we can see at the bottom of the screen that the network traffic shows many different calls back to the server, and each call back was to retrieve an image. First the initial Grid was displayed, then the images were fetched one at a time from the server so that the images in the Grid painted sequentially. Depending on network speed, this can be quite noticeable:
Now let's look at the Grid that contains the Base64 encoded images and do the same thing by clicking on SALES PERSON ID to sort it. We see from the network traffic this time that there were significantly fewer calls back to the server, and the only image that required a call back was the missing person icon as all the other images were already embedded:
Because the images are embedded, the images pop (as opposed to paint one at a time) so that there is no individual rendering. Instead, the images render instantaneously which can mean a noticeably faster and cleaner page load.