How to combine multiple images fast for page views counter

Question

How can I combine multiple images, such as base image with logo and number of digits images to display graphical counter with pageviews count, updated dynamically?

It should be very fast, with thousands of renders per second. User should see counter image without Javascript and with single img tag.

I prefer to implement that counter with Python using PIL library, but other solutions welcome as well.

Answer 1

Precompute for the given background the image of a single digit (for each digit 0 ... 10) at each digit position. Then to create arbitrary number you only have to paste the correct images next to eachother, but you won't have to do any alpha blending. Therefore this must be more efficient.

Also, if certain page counts are more common (e.g. page counts < 10000) you might want to precompute these (10000) complete counter images to serve those directly.

EDIT: You can do this with python PIL, or any other method. If you have a specific difficulty with PIL then please ask a more direct question about the problems you have encounterd.

Answer 2

If you really need to handle thousands "renders" per second I would not suggest to generate the images on the fly. How about precomputing n images where n is the expected (you might want to be generous here) count you have to handle?

I know you state that you don't want to use javascript and you only want one img tag, but I would recommend to reconsider pushing visualization to the client side as you would burn unnecessary resources if you really get the load you are expecting (thousands hits / second, every hit incrementing the counter and generating an image using PIL).

Answer 3

Since the background is uniform in your example, render the string "0123456789" and use CSS sprites to build the counter.