Faster loading intensely graphic site?

[Eternal_Howl]

Hey,

I've got a question: - I've done a graphically intense website and like most people, the thing that annoys me about too many graphics on a website is the load time. (it's one step down from using every possible bell and whistle javascript coding one can muster to make it look like you can design websites and yet you suck at it. - you know, water/mirror effects, funky cursors, javascript alerts -enter your name so it can say "WELCOME 'your name'" - etc etc). So I figure, I've got three options: cut down the graphics (it's for an artist so not really feasible), switch to flash for my navigation (great if I didn't have to pay for it as I'm poor and I want to keep the same font on the buttons so I need my own program), or look at another alternative - possibly preloading or something.

Another thing I wondered - are there tutorials on how to create flash from scratch or is it too much hassle and is the software mandatory/patented etc. This isn't really the right forum I've posted in as I'm thinking about css, javascript preloading nav and logo images etc, but I'm looking for some tips on how to improve load time at no cost. I realise minimising on the use of nested tables and instead using other tags may help, which is another option I'm looking at. All positive input welcome

[djr33]

http://www.dynamicdrive.com/forums/s...ad.php?t=24774
http://www.dynamicdrive.com/forums/s...ead.php?t=9270

Flash is fairly limited. It's possible to find some shareware/freeware apps, but not very likely that they'll be extremely powerful.

Do you have a link to your page? Might help.

[jscheuer1]

Preloading won't help, it takes just as long as loading. Give all your users free broadband .

You could try to remove anything (weird special effects, especially) non-essential (from your description, it sounds like a lot of that stuff is juvenile at best), and where images are concerned - OPTIMIZE them.

[Eternal_Howl]

http://chaosdesigns.110mb.com/index.html

Thanks for the replies. As far as all those mirror effects etc - I don't have those, but they are as annoying to me as slow loading pages are. Cheers.

[Eternal_Howl]

I did attempt to optimise some images at one stage, but it seemed unless I paid for good optimisation programs, I wasn't really improving.

I have been reading about using other attributes instead of tables and while this won't increase the load time on pics, it will improve the load time on the over all page, right?

[djr33]

It takes some time to render the tables, but this won't be much in comparison with the media elements.

Having those individual images is too much. You should just place text over them (better for a couple other reasons, too), then have a single background image for each. That's a lot less loading time.

[jscheuer1]

Attachment 1309
*click for full sized

At 4.3 KB (4,338 bytes), those image optimizing programs (Xat.com's Image Optimizer Pro) are worth it though. Even just using Paint Shop Pro, I was able to get it down to 6,060 bytes.

I was also able to get considerable savings using DD's free online optimizer:

http://tools.dynamicdrive.com/imageoptimizer/index.php

It wasn't able to render the image as a .png graphic (which the type of image that it is seems to favor) and reduce its size, but it was able to render it as a 20% quality .jpg (its native format) at 5745 bytes with no noticeable loss.

[Twey]

As Daniel says, what you've actually got in that menu is just two backgrounds and some text. You only need two images for that whole navigation section if you actually mark up the text as text, and you enable your users to use all the features their browser provides for text, such as resizing, reading (in the case of a screenreader), copying and pasting, and the extensive features in the Opera double-click menu, some of which features may be necessary for the user to access your page. The italic white text on the black background is impossible to read for me; there's absolutely no reason that that menu should require Javascript; designing pages to a specific resolution (i.e. using rigid pixel sizes) is a very bad idea and makes for a fragile site; and your markup is very far from validating (which, in this day and age, it should do using the HTML 4.01 Strict DOCTYPE).

[djr33]

John, note that png never will change filesize. It's only compressed in relation to uncompressed files, at a constant level (as much as possible). Since it's lossless, there's no way to make it smaller. PNG 8 format is similar to gif and you might be able to get it smaller with a more limited palette but I'd just go with gif in that case.
PNG is only good if you need a really high quality image. JPG will always be smaller. GIF will probably be smaller, but lower quality.

[jscheuer1]

John, note that png never will change file size.

Almost dead wrong. At 16 million colors, the above graphic would be about 50K in the .png format, much larger than the 4 color/K version I uploaded to the forum. However, you are right, .gif is sometimes better:

Attachment 1312
*click for full sized

It does have a transparent background (slightly less bytes 3.7 KB - 3,722 bytes - than solid), but against a black or very dark page background, that would be fine.

Sometimes though, .png (with limited colors) will be smaller than .gif.