0

So I'm using Supersized to scale my background images and that's all good and well. The problem is that if I want the image to look good at multiple resolutions, it should be big, e.g. 2000 px * 2000 px. But why should someone with a resolution of e.g. 800 * 600 need to download such a large image? So what I'd like to do is to have, let's say, 3 sizes of the image (1024 * n, 1680 * n and 2000 * n) and, depending on the resolution, the smallest possible of them would be sent to the user. Any thoughts on how I should implement this?

Andrija
  • 937
  • 14
  • 33

3 Answers3

1

Using Javascript's window.screen.width will return you the actual pixel width of the screen, so then you can use a simple if statement to select which image you will use.

if(window.screen.width < 1000) {
    image = "small.jpg";
} else {
    image = "large.jpg";
}
shanethehat
  • 15,460
  • 11
  • 57
  • 87
0

you can use $(window).width(); (http://api.jquery.com/width/) to determine the user window width and then decide which image do you wish to use - 

$('#yourImageId').attr('src', 'images/alt/imagename.jpg');
kleinohad
  • 5,800
  • 2
  • 26
  • 34
  • Doesn't this return the width of the browser rather than the screen? What if a 180P user maximises their browser after the check has been performed? – shanethehat Jul 12 '11 at 09:43
  • look at this: http://stackoverflow.com/questions/1091540/how-to-get-screen-resolution-of-visitor-in-javascript-and-or-php – kleinohad Jul 12 '11 at 09:47
  • Sorry, I don't follow. The reason I suggest using the width of the screen rather than the window is because the user may have a high res screen but not have their browser maximised. In that case you would deliver a low-res image, which would look nasty if the user then decides to maximise their screen. `window.screen.width` returns the actual monitor resolution: http://www.javascriptkit.com/howto/newtech3.shtml – shanethehat Jul 12 '11 at 09:52
0

Many ways:

  1. As others said, get the width of the screen, then based on that, manipulate the background image source of the element.
  2. Use Less to create programmatic CSS at client-side
  3. Use the concept of responsive-images
Saeed Neamati
  • 35,341
  • 41
  • 136
  • 188