I'm building a portfolio site that depends on having beautiful, high quality photographs displayed at full size in the browser window.
I'm using a combination of CSS3 background-size: cover tags and this little snippet that can substitute in a higher-resolution image for higher-resolution devices:
http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/
According to that article, I need at least three versions of the image, one at 1x, one at 1.5x and one at 2x but these have the potential to become absolutely massive.
Is there on optimum size of image where it will scale well enough on a large screen but not have a huge file size and download time?
Should I consider progressively increasing quality the longer the user stays on the page? So a low quality / resolution image loads first and then is replaced with a higher one?