1 Minute Image Optimization to Make Website Load Fast
Written by Pavan Kumar on June 3, 2009
Yesterday, I was interviewed by SpeakBindas and as casual discussion went on with the admin, he said his website loads slow and gets same complaint from all users. I checked his site in detail and found his images are not optimized. I would like to share the eay I use to optimize images to keep website fast loading.
Fast website are very pleasing and definitely improves user satisfaction and server load. Also you will see bounce rate reduces with increased speed if you have a quality content. I recently worked on my theme to make it minimal in terms of size and optimizing website speed. Coming to the site, I referred above, the logo itself was 40kb, other banners and images too were even more than 100kb. 100kb is extremely huge and users will immediately close browser when website takes too much time.
Lets not discuss more about theory – coming to steps – let me show you what I do instead of making it more complex:
1. Resize images to the size required for you site. Uploading 3000 x 2000px image and showing it at 600 x 400 px through html is of no meaning. You may resize image, or edit picture or even crop photos. Never use images directly from your camera.
2. If it is a post with multiple images like my search engine query or making of vodafone zoozoo ads – use multiple image resize tool to make all images uniform width – it just looks good.
3. Upload all images to ImageShack – I recommend this because it makes your job faster by providing multiple image uploading feature. Upload all images and get direct url of images.
4. Use these direct image urls in SmushIt. Note that only 5 urls at a time, if you have more, smush it next time. Smushit is really a wonderful tool and compresses your image size keeping same quality. I have seen few images getting optimized by upto 70% (File size reduced to 30% of original size).
Also make sure that the images used on your theme like logo, banners, buttons etc are all optimized in size – if not, do it.
Are you using wordpress? Use Smush.it WP plugin – It compresses automatically the uploaded images. You can compress images in the gallery manually.
Recommended: Don’t use GIF format on websites unless the image you use is an animated one. Use PNG as alternative of GIF as they too support transparent backgrounds and occupy less space. Otherwise use JPEG. JPEG is for images with maximum colors and patterns and PNGs for images with most single color background – like a whiteboard, screenshot of webpage like Google etc. Example: The first image used here is jpg and second one is png 
People who liked this also read:
Thanks Pavan for the useful tips. I already decreased the size of logo, along with other images hosted on homepage. Has installed smushit too.
I learnt something new and it works.
Thanks.