Loading large background images

Question

I've recently stumbled upon several websites that use large, high quality images as background images. I love this look, but I'm obviously concerned with load times.

Here's an example: http://bit.ly/1duLlYy

To me it looks as if the image is being loaded with CSS. But there has to be another way they are doing this, since there isn't a load time. This may be stupid, but I don't think it's server side, otherwise they image link wouldn't be in the CSS document, would it?

I'd appreciate some feedback on best practices for this.

Thanks.

Answer 1

I presume you're asking this question, because you found it surprising that the image didn't load "after" the page?

My favorite trick to prevent "FOUC" (Flash Of Unstyled ontent) is to base-64 encode such images into your CSS. It's essentially embedding your images in your CSS, and the browser won't render the page until the entire CSS file is downloaded.

This will cause your CSS file to be large, and IE8 has limitations on file size, but it's a really easy solution if you have a build process or a CSS preprocessor like LESS.

Answer 2

Loading images is incredibly complicated in html/css. In the page you linked, the images actually aren't as high quality as you think based on file size. They are giving the illusion based on background.

To load images though, there's tons of tricks if you google around on it:

• Caching is key (don't load it multiple times)
• Get the smallest file size possible
• Use sprites when possible - browsers have only so many concurrent connections
• The example you showed displayed a loading bar which hid the download time (use this sparingly,it's a double edged sword in my experience).
• Control rendering order
• delayed rendering
• If only have to support html5/css3 checkout svg files.

Hope that helps... unfortunately there isn't a magic answer to your question, it's all about tradeoffs and what to use in your specific example.

Answer 3

It's being done with css. They are using the images as a background then applying background-size: cover; to it. I use this often when doing full page slideshows. The quality of the image depends on the resolution the image is. In this case its 1600px wide.