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/showthread.php?t=24774
http://www.dynamicdrive.com/forums/showthread.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]

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 (http://validator.w3.org/check?uri=http://chaosdesigns.110mb.com/index.html) (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:

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.

[jscheuer1]

(which, in this day and age, it should do using the HTML 4.01 Strict DOCTYPE).

Day and age? Wouldn't the exact requirements of the page be more important?

[djr33]

Palette based pngs are just about the same as gif format. They also lose the ability to have alpha transparency (replaced with gif-like single color transparency). Only available at the higher bit mode. I guess I can see some variation would cause one or the other to be better in some cases in the way they calculate palettes, etc.
As for the transparency, that's due to setting black as transparent. I'm not sure what program you're using, but it's quite possible to turn that off.

[jscheuer1]

Palette based pngs are just about the same as gif format. They also lose the ability to have alpha transparency (replaced with gif-like single color transparency). Only available at the higher bit mode. I guess I can see some variation would cause one or the other to be better in some cases in the way they calculate palettes, etc.
As for the transparency, that's due to setting black as transparent. I'm not sure what program you're using, but it's quite possible to turn that off.

Why turn it off? That would only result in an image of a larger byte size. Since the page itself already has a black background, the image need not. Even if the page had a light background, the image itself could be given a black one via css, and still benefit from the byte savings of having a transparent background.

I also cropped the image in both my .png and my .gif versions. The original had extra plain black area, mostly to the right, and a bit on the top and/or bottom. If that is required for layout, margin or padding may be added via css, no need to waste those bytes on the image.

Yes, the .png and .gif formats, when based upon a 256 color or less palette are roughly equivalent, that's what I was saying.

[djr33]

Turning it off would save the bytes required to store that there is a transparent color and the id/reference/color (whatever format that is).
Transparent in either palette based image is simply a color, just like black would be. It's not negative space. The pixels are still accounted for and in that case they ARE actually black, just also not displayed as a "bonus" of the format. If you viewed in a gif/png viewer that doesn't transparency, this can be seen.

[insanemonkey]

it could be your 110mb.com sorry to say they suck...

you should try awardspace.com or if you would like to spend somemoney

4$ a month - 1and1.com its ftp and its awesome..

I looked at ur site.. and wow it is kinda slow... but cuase of image sizes i dunno...

try another host and see if it does the same thing....

and 1and1.com is awesome...

[Twey]

Day and age? Wouldn't the exact requirements of the page be more important?I've never yet come across a (sane) page that can't be rewritten using 4.01 Strict. It's designed to be general-purpose, and so it is.

[jscheuer1]

Turning it off would save the bytes required to store that there is a transparent color and the id/reference/color (whatever format that is).
Transparent in either palette based image is simply a color, just like black would be. It's not negative space. The pixels are still accounted for and in that case they ARE actually black, just also not displayed as a "bonus" of the format. If you viewed in a gif/png viewer that doesn't transparency, this can be seen.

That all sounds logical, but I have long ago given up on hard and fast rules for what makes a smaller image file. When optimizing for the absolutely smallest byte size, I just go with the smallest resulting file and don't ask questions. Usually, equivalent .png is smaller than .gif, but not always. The same is true about transparency, as you mention, but not always. There are many other rules of thumb that aren't always true with any particular image.

I use primarily Paint Shop Pro and Xat.com's Image Optimizer Pro. The Xat product is far superior to Paint Shop (which has more and better features for preparing an image for optimization) for many things in the actual optimization process, but once you get the smallest image that you can in Xat, sometimes you can milk a few more bytes out of it by re-saving in Paint Shop. Now I don't mean for .jpg, that would be just be adding a little more lossiness to the image, but for the lossless formats it can shave additional bytes, usually enough to make the extra step worthwhile.

[djr33]

Very strange. Seems it must be applying the format incorrectly, or improving it, depending on how you look at it.

It would be very difficult to verify any of this in the format, so... just goin w/ the smallest seems to make sense.

In Photoshop with gif, transpareny has absolutely no effect on filesize, affirming my earlier assertion, but it seems, as I said, Xat is doing something weird (good).

PNG, however, is 2kb larger and transparency adds .16kb.

[Eternal_Howl]

WOW! Thank you all for your posts. Hey jscheuer1, what program are you using? I've been wanting to figure out an easy way to make it transparent for ages so I can fiddle with the image in other programs - as I am NOT a graphics master (as you can tell).

The reading I've done advises that png format tends to be bigger than jpeg or not really able to be optimised so I've stuck with jpg. Also, I have heard that gif is less optimisable as well - in terms of colour loss etc (for black and white it's no big deal but colour is a different matter).

Twey - you said something about there's no reason why the menu should require javascript - okay...I'm all ears - what are the other options to ensure that I only have to keep updating one page? CSS? I just had issues with a lot of scripts in that they weren't doing what I wanted them to and basically work within my means so to speak - only altering things I know how to alter.


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, Twey - what do you mean about marking up the text as text? Do you mean just using text links in a coloured cell?

This is all valuable feedback - THANK YOU everyone!

[djr33]

Text with a background image of that layout. Text, not pixels, for the words.


As for jpg, you can read a long post I wrote. I'll link below.

In short, gif is better for simple GRAPHICS and jpg is better for PHOTOS. Lots of colors? JPG. Simple? GIF. That's about it. PNG is sorta like gif on steroids... sorta. Better in some cases. Vague, as is clear from the last few posts.

http://www.dynamicdrive.com/forums/showthread.php?t=24774

[Eternal_Howl]

I have thought about going for my own hosting - I have had paid hosting and my own domain before - my pages loaded quickly, but then I knew not to load them up with heaps of graphics and if I remember rightly, my navigation was text-based as opposed to image-based. The thing is, I like the font, and so does the artist, so it's a matter of finding something that will enable me to ensure the font can be used. There was a program years ago, (I think it was called Weft), it was supposed to make any font you had installed on you site viewable to others (even if they didn't have it preinstalled on their computer) - I think it was a pile of rubbish and a waste of time!!!

[Eternal_Howl]

Insane monkey, thanks for the mention about Awardspace - I've just been to their website - do you think their hosting is 'faster' than 110mb? I know 110mb isn't high speed as far as servers go, but the thing that I did like about it was no ads, no pop unders or popups etc - but I see the awardspace says that too - for free or paid.

[jscheuer1]

If your host is contributing to a speed bottleneck, it would probably be a good idea to switch to one that does not. However, no matter how fast your host is, that will not change the speed of slower users, and general internet conditions.

Now about optimization, I've already mentioned in my posts in this thread the programs I used*. I also explained a bit why .gif and .png are sometimes better than .jpg. The main thing is that they are lossless, and that for simpler, 'line drawing' type graphics of a limited number of colors, they can achieve a smaller file size with no apparent loss in image quality. The .jpg format is best for optimizing photographic type images. These are, however just rules of thumb, and with any given image the best format to use is the one which achieves the smallest byte size with the least amount of loss of quality.

*Previously mentioned:

I use primarily Paint Shop Pro and Xat.com's Image Optimizer Pro. The Xat product is far superior to Paint Shop (which has more and better features for preparing an image for optimization) for many things in the actual optimization process, but once you get the smallest image that you can in Xat, sometimes you can milk a few more bytes out of it by re-saving in Paint Shop. Now I don't mean for .jpg, that would be just be adding a little more lossiness to the image, but for the lossless formats it can shave additional bytes, usually enough to make the extra step worthwhile.