Full screen website background

A new project of mine is using full screen background images.

After I read some articles on the web, I still had some technical questions…

  • for people with low internet speed, it seems better to give low quality jpg’s (…%) than low resolution (…px on …px) picture. As I have the impression that when the browser scales quality drops far quicker.
  • Should I precut some images according to the most common screen ratio’s? like 16:10, 16:9, 4:3, 5:4?
    – or can I group some ratios?

Thats it,
Hope that you all could assist me on this one…


Small filesize counts; assuming you are just referring to the wallpaper or BODY background image only. Having predefined fixed dimension images dimensions/aspect ratio is not really the way to go even if you knew the page ratio you cannot guarantee the browser will be set to those values.

With javascript you can figure out what the dimensions (and thus ratio) of the current screen are.
Depending on this data you request the corresponding picture…

The question is… is it worth the effort?

Yes, I know assuming the user has JS enabled and I don’t most of the time and the answer to the question is it’s not normally worth the extra effort assuming we are just talking desktop screens and not mobile devices, etc.

We’ve done plenty of fancy background design images where the customer had a graphic designer do a design and asked us to piece it together. The truth it, it just takes a lot of bandwidth. Use either a colour for your background, a SMALL image (less than 50kb I’d say) or use an image that can be repeated.