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!
NardCake 30 Posting Pro in Training
JorgeM 958 Problem Solver Team Colleague Featured Poster
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 107 Junior Poster
The image on the Twitter backgorund right now is: https://abs.twimg.com/a/1363712241/t1/img/front_page/cricket@2x.jpg
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 30 Posting Pro in Training
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 958 Problem Solver Team Colleague Featured Poster
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 107 Junior Poster
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 107 Junior Poster
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 30 Posting Pro in Training
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 36 Newbie Poster
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 30 Posting Pro in Training
TonyG_cyprus, I would say it's quite impossible to reduce size and not reduce quality...
EvolutionFallen 107 Junior Poster
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 30 Posting Pro in Training
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 107 Junior Poster
Sounds good! Please mark the thread as solved if everything's fine :)
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.