What makes for fast loading header graphics: big JPG or segmented GIFs

[LuBi]

I was wondering what would load quicker and or cache better. What the ideal header would be.. I've got this header seperated into 2 big JPGs right now the top and the bottom button bar. For some reason I keep thinking using smaller GIFs is better because I think i read somewhere they cache as the JPG does not..? Now with that being said the JPG seems to cache fine.. The 2 big JPGs equal about 17kb in total and the segmented GIFs total 15.7kb.

So what do you guys think i should do?

[Aros]

Definitely use GIFs, they're usually smaller and they do not suffer quality-loss.

[Dean C]

I'd beg to differ. I've often found saving as a jpg with quality 60 in photoshop maintains most detail on the image and makes for a lower file size than a gif

[jamesyfx]

GIFs are better when you don't have a huge amount of colours in them.

[LuBi]

GIFs are better when you don't have a huge amount of colours in them.

That's what I was thinking, because you can lower the color (ie. from 256 colors to 64). This is what I was doing for my header most of it are small GIF's one main image I use a a background for a cell but it has lots of detail so it's a JPG at 70%.

So now is it ok to run a table as a header all split up? I've got the table fitted Height and Width, and I've got all cells fitted Height and WIdth to the segmented images. I remember seeing somewhere it makes tables load quicker if you have them fitted to size, same as an image.. if i give it dimensions it will load quicker..?

[DirectPixel]

I was wondering what would load quicker and or cache better. What the ideal header would be.. I've got this header seperated into 2 big JPGs right now the top and the bottom button bar. For some reason I keep thinking using smaller GIFs is better because I think i read somewhere they cache as the JPG does not..? Now with that being said the JPG seems to cache fine.. The 2 big JPGs equal about 17kb in total and the segmented GIFs total 15.7kb.

So what do you guys think i should do?

It depends on how you're coding the site, how many visitors you have, what type of browsers they run, and how much you value image quality as opposed to load time.

Depending on the size of your image, either GIF or JPG may be best for you. Generally, small images that are not photos tend to show up clearer as GIF's. On the other hand, larger images such as photos generally tend to show up better as JPG's.

When exporting JPG images, bear in mind that 100% quality is usually unnecessary and imperceptible to the average user. I usually export my JPG's at either 80% or 90% quality, depending on the circumstances. You could try 60% quality as recommended above, but I've always found that any quality under 70% starts to show visible color distortion, pixelizations, and dithering.

If it's a graphical header, it will most likely depend on what it looks like. If it's something that was made using just a handful of colors and gradients and such, you're probably better off using GIF. If it's a collage of photographs or other quality-dependent pictures, then a JPG will probably be better.

With that said, I would definitively NOT recomment cutting up your GIF's. It will slow down the user's loading of your page, since most browsers only have a limited number of connections for each page. In addition, each image will be an additional request to your web server.

A better alternative to slicing up your images would be to use CSS and have your particular header image as a background. This way, your textual content in your header can still be accessable even if your image hasn't finished loading. Best of both worlds.