Interlopers.net Forum - Half-Life 2 News & Tutorials

Whats a good file size for a website, including html/php files, css files, and image files. I did google search but could only find a post from 2003 (to old to be of use).

Either way I'm coding a layout for someone and its extremely grfx intensive, I haven't hit 1mb yet but I'm predicting I'll be close to 1mb by the time I finish. Opinions?

And yes all photos are compressed, and I plan on compressing CSS files once I'm done so yea..

Just make it as small as you can.
If you're using PNGs for the images, try to make them in such a way that you can reuse as many of them as possible, and try to make them in such a way that you can use indexed colors. If you're using JPEGs, keep in mind that you start to get diminishing returns around 92-94 quality, and to do a .5px gaussian blur before you save as JPEG to get a little better compression.

Also, how do you plan to compress stylesheets?

I'm sticking to all .gif images so far no need for .png (except for logo) or .jpg at all.

Stylesheet compression =/ You don't get much out of it, basically it just takes out most of the whitespace from the stylesheet, also helps prevent theft as it becomes incomprehensible. lol

Oh, just removing whitespace? Don't bother, it will only make things worse IMO. Non-indented code is hell. Keep your code easy to read.
And GIF is good; you can index GIFs, too.

You don't need to keep code readable on a production environment. Just need it for yourself. Compressing all your assests can make a difference.

However in your case image compression will make the main difference. Google around for some advanced techniques with Photoshop.

website or webpage?

Anyway, best way to reduce loading times is not decreasing image quality, its decreasing images. Especially layout images are best grouped into a single image and then using css's offset reused many times. (ergo, only loading a single image instead of 100's of smaller ones).

zombie@computer wrote:
Anyway, best way to reduce loading times is not decreasing image quality, its decreasing images.

I've tried but its very heavy on the gradients, and I'm already utilizing CSS sprite sheets.

Gradients? Oh, just use a 1px by whatever image and tile it in Y or X.

There are several good slides on here about front-end performance, must read if your site will have high traffic:

http://blogs.keynote.com/the_watch/2009 ... ation.html

dissonance wrote:Gradients? Oh, just use a 1px by whatever image and tile it in Y or X.

Would be ideal, however I didn't make the .psd and this guy put like these like circular highlights over the gradient. xD

It sucks when you have to code non-code-able layouts. =/

Chop up the output image and make the highlights semi-transparent PNGs.