Compress Graphics of site using PNG and not GIF for Transparent

For Transparent we can use PNG formats and for NON Transparent we can use JPG formats

PNGs were designed to be a superior replacement for the Graphic Interchange Format (GIF). GIFs are limited to 256 colors (8-bit color palette), one level of transparency, and the Lempel-Ziv-Welch (LZW) compression algorithm that was patented by UNISYS. In most cases, PNG files from the same source images are smaller than corresponding GIFs. PNGs use the “deflate” compression algorithm, which is 10 to 30% more efficient than LZW compression.

By design PNGs have some advantages over GIF images. PNGs offer more choices in color depths than GIFs, including 8-bit (256 colors), 24-bit (8 bits per channel), and 48-bit (16 bits per channel) truecolor allowing for greater color precision and smoother transitions. When you add an alpha channel, PNGs allow for up to 64 bits per channel. PNGs can have index color transparency (one color) or alpha transparency (multiple levels) useful for smooth shadow transitions over other images. In summary, the advantages of PNGs over GIFs are:

• Alpha channels (multilevel transparency)
• Variable bit depths
• Cross-platform gamma and color correction
• Two-dimensional interlacing
• More efficient lossless compression (LZ77 vs. LZ78+)

Using image sprites

If you use a lot of background images in CSS, it’s a good practice to put all the images you need in one big canvas. You can then set background-position in CSS to get the image you want from the big image. The advantage here is that instead of having to make numerous HTTP requests on a page, the browser only needs to make one request for the big image and thus speeding up load time. Some people usually create a sprite for images of the same purpose, for example, a sprite for navigation images, a sprite for logo images, a sprite for footer images, etc, but there is no reason why you can’t create combine all images, be it navigation, icons or footer, in one single sprite.

Learn here how to create image sprite

Minify and Pack Your JS and CSS files

Instead of Using Multiple JS and CSS files while loading a website, use only one file of JS and one file for CSS, they are many tools that are available to achieve this.

Here is one of such tool

http://code.google.com/p/minify/

You can use this online tool to compress your Javascript files using the above algorithms.

Caching Files on Server

Here is a simple caching method you can use with .htaccess file. It simply sets the expiry header and cache control for browsers so the browser keeps certain components in its cache and retrieve them from the cache rather than making a new HTTP request every time.

#604800  = 1 week in seconds
<FilesMatch "\.(gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

#86400 = 1 day in seconds
<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=86400"
</FilesMatch>

Multiple Domains

If your are targeting a high volume side, Then its always time for you to have a separate sub domain for all Images ,JS, CSS.

This will help you to load all the files at parallel

for example.

If your domain name is domain.com

then always use js.domain.com for all your javascript files

img.domain.com for all your images

css.domain.com for all your Style sheet files.

Benchmark and Test

Always benchmark, test and optimise more whenever possible. I use Firebug Network Monitoring Tool and YSlow for this purpose.

ScienceRoll – http://scienceroll.com/

Starmind – http://blog.starmind.com/

Wisconsin – http://blog.discoveryeducation.com/wisconsin/

Next Gen Enterprise – http://dbmoore.blogspot.com/

Create Digital Music – http://createdigitalmusic.com/

Listio Web 2.0 Directory – Recently… – http://www.listio.com/web20/

AuthenticJobs.com Job Listings… – http://www.authenticjobs.com/