Right now I'm base 64 encoding them and using data uris. The idea was that this will somehow lower the number of requests the browser needs to make. Does this bucket hold any water?
What is the best way of serving images in general? DB, from FS, S3?
I am most interested in python and java based answers, but all are welcome!
Right now I'm base 64 encoding them and using data uris. The idea was that this will somehow lower the number of requests the browser needs to make. Does this bucket hold any water?
This is most definitely a bad idea: It won't work in IE < 8; it increases the data volume served by 33%; and it makes the images completely uncacheable.
I'd say you should serve images as proper image resources - whether as separate files, or maybe as CSS sprites as @Nick suggests, will depend on their quantity and size.
I would definitely take a look at CSS Image Sprites, decent write-ups here and here.
The concept is pretty simple, combine your images into one, show only the slice you need as a CSS background. This lets you lower the number of HTTP requests from many images into one or more (group your small images in sprite maps as appropriate) and have fewer images to maintain, the CSS just has some background coordinates in there.
Also, as with any static resource, make sure your cache headers are set correctly, so the client isn't fetching it needlessly.
Data urls will definitely reduce the number of requests to the server, since the browser doesn't have to ask for the pixels in a separate request. But they are not supported in all browsers. You'll have to make the tradeoff.
Nicholas C. Zakas has written a tool that makes it easier to use data URIs in css, and also contains an IE6/7 compatible fix:
CSSEmbed also supports an MHTML mode to make IE6 and IE7 compatible stylesheets that use internal images similar to data URIs.