What is the difference between the following two pictures?

Well most likely you have to look really hard to tell a difference, if even then you can, and hopefully you can’t at all.  Maybe when you brought up this page you noticed that the one on the left took a little longer to load?  The picture from the left was taken directly from my digital camera and re-sized to fit on this page.  (Unfortunately, I can’t claim that as my Christmas tree it belonged to my brother and his wife).  The one of the right was optimized for the web for maximum clarity, but also to be web friendly.  The first picture is 97KB and the one on the right is 22KB.  The one on the left is over four times the file size!  This is a small picture also, imagine if you have a much larger picture!

Optimizing graphics for the web is something that is very important and although many people know that it’s good to do, I think without a full understanding of why most people simply don’t spend the extra time on this.

Optimized web graphics provides multiple benefits including:

1. Less storage space on the server
2. Less bandwidth is needed to process the file
3. Less storage and bandwidth needs mean that hosting cost are decreased
4. Faster file and page loads correlate to a positive visitor experience which can lead to more visits

Also optimizing web graphics is environmentally friendly!  By reducing the load you’re requiring of web servers you could extend the life of the machines resulting in less computer waste.  Using less storage space and bandwidth also results in a decrease in electricity consumption.  The use of dial-up connections continues to decrease those users will definitely commend you for making their browsing experience more enjoyable.  On a high speed connect the difference between a two seconds load and three is minimal this could add many seconds or even minutes to page loads for dial-up users.

So let’s recap:  Optimizing web graphics are good for web servers, good for Internet bandwidth, good on our wallet, good for our clients, and even good for the environment!

What do I need to know to Optimize Web Graphics?

Although the .png format continues to break into the market I’d still try to stay away from using it.  The two main file types for web images are .jpg and .gif.  For a basic rule of thumb .jpg are for pictures and .gif are for graphics.  This rule stays true for 95% of pictures, but there are times when you can cut off a few extra kilobytes with graphics using .jpg.

So let’s look at how we optimize using Adobe Photoshop CS3.  After editing your image you would then go to File -> Save for Web & Devices… In earlier versions of Photoshop I believe it simply says Save for Web.

This would then bring up a screen where you can save the file for different formats and at different settings. In his picture we have the original and the optimized one where we can see what the size is and look to make sure that we aren’t losing any quality.  For JPEG’s the settings Low, Medium, High, Very High, and Maximum are probably all that you will ever need.  For a GIF the Colors settings are the quickest and easiest thing to change.  Depending on how many colors are in the graphic and any gradient designs you maybe be able to down as far as 16 colors.  For most graphics you can get away with 32 or 64.

Final Notes

Don’t be afraid to tinker around with any of the setting in the saving for web window.  Keep in mind that it is possible to over optimize.  You want to get the file size as small as possible without losing any of the visual quality so it’s critical to find a balance and every image is different.  If you optimize a JPEG to much it will look blurry and a GIF tends to look pixelated.  Quality graphics and pictures are very important to your site so use your best judgment to optimize but don’t compromise site quality to save a few KB of download.  Personally, I am always willing for my files to be a little large and look slightly better.

If you don’t have have Photoshop or the change to throw on on a copy, then Picnik is a wonderful editing tool that is completely web based and free for basic use.  Even if you do have Photoshop it’s probably worth checking out.

So make sure that you do your part to keep the web a faster and bandwidth friendly place.  Imagine the environmental effects and savings that could be created if everyone would do their part?  So please forward this to any and all your users to inform them of the importance of following these standards.

For more information about Web Graphic Optimization you can visit these resources:

• GraphicsOptimization.com
• webreference.com – Optimizing Web Graphics
• Everyone’s Guide to Optimizing Graphics

The content of this post is licensed:

• Subscribers

• 2745
• 5027

• Social Networks

• 
• 
• 
•