Large background CSS trick

Recently I was working on project where there was no chance to use pattern, single color or any background repeat image. It was all about this silly grass, with lots of details, background on full page. Image had 2000px width and 3000px height, JPG file reached ~700kb in mid quality.

The problem is when website is loading, first CSS file loads and then the images from background properties, but they’re showed only when are fully loaded. So there is for a long time (700kb file) no background for HTML body.

The trick is super simple:

  1. Blur the background and compress JPG to low quality. You will get 40-50kb JPG file. 
  2. Use this low quality image for html tag in background-image attribute.

Now when page is loading, user will get super fast this low quality, but proper background. In the mean time final background will be loaded later with no sudden ‘blink effect’, but like a ‘sharpen’ current one. It’s close to how is browser loading images from src attribute of img tag.

You can use also media queries to manage background, but you need to make more background files. It’s only worth it to add mobile version of background - save the unwanted kilobytes!

PS. You can follow me on twitter - @macpankiewicz