If you have a performance-focused website, you might consider including base64 inline images on your webpage. But, is this really faster than including an external image?
Suppose the following:
- The user has a s megabits per second internet connection.
- The image size is x bytes.
- The round trip latency is y milliseconds.
- The time for you server to respond is z milliseconds.
If you were to include the image inline base64, the additional file size would be 4/3 * x bytes. This increases the loading time by 125 / 12288 * x / s milliseconds.
If the image was included externally, the additional loading time would be y + z + 125 / 16384 * x / s milliseconds.
So we want to include the base64 image when 125 / 12288 * x / s < y + z + 125 / 16384 * x / s iff x < 49152 / 125 * (y + z) * s
- s = 5 Mbps
- y = 100 ms
- z = 5 ms
Then, we conclude that if x < 200 KB it is theoretically faster to use base64 images rather than external ones. But notice that if we had 200 KB images, it would increase the page load by about 400 milliseconds per image, which is an unreasonable wait for the rest of the page. If we were willing to tolerate an additional 150 milliseconds load time, then we get the limit of x < 75 KB for the total image size (i.e. 1 image of 75 KB or 5 images of 15 KB, etc).
You could order the images from smallest to largest, and base64 include them until you exceed the desired limit.
This method ignores many factors, such as the additional decoding time of low powered devices, additional bandwidth costs and comparative performance of sprites and cached images. However, it may provide useful when you need to include images once into stylesheets or scripts.