3

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?

Robin Layfield
  • 1,599
  • 3
  • 16
  • 14
  • You're going to need some hefty hosting! Have you considered cutting the images into tiles with varying resolutions? You'd display the low res first, then allow the user to switch to high resolution if they wish, or zoom in on parts of the image (so you're only loading the tiles you want to display rather than the whole image). – Jeff Watkins Apr 19 '13 at 13:55
  • There is a certain image type where when it initially loads, it is low quality but becomes gradually more high quality the longer the user is on the page. It doesn't seem to be used so much now but I'll see if I can find a link for you. – Robbie Dee Apr 19 '13 at 13:56
  • Here you go. The technique is called "interlacing" and needs to be applied to the image itself: http://stackoverflow.com/questions/10771920/load-an-image-via-interlacing-from-low-to-full-resolution-html – Robbie Dee Apr 19 '13 at 14:00
  • 1
    I had the same reflexion recently about my last personal website (http://worldisbeautiful.net). Since I want to touch all devices I can, I end up with an unique background with a 2000px width heavily compressed with http://www.jpegmini.com/. – Aurélien Grimpard Apr 19 '13 at 14:17

1 Answers1

1

According to this browser statistic 1800 x 1080 seems a reasonable size to me, if you want to be on the safe side. Maybe your target audience uses bigger screens, you should find that out, if you can.

I wouldn't do a progressive enhancement as you described it. Every user would have to download the image 3 times.

Instead you can use media queries to check the users screen size as shown here. So the users are downloading just what is meant for them.

Edit: This is also an interesting approach.

Community
  • 1
  • 1
Sebastian Starke
  • 5,198
  • 3
  • 24
  • 35