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:
- Less storage space on the server
- Less bandwidth is needed to process the file
- Less storage and bandwidth needs mean that hosting cost are decreased
- 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 thatit 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:
