This is not a complete tutorial for making the websites faster. But trying to make a thread with tips of making a website load faster.
Now what are the benefits of loading a site faster that everybody knows.
So I will start with some tips here.
1) Choose good image formats and optimize them for size and quality.
2) If you are using php then you can use compression with putting the below code at the very start of the page. Or in a script you can put this in header part.
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
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.
("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.
-
