Making websites load faster

Nice one -Nick-, thanks!!!!!

Cy

3)plan your layouts in advance, and try to minimize your css and gfx.
4) use external css, and dont imbed it into your pages.

5) remove redundant formatting and tags - especially if you're using a wysiwyg editor

Yahoo's 13 Rules to make web sites load faster:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

6)Remove large areas of whitespace (such as where there are indented tags)

There is a time and place for png, gif or jpg. Actually, except for animation I don't know any time to use gif (png has better compression). But onwards...first give some background info...

Generally, for photos use jpg.
For line art (drawings, logos etc) use png.

For jpegs you can set the compression ratio. There is no standard range for this ratio; some graphic programs use 0-255, some use 0%-100%. I find 80% (or 80% of 255) to be a good quality but a bit large (file size). Quality goes down because jpeg compression is "losey".

PNG files are not "losey" so the compression is not as good for a photograph as a jpeg but the PNG image is cleaner. PNG is worth consideration for a small photo where you want a clean non-losey look, and a small file size.

Now to knock your photo sizes down to 1/2 size you can set your PNG files to be palette based rather than 24-bit. For a photograph, this will affect image quality in a different way than jpeg does. For PNG files, quality loss this means fewer colours in the image. For very small photos this color loss will make no noticable difference at all.

Also, even if you are using PNG for line art, be sure to check its size if it is paletted. It will almost surely be smaller than the 24-bit version and it is possible for art of few colours to shrink down to 1/8 size.

I use a free program called GIMP (gimp.org). It give great control over image creation of many different formats and is a great tool to learn and try things out.

PNG's are lossless, thus large in filesize, and IE6- doesn't support transparency (without some filters). I seldom find a case where a PNG beats using GIF or JPG (on the web). We're talking microseconds here so it really boils down to preference.

DylanButler said:

PNG's are lossless, thus large in filesize, and IE6- doesn't support transparency (without some filters). I seldom find a case where a PNG beats using GIF or JPG (on the web). We're talking microseconds here so it really boils down to preference.

Click to expand...

As I said in different words:

PNG files are not "losey"

Click to expand...

("losey" is a word used in the technical literature.)

And IE does support transparent PNGs to the same degree they support transparent GIFs. IE does NOT support the alpha channel however it does support a transparent palette entry.

I just posted examples on my site: http://upwithabang.com/png-transparency.html

There you can see a transparent PNG that works in IE following the method I described.