Getting a web page background image to download faster.

[Justin]

Hi everyone,

I used a background image for my web page. The image is in .gif format. This image takes a very long time to download, probably because it's large in size.

Is there a way to optimize this image to download faster whenever my server is queried to serve this page?

[Mr. Wolf]

Yes, make it smaller..


I know a few tricks to optimize a GIF inside photoshop.. PM me and e-mail me the picture, I'll do for you, no problems..



Now the question is, and you should ask it yourself, does a background picture make sense in your design?

Because I know of very few websites where it does make sense and looks good.

[Justin]

Yea Mr. Wolf,

I'm considering removing it entirely. Thanks for your offer of assistance.

[redsox9]

I would second Mr. Wolf's suggestion about the removal of any background images. They often prove to be more of a distraction in most instances. Remember: content is key!

[$eric=me]

I would second Mr. Wolf's suggestion about the removal of any background images. They often prove to be more of a distraction in most instances. Remember: content is key!

Couldn't disagree more. Background images can really enhance a modern website. Visit CSS Zen Garden to see what background images can do for your site.

For optimization it depends on what you are going with for the image (gradients, tiles, etc). Most of the time you can just slice the image into a tiny sliver and use css to style it (repeat x works well for gradients).

[felgall]

With repeating backgrounds you just need a slice one or two repetitions across.

You should work out which of gif, jpg, and png produce the smallest file and use that.

With gif you can reduce the number of colours stored in the image to redice the file size. One using only 16 colours can be about half the size of one using the full 256 and when you reduce to 8,4, or 2 you get even greater compressions.

[sringer]

Couldn't disagree more. Background images can really enhance a modern website. Visit CSS Zen Garden to see what background images can do for your site.

For optimization it depends on what you are going with for the image (gradients, tiles, etc). Most of the time you can just slice the image into a tiny sliver and use css to style it (repeat x works well for gradients).


Ooooh! I love this site.
It's really interesting all the stuff you can do with some CSS!

[torb]

There are several ways to optimize an image. If you have photoshop, open your gif there and click "Save for Web and Devices," then you can toy around with all the controls until you got a image that is a decent size for you. For larger, detailed pictures, go for jpg.

Skip gif, and save as png instead, but chose a palette mode that is quite selective (for example, if you can live with only using 64 colors, the size will be very small.

The "Save for Web and Devices" in Photoshop also strips a lot of the header metadata of the image file which is not necessary, and might save a kb ;)