Okay, so I am making my site. It is very graphical, and I was wondering if it would be more efficient to keep the backgrounds/buttons for my pages as 1 big jpeg or gif, or to divide each up into pieces in a table... Also, which would be better; gif or jpeg? I know gif is index-based, so I believe that a jpeg would be better... Anyways, I would appreciate it if anyone with some knowlege of images would give me some input.
I think one big image loads faster than a table full of images.
As for GIF (or PNG) vs. JPEG, GIF (or PNG) is better for vector images with no antialiasing and a small number of colors.
BTW, you just gave me an idea:
I'm going to experiment with having a CSS-only site where all the button graphics and visual elements are one physical file, just shifted around by specifying their position. I can't think of any reason this wouldn't work, and it would probably really save download time. After all, that's how some video games handle sprites.
well, that is basically what i might try to do. the image has few colors, and, using an optimized gif with a minimum pallette.. it should work fine. thanks for confirming that.
I hope you post here when you try it. Maybe we can test the load-speeds for your site from wherever on the net we are.
Normal Site: JPG @ High Quality
Although GIFs can have really small sizes compared to JPEGs sometimes.
I think for a site, you should really use cut up images. Using a program like ImageReady (i've never used it, but i've heard its good) is easy to cut up images, but to do it right, do it by hand, it will save you precious bandwidth and will load faster. If you have it, Flash would be an excelent idea.
You should probably use GIFs for the lower color images and jpeg on all the others.
What about load times for a wide gradient, versus a single pixel width one loaded multiple times?
what i do is use them both actually. You should use jpg's for images like photos with lots of colors and fuzzy areas. When you have an image with not a lot of colors and large areas of the same color gif's will be smaller. Also always consider using css. For example when making gradient under your header create 1px wide gif and use css to repeat it horizontally.