Visit Our Blog
Make Your Images Load Faster
True “interaction” happens when request and response of pages happen in sub-second speed. So just because people have cable and dsl connections doesn’t mean you should fill your pages with bloated code and heavy images.
In fact, the natural advantage of fast loading pages is one reason Google patented the sparse design of their home page. They know that simplicity, speed and relevance rule the web experience, and that every millisecond counts.
Think about that time you had to connect to a website on your cellular phone or use the wireless network at a busy conference. Slow sites suck!
How do you speed up your pages?
1. Run a speed test on your page.
There are several great tools that will tell you if your pages are loading slow. Here are the main ones we use here at FutureNow:
2. Yahoo! YSlow for Firebug
3. Page Speed by Google – They have also compiled a list of some other great resources and tools to speed up your website.
These tools will identify if your code, javascript, css and or images are overweight. This post will only focus on how to optimize your images once you realize they are too fat.
There are several simple tools online that you can use to optimize your image if you are not familiar with Photoshop or the equivalent to squeeze those image file sizes down.
1. Smush.it
3. Web-Resizer
Here is an example of how to do it with Smush.it:
1. Copy and paste the image urls of the images you want to optimize into Smush.it.
2. Click Smush.it
3. See the results of how much your images were smushed.
4. Right click the name of the file you requested to be optimized and save it to your computer.
5. Upload those files to your server to replace the bloated ones.
People expect fast-loading pages and quick response times from websites; it’s part of their internal clock. It doesn’t matter whether you’re dealing with visitor expectations for:
- expected content/scent,
- answers to buying concerns and questions,
- the look and feel of the site and photos,
- or, for response times
Matching or exceeding those expectations always leads to higher conversion rate. That’s why the Persuasion Architecture framework is so consistently successful at Website Optimization.
[Editor's note: the author of this post is now blogging at bryaneisenberg.com]
About the author
Bryan Eisenberg is the co-author of New York Times and Wall Street Journal bestselling books Call to Action, Waiting For Your Cat to Bark and Always Be Testing. Bryan is available as a professional speaker. You can friend him on Facebook or follow him on Twitter (@TheGrok).
More articles from Bryan Eisenberg
- Nobody wants to read your sh**!September 21st, 2009
- Redesign? Ask The Right Questions!September 18th, 2009
- Cross-post: How to Improve a Product Page, Part 1September 15th, 2009
For More, Subscribe To Grok!
- Capterra: The Conference Sept 13-15, Wash., DC
- "Recession Marketing: From Pre-click to Post-click" (webinar) Sept 16, 12pm EDT / 9am PDT
- "Securing the Sale: Turn Your Site's Browsers Into Buyers" (webinar) Sept 17, 2pm EDT / 11am PDT
- Excellence and Innovation conference Sept 28-30, Orlando
- The SEM Conference
Sept 23-24, Oslo, Norway - eConsultancy Peer Summit Oct 8, New York City
- The Bolo Conference Oct 12-14, Scotsdale, AZ
- Google GAAC/WOAC annual meetings
Oct 13-16, Googleplex California - eMetrics Marketing Optimization Summit Oct 19-23, Wash., DC
September 3rd, 2009
1:05 pm
You’ve shared some invaluable resources here.
Thanks,
Karl
September 3rd, 2009
1:28 pm
Excellent resources, Bryan. This is always a tough one. Wanting a “rich” experience without turning your site into a boat anchor in terms of functionality.
Thanks again for the killer insights.
Mark Alan Effinger
http://www.ThoughtOffice.com
September 3rd, 2009
1:44 pm
Thank for your information this helpfull!! http://freeringbacktoness.blogspot.com
September 3rd, 2009
4:04 pm
Yahoo! YSlow for Firebug is the best of the bunch. Also you can read High Performance Web Sites by O’Reilly, this book was based from the guy at Yahoo that the FireBug plugin was based off of.
Yahoo also has a video of the guy explaining things, maybe here http://www.youtube.com/watch?v=BTHvs3V8DBA
September 3rd, 2009
5:01 pm
Taking on performance in the next phase. Perfect timing. Thanks for the great info!
September 3rd, 2009
7:41 pm
Nice post, thanks for the links. Whilst we always speed test our client sites its handy to see some additional testing services.
September 3rd, 2009
8:39 pm
Thanks for the great advice. Image sizes are often something that’s overlooked, especially these days that broadband internet is so common place, but loading times still matter, a lot.
September 3rd, 2009
9:52 pm
What a good method
Thanks for your sharing
I was looking forward to this kind of method for a long time!
September 3rd, 2009
11:18 pm
Thanks! These tools are useful. I’d like to recommend the P’age Speed by Google’ that it’s such a powerful tool.
September 4th, 2009
7:22 am
very useful resource…. thanks for sharing…
September 4th, 2009
9:12 am
Its a great tip for photo blogs and website.Speed really counts.Slow sites really suck.
September 4th, 2009
1:08 pm
I’ve just started optimizing my images and I notice a positive impact on browser load times and visitor experience
September 5th, 2009
3:22 pm
Very useful tutorial, especially the speed tests.
And of course being a PS user for many years, Imageready is the way to go for optimizing images. The free sites are great though for non-PS users.
September 6th, 2009
1:44 pm
[...] failed to deliver after the clickthrough. One aspect you can look at straight away is discussed in Make Your Images Load Faster on the Marketing Optimization Blog. The article gives some useful free tests you can try today. How [...]
September 6th, 2009
2:35 pm
Excellent information, page load times are very important part of a website.
I think this is also going to play a big part with the new google caffeine update.
September 7th, 2009
2:15 am
Wow, Great info, just a question will it effect the image quality ?
September 7th, 2009
5:58 am
Thanks for sharing the links. Whilst we always speed test our client sites its handy to see some additional testing services. Really a nice stuff.
September 7th, 2009
11:08 am
Is this applicable if you have a third party host in your pics? Or is this only applicable if your pics are hosted in your server?
September 7th, 2009
2:02 pm
I would say just use the Photoshop save for web tool, but sometimes it’s not enough..the page still loads slowly no matter what..especially a blog or ecommerce site.
September 7th, 2009
2:57 pm
I happen to be a big fan of WebResizer.com (no affiliation, honest!). I had just under a dozen key photos on my primary pages. The WORST result I had was a 73% reduction size, and I had 7 that resulted in 90% reductions in size. And no, I must confess, I honestly can’t tell any difference in quality between the originals and the revised versions.
Quick recommendation: find out the actual pixel dimensions (width by height) size you’ll need on your web page. WebResizer.com (and I’m guessing the other websites as well) have a function to reduce the dimensions of the photo as well as compressing the image. That way, you’ll get an even smaller photo and your site won’t have to convert it to the appropriate dimensions every time it renders the image.
September 7th, 2009
3:32 pm
It’s often heartbreaking to the designer to hear their great designed page is ‘heavy’. But, it must be done. Fast is way better.
September 7th, 2009
6:42 pm
Anime Games,
I had the same question. From my own fumbling attempts, it looks like SmushIt requires a URL, but both Dynamic Drive and Web-Resizer allow you to upload files straight from your computer.
Good luck!
September 8th, 2009
7:39 am
The Process of Image uploading takes time to upload and many website did take big size images. thanks you told a great and easy way for image uploading. Please give some another ideas if you have same as it.
September 8th, 2009
7:57 am
Many thanks Bryan for all those useful resources, especially WebSiteOptimization.com. I ran it for my site and I discovered several things to fix.
I ran that service also for http://www.grokdotcom.com and guess …
You have to fix images size too!
September 8th, 2009
9:23 am
Thank you very much for such useful info!
September 8th, 2009
12:17 pm
Thanks for the info! This should help me quite a bit. I’ve been having problems with my page loading slowly.
September 8th, 2009
7:31 pm
THANKS FOR THE POST.
Very useful tutorial, especially the speed tests.
September 8th, 2009
7:33 pm
ΤΗΑΝΚΣ
September 8th, 2009
11:23 pm
I have tons of images that I use with my site. I had no idea google had such a tool to use to test page load times with. Thanks for the info. I’m hoping these tools will help to really speed up my page loading times!
September 8th, 2009
11:27 pm
I’ve noticed the y slow doesn’t work with the latest version of firefox. I’m hoping they get that updated as well as the page rank bar as well. Great info on the optimization of your images!
September 8th, 2009
11:28 pm
New Photoshop has a cool feature of saving images for the web.
September 8th, 2009
11:28 pm
This will help tremendously with all the pictures used on my blog! Thanks for the info!
September 8th, 2009
11:32 pm
This info on image optimization will help alot for future knowledge when building newer websites with lots of pictures. Thanks!
September 9th, 2009
12:15 am
Thanks for sharing this useful information…it will be an easy way for anyone…..
September 9th, 2009
9:34 pm
Thanks for the tips, slow loading images are always frustrating.
September 10th, 2009
12:02 am
Nice tips..thanx for sharing
September 10th, 2009
4:51 am
Thanks for the tips, but also using photoshop to get smaller images is better for me
September 10th, 2009
6:29 am
that was good. since my sites are usually full of images i am gonna use this
September 10th, 2009
11:36 am
Nice read thanks althought this was my first step into the world of photoshop and fireworks and I am glad I got my hands dirty and developed those skills there is definitly a place for such tools as you mentioned above. They value is increased as google now looks at page load time as part of its ranking algorithm.
September 11th, 2009
3:49 am
I always make sure my images are less than 20KB and ensure the image folder is cached on the server.
September 11th, 2009
6:46 am
Wow…that is very usefull!
Thanks a lot.
September 12th, 2009
10:11 am
Yes this seems to work.
Thanks
September 12th, 2009
2:25 pm
Fantastic post. Many people really overlook image optimization when it comes to web design. YSlow and Firebugs are essential for any new site I use… and using a minimalist theme helps a lot not just for speed but conversions!
September 13th, 2009
3:14 am
You Have just helped me solve the problem!
Thanks
September 13th, 2009
5:40 pm
I can’t recommend Y-slow enough. One thing to consider is that for every ‘img’ tag on your page, the browser has to make a separate request to get that image. So the fewer images you have overall, the better.
September 14th, 2009
8:11 am
The best way still to fast load a website is using as less image as possible.
the more text the more speed, the less image the more speed.
in my domain appraisal website i tried to use very less image and it loads very fast.
September 14th, 2009
8:21 am
Nice information. This article helped me out..
September 15th, 2009
5:31 am
Many thanks for a better understanding of image load speed and free resource links.
After trying the Web Analyzer I now have to consider the way I use the many tree and plant images I have on my sites!
September 15th, 2009
5:40 pm
Fantastic, even though the internet is getting faster and faster all the time and with todays broadband speed image loading isn’t of paramount important this is fantastic information, thank you
September 16th, 2009
1:23 am
Quick loading pages make browsing a happier experience, just like it should be =)
September 16th, 2009
7:50 am
Thanks for your useful information.
September 16th, 2009
3:19 pm
You really helped me with this one
September 16th, 2009
3:48 pm
Thanks for help. Before I read this article very interesting i used the format .gif and saved images for web applications in Photoshop. It is still a good example .gif format and save as web image for people who don`t know. What do you think about this option ?
September 17th, 2009
3:03 am
Thanks for sharing such invaluable resources here.
September 17th, 2009
11:01 am
Thx for the video . it help us alot in reducing the image size that was a headache for our customer and website was taking to long for both download and uploads.
September 19th, 2009
10:37 am
Great information, it’s very helpful for resize my images
thanks!
September 19th, 2009
11:59 am
Thanks for those awesome links! I’ve always had a bit of trouble with perfectly optimizing pictures of our Rottweilers, not anymore!
Alex,
Vom Bullenfeld Rottweiler puppies
September 21st, 2009
1:26 am
A fast loadings site is a nice frienly feature for its visitors and users. That is why it is very important to optimize our website’s images. I am using a softwware to optimze the size of my images before I upload them to my site. Thank you for sharing.
September 21st, 2009
1:54 am
Great post! I must say it took some time for the images to load on your post, but that could be my connection on my iphone.
Speed-trap offers a page load time report in their analytics tool. You can set business alerts on pages slow loading above 10 sec. for example.
September 22nd, 2009
12:11 am
another technique is to ’smush’ all your icons and small images into a single image file, then use CSS to show just the portion you need to render an icon, or any other image.
With this approach, there is only one http request to get the smushed image, all the rendering happens with CSS.
This requires a pretty skilled CSS developer, however.
September 22nd, 2009
11:16 am
[...] http://www.grokdotcom.com/2009/09/03/make-your-images-load-faster/ [...]
September 23rd, 2009
12:41 am
Thanks for the information regarding the reason why Google patents such a very spartan home page. I wondered about this ever since. I now know the answer thanks to you.
September 23rd, 2009
3:02 pm
[...] images. But how? Google understood the need for speed with it’s home page design. There are ways to speed things up and Bryan Eisenberg shares some of his tips with [...]
September 24th, 2009
5:44 am
[...] Source:Make Your Images Load Faster Share and Enjoy: [...]
September 27th, 2009
9:07 am
Seem like the comments need a bit of a cleanup.
Here is an open source project to add to your list
http://code.google.com/p/web-optimizator/
They do have a commercial version as well that boasts a few more features
September 30th, 2009
11:36 am
[...] Smush.it Online image optimizer if you want to learn how to speed up your website and optimize images you can read about it in one of my previous [...]
September 30th, 2009
11:08 pm
thx for this useful information, need more of your great articles
October 8th, 2009
9:45 pm
Thank for nice article.
October 14th, 2009
11:07 am
i have to say that i have learnt a lot from your post.
i have never realized there existed such a tool to speed up my page loading times.
I am so happy i can save a lot of money.
October 14th, 2009
11:18 am
I purchased a pair of christian louboutin shoes to attend a friend party In the http://www.christianlouboutinshoes88.com. The red high heels are very sexy. I recommend everyone go here to buy
October 26th, 2009
10:06 am
I prefer Web Page Analyzer.
November 1st, 2009
10:01 pm
Great, Nice posting, thanks for this information
I will try it.
November 4th, 2009
2:08 pm
I have used Cachefly for my website to make the images load faster.
November 5th, 2009
12:25 am
I didn’t know Smush.it, it seems pretty good, thanks for the tutorial
November 5th, 2009
1:01 pm
I have a image heavy page and this is very helpful!
November 10th, 2009
1:23 am
I used this to seo optimize my photography blog!
November 17th, 2009
4:53 am
Hi, This is really useful information. We use an ecommerce solution for our exhibition stands website and I am going to find out from our programmer is the images are optimised because there are lots of pictures of pop up stands, banner stands, roller banners and pop up displays on the site.
November 18th, 2009
6:42 pm
As always, great information to improve your web site and user experience. I really appreciate what you guys do for everyone.