Question

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?

Answer 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";
}