Loading high res background image

css background loading high-resolution
art_wired picture art_wired · Jun 1, 2011 · Viewed 14.3k times · Source

I have a colourful background image that is 2000px x 1500px and because of the details I am saving it as a jpeg that renders at 1.1 MB. I am using the CSS background property to render the image. So being relatively new to web dev and working with a client/designer that's not open to a change of design at this point in the process, what should I do to help this image load blazingly fast. I don't know if it makes a difference but the site is using Joomla 1.5.9. This is something I've always wanted to understand but have had trouble uncovering solutions for... I hope someone can help!!

Thanks everyone!

Answer

zneak picture zneak · Jun 1, 2011

There's no way to make images magically load faster. Sometimes, though, splitting an image in smaller images allows for surprising size gains; so if it's not out of question for your CSS layout (it typically is, though), you could try this.

Another possibility for you would be to use progressive JPEG images. They are encoded in such a way that enables browsers to display a progressively more precise image as it loads. This means that at first, the image appears blurry (or incomplete) but with full-dimensions, then it progressively gets sharper and better. It's well-suited for images meant to load slowly (or at least, images acknowledged to load slowly).

Related questions

Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More