1 Minute Image Optimization to Make Website Load Fast

Written by Pavan Kumar on June 3, 2009

Advertisements

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.

Optimize website for speed performance

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.

 Optimization of uploaded 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 :)

       

Subscribe to RSS Feed or Get updates on your inbox:

People who liked this also read:

31 Readers responded to this post

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.

@ Devang

I hope the same would help others too :)

Thanx for the useful info.i will try smush.it plugin for my website.

Pavan , Nice Post

Hey this is something really useful and cool
Thanks Pavan…

Thanks for the post. It really works. Smush.it is really cool. Thanks again.

nice tips pavan…

I totally agree with your optimization techniques but why did you advice to not use GIF on blogs. Sometimes they occupy very less space. Please clarify.

@ Sanjeev

If in your case it occupies least space, it is recommended. But in most of the cases I observed, png is much better than GIF. But only GIF can support animation and is more friendly and easy to make than flash. PNG comparatively produces more sharp, clear and small sized images which are always recommended for any website.

Interesting fact: GIF was not recommended in the past before 2006 due to patent and royalty reasons.

Thanks for useful tip Pavan. I started wp-smush.it plugin almost one month back and now its in my list of must have wordpress pugin.

hey friends i am rahul…
i had posted new premium accounts…
you would like to see them
follow the link and download this…
http://rapidshare.com/files/298573694/pa_rapidshare_www_dl4all_com.rar

thanks for the handy tips, i always resize the image to the size its going to be posted on the blog, the smaller the better, so that it loads quickly…

great post.. loved it.. will try

gif ext really decreases the sizes to a great extent. its fast to upload

Is there any option for blogger ???

your site is very interesting, Keep adding… cheers

Well I dont recommend posting your images to imageshack. I have seen my friends pics got deleted without any warnings.

Thanks. I needed this advise as my site is a bit slow and getting high bounce rate. This will surely help me.

Resizing images plus using smushit plugin makes life a lot more easier for a blogger 😉

Thanks a lot for these tips. I think this will be very useful for me since I am going to start a blog now

Thanks a lot. I’ve searching for tips to increase speed

I just Use Infraview…For Optimizing Images…its Optimize Image For Web really works…

I like this posting. your image optimization presentation skill is very excellent.

Hey. Thanks for sharing information on optimizing images for web. Smushit is a great tool for optimizing images.

Very nice posting.. Thanks!

Thanks Pavan for this post.
In my blog, some posts have 2-3 images in it. So I think I need to work on what you said.

If you have a picture blog then it is important that you optimize your images before using it on your blog. Thanks for the share.

Good post. Really Useful one for who don’t have image editing tool. One thing i want to tell is you have mentioned that we need to use “gif” only if animation is needed. Check this http://adavu.com/how-should-i-save-an-image-jpeg-or-gif-or-png/

Of course we really want to grow our blog then we should implement some SEO tips on it. And the most important tip among one of them is Image optimization. Thanks Pavan for such an useful tips.

Nice compilation. A little effort on such small points can enhance efforts many more times.

I don’t recommend uploading to imageshack as they remove the images after a particular bandwidth. So its not good for high traffic sites.
Moving to a new server can help.

10 Blog responses for this post
Leave Your Comments Below / Trackback

About The Author

    Pavan Kumar

    Pavan Kumar completed Engineering in Electronics and Communication in the year 2008. He is very enthusiastic and keen to work on different aspects of computer, internet and mobile related fields. The articles here reflect his creativity. This blog was started as a showcase of solutions for different problems and today it has got a good reputation in the blogosphere. Read More...

© 2015 - TechPavan.com. All rights reserved.

All content provided in this site are the property of TechPavan.com and is free for non-commercial usage. Read our Privacy Policy here.

Any kind content on this site cannot be reproduced in any form without permission of the author. We are not responsible for any loss or damage which may occur due to any of our content.

Site hosted on Bluehost powerful servers.