One thing I'm wondering about to see if the idea has any merit or is simply the dumb thought of a new web developer, is whether it's a good idea to have multiple image directories.  What I mean is this:

In the interest of increasing performance and reducing bandwidth, while handling multiple screen sizes and densities, I'm considering creating all of my image sizes in advance.  That's fine and not exactly revolutionary, however, I'm wondering about creating multiple sets of the images (each with a thumbnail, general and detail image) that will help me address different size screens AND different density screens.  What I'm thinking is to use lower quality images for lower bandwidth devices (mobile phones) and higher quality images for larger screens.  Additionally, there would be size differences as well based on screen size.

The idea is to set an image directory variable after detecting screen size and density then use that throughout.

This would allow me to have smaller images for older phones, larger images with lower quality for new phones (that have high-density screens but restricted bandwidth) and larger images with higher quality for the bigger desktop screens that are probably on wi-fi.

Is this a path worthy of trying or should I just make one set of thumbnails, generals and details and be done with it?

Thanks,