How to reduce background image loading time?

Hi,
Is there any way to reduce big background image loading time on web page? as my one website has bful image background bt it lost its glory due to long loading time

 

How about an URI to your site?

There are different "things" you can do to speed up loading time. Depends on your CSS/HTML, too!

 

there is no good way, You can try to convert the image format to gif . It will be smaller.

 

I personally wouldn't recommend using the gif format for a background image, in your case your best bet is JPEG format, you might save a few kilobytes. What format are you using now, out of curiosity?

 

GIF is not smaller if you use good quality. JPG is the better choice but as I said there are several things you can do (depends on the technique you use for displaying the background image (example here: http://xhtml-valid-websites.com/forum/Thread-full-size-background-with-jquery-navigation ).

I would compress the graphic with the help of Google page speed addon (more info here: http://www.cookielessdomain.com/blo...bsites-graphic-files-with-the-help-of-google/ ).

 

I am using jpeg format maximum optimized for web by photoshop. website is bandhavgarhjunglelodge(dot)com. this is pure static website.

 

I am asking for if there is any script which can hlp to retrieve image earlier from server or may be something else
perhaps as per html, css & image optimization I did my best.

 

Google Page Speed reports:

Optimizing the following images could reduce their size by 4.5KiB (19% reduction).

    * Losslessly compressing http://bandhavgarhjunglelodge.com/img/sign-john.png could save 2.6KiB (16% reduction). See optimized version or Save as.
    * Losslessly compressing http://bandhavgarhjunglelodge.com/img/ind-contact.png could save 757B (43% reduction). See optimized version or Save as.
    * Losslessly compressing http://bandhavgarhjunglelodge.com/img/in-visit-resort.png could save 687B (21% reduction). See optimized version or Save as.
    * Losslessly compressing http://bandhavgarhjunglelodge.com/img/in-booknow.png could save 474B (24% reduction). See optimized version or Save as.

Code (markup):

Besides that, nearly the whole site is done with graphics... that's why it loads slow like hell (at least for me in spain on a 20mbit cable connection).

Other Google Page Speed suggestions (score is 87/100):

Leverage browser caching
Serve static content from a cookieless domain
Enable compression
Minify CSS
Defer loading of JavaScript
Minify JavaScript
Optimize images
Specify a Vary: Accept-Encoding header
Specify image dimensions

Code (markup):

Some of the graphics could be "outsourced" to CSS, e.g.

<img width="118" height="28" alt="visit resort" src="img/in-visit-resort.png">

Code (markup):

Using image maps is ... not the best technique

Reduce your usage of images (this tiger could be part of your bg image)

 

Preload images with JS, just Google for it (there is even a CSS version, afaik)

By the way... http://bandhavgarhjunglelodge.com/img/in-bg.png ... is 1.6MByte!!!

You are forcing your visitors to wait and download a website that is 2.2MByte (nearly all 2.2MByte are graphics).

You could resize the images to max. 1024x768 or something else.

http://bandhavgarhjunglelodge.com/img/lwr-bg1.jpg is 1600x1693 pixels (why?) and http://bandhavgarhjunglelodge.com/img/in-bg.png is 1175x692 (resized in html)...

 

well what is replacement of image map? coz that image is slightly elevated i can not use text

 

is this css sprite tech?

 

You can not combine jpg and png to use it as a CSS sprite. I would "insert" the tiger into the background image and as I said reduce it to 1024x768 pixels.

 

Depends on what you (or your client) wants. A fast loading page (good for visitors) or a slow loading page styled with an image map (looks nice but is loading slower).

The point that slows down the site is definitely the 1.6MByte PNG (there you should start working).

Also some tweaking of the webserver can help (browser caching for example).

 

ok it means i have to create separate background image for index page. but I can not reduce bg image size, coz client has to see this site on 1400 ressolution, and it will get blurred if i will reduce size, and.............. my designer will kill me

 

but i used image map for top navigation bar, which image is png, true. that i can use with css sprite. isn't it?

 

Depending on statistics not every visitor will have 1400 px resolution.

Just take a look again here: http://www.xhtml-valid-websites.com/demos/full-size-background-with-jquery-navigation/

Just look at the @media parts (that is used for the full background image)...

CSS

img.bg {min-height: 100%;min-width: 1024px;width: 100%;height: auto;position: fixed;top: 0;left: 0;display:none;}

@media screen and (max-width: 1024px){
img.bg {left: 50%;margin-left: -512px; }}

Code (markup):

HTML

<body> 
<img src="images/website-background2.jpg" class="bg" alt="" width="" height="" /> 

Code (markup):

More explanation here: http://css-tricks.com/perfect-full-page-background-image/

In the comments are some other solutions aswell.

Personally I would not use full size background images... I would do it in another way (only parts of the screen with an image up to 1400px or so).

 

With some work it is possible to "convert" the image map into an UL with CSS sprites, yes.

But that is not your main problem. Your main problem is the picture with the tiger, the PNG-24 file that is 1.6MByte.

 

thanks CSM.