I am currently experimenting with the best way of optimising images to get the smallest file size, whilst still retaining good quality. These images will be served for mobile and retina devices.
I will already be loading different images for smaller devices than I would on desktop.
My current technique for mobile images is creating the image in photoshop twice as big, then in photoshop save for web at 0% quality (jpegs). Then let the image resize down in the browser. This works well for normal images but the quality is noticeably poor for retina.
I have tried 4 techniques
1) Save as normal size, and save at good quality
2) Save image twice as big as above, but instead of 0% compression, maybe try something like 10 or 20% compression, so better quality
3) Save image 4x as big, then save for web at 0% compression.
4) Use pixel-ratio media queries to determine if retina, then serve a bigger image.
I have tried the above, no.3 gives the best results but also biggest file size.
Would like to hear some of your suggestions on how you handle images, and if you bother with retina.