Fast loading full page background

[NardCake]

Hello! Currently I'm working on a project, and I would like to liven up the landing/homepage a bit. So I have rendered out a nice looking image in 4K resolution. Now I imagine setting that as a background image in css would make my website quite slow... I'm curious how Twitter manages to have the fantastic full sized background images on its landing page, without slow loading time or blurriness. It would be great if you have any suggestions, please ask if you are confused.
Thanks!

[JorgeM]

If you visit their site, and download the picture, you'll see why...its only a 32K picture, at least the one that I downloaded. They show different pictures and I bet they are all relatively small. I also suspect that they may have some type of acceleration/reverse proxy/caching/etc... on their end to ensure there is no network delay in getting that picture as well as their other content out of their systems.

[EvolutionFallen]

The image on the Twitter backgorund right now is: https://abs.twimg.com/a/1363712241/t1/img/front_page/[e-mail]
As you can see, it's actually not a very large image, at 1040x660, with a file size of 86KB. They use CSS to expand the image thereafter, which is why you'll notice the image is lower quality on big screens (mine is 1440x900), with artifacts readily apparent.

[NardCake]

That really surprises me! I have a 1920x1080 display and it doesn't appear to be blurry to me... Well thanks for the info, so I size down my 4096x3112 image and have it size accordingly in css. Sounds like a plan I suppose, thanks guys.

[JorgeM]

so I size down my 4096x3112 image and have it size accordingly in css

If you size it down, that will only deal with the display issue, not the actual amount of bytes that need to be downloaded. When it comes to images, your source image should be as close to what you plan on displaying with regard to the orginial dimensions.

[EvolutionFallen]

Ah JorgeM you beat me to it :)
A couple side notes:
Notice how they serve their image off a separate domain, which helps ease the load on Twitter.com.
Another useful tactic is to cache static content such as images.

[EvolutionFallen]

The image might not look blurry per se, but pay close attention to the outsides of edges of objects (such as people), and you'll notice slight smudges of color. This image is a good example of what to look for:
http://i.cmpnet.com/videsignline/2006/02/algolith-fig2.jpg

[NardCake]

hmm here it is sized to the same size as the twitter one. Sort of blurry, is it acceptable though? Or do changes need to be made, making it bigger even?
Thanks!

[TonyG_cyprus]

I always use an optimiser for web pictures. Reduces the file size without reducing the actual size
or loosing quality. Free Web Resizer my fave.
<edit>
Sorry, misleading you... that prog's for resizing not optimising. I use paint shop pro 9 for optimising.

[NardCake]

TonyG_cyprus, I would say it's quite impossible to reduce size and not reduce quality...

[EvolutionFallen]

The image isn't loading for me, but generally you're going to get a bit of blur/artifacts. You need to decide what's acceptable for you and size the image based on that.

[NardCake]

I've taken my 4K image, sized it down to a lower resolution and added some intentional blur on it, I think it looks quite nice for now.

[EvolutionFallen]

Sounds good! Please mark the thread as solved if everything's fine :)