Firstly, I want you to think that everything is RELATIVE and only experiences from each situation will determine CASE to CASE which will perform better on your project and server.
There are two environments / layers that you have to think about, one is the rendering and the other the requisitions :
Front End Rendering
Rendering on the front end can begin to occur even if the page has not finished loading, ie images can start loading and rendering even without the page completing the download.
Thinking about whether the image is based on64, there may be two reasons why it slows down:
- The internal engine of the browser having to decode the image
- Base64 images using the protocol ( data URI scheme )
data: increase the size of the html page by far, which makes the page slower to be rendered .
In conclusion, data protocol and base64 can make html page rendering and download slower, but you will save requests
Requests in the Back End
Number of requests improve performance, but not on the front-end side, but on the back end, that is, fewer requests, probably better performance, however in the case of the
data: protocol, as I mentioned before, the html page will be larger and then you may still have a new elevation in server consumption.
Browsers try to keep the connection open when they are requesting items from the same page, so if you have multiple images, the browser will probably try to decrease the connections (not the requests), which in a way would help. But note that it is not always possible to reuse the same connection and that the browser will behave exactly like this, each browser has its own way of doing this and will try to operate the situation as it sees fit.
Read more at: link
In this way you will have less impact on the server than static files, since the images will come from the cache in the next requests and it will also make the page download faster, this does not directly influence the rendering process, but I believe static images are easier to render for browsers than coded ones.