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
Recommended Answers
Jump to PostIf 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 …
Jump to PostThe 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 …
Jump to Postso 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 …
All 12 Replies
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
EvolutionFallen
107
Junior Poster
NardCake
30
Posting Pro in Training
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
EvolutionFallen
107
Junior Poster
EvolutionFallen
107
Junior Poster
NardCake
30
Posting Pro in Training
TonyG_cyprus
36
Newbie Poster
NardCake
30
Posting Pro in Training
EvolutionFallen
107
Junior Poster
NardCake
30
Posting Pro in Training
EvolutionFallen
107
Junior Poster
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.