Questions? (877) 643-7244
FutureNow Post
Thursday, Sep. 3, 2009 at 12:39 pm

Make Your Images Load Faster

By Bryan Eisenberg
September 3rd, 2009

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!

YouTube Preview Image

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:

1. Web Page Analyzer

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

2. Dynamic Drive

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.

Smush.it™_fnhomepage images

2. Click Smush.it

3. See the results of how much your images were smushed.

Smush.it results

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.

Add Your Comments

Comments (114)

  1. You’ve shared some invaluable resources here.

    Thanks,

    Karl

  2. 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

  3. 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

  4. Taking on performance in the next phase. Perfect timing. Thanks for the great info!

  5. Nice post, thanks for the links. Whilst we always speed test our client sites its handy to see some additional testing services.

  6. 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.

  7. What a good method
    Thanks for your sharing
    I was looking forward to this kind of method for a long time!

  8. Thanks! These tools are useful. I’d like to recommend the P’age Speed by Google’ that it’s such a powerful tool.

  9. very useful resource…. thanks for sharing…

  10. Its a great tip for photo blogs and website.Speed really counts.Slow sites really suck.

  11. I’ve just started optimizing my images and I notice a positive impact on browser load times and visitor experience

  12. 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.

  13. [...] 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 [...]

  14. 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.

  15. Wow, Great info, just a question will it effect the image quality ?

  16. 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.

  17. 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?

  18. 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.

  19. 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. :-)

  20. It’s often heartbreaking to the designer to hear their great designed page is ‘heavy’. But, it must be done. Fast is way better.

  21. 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!

  22. 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.

  23. 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!

  24. Thank you very much for such useful info!

  25. Thanks for the info! This should help me quite a bit. I’ve been having problems with my page loading slowly.

  26. THANKS FOR THE POST.
    Very useful tutorial, especially the speed tests.

  27. ΤΗΑΝΚΣ

  28. 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!

  29. 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!

  30. New Photoshop has a cool feature of saving images for the web.

  31. This will help tremendously with all the pictures used on my blog! Thanks for the info!

  32. This info on image optimization will help alot for future knowledge when building newer websites with lots of pictures. Thanks!

  33. Thanks for sharing this useful information…it will be an easy way for anyone…..

  34. Thanks for the tips, slow loading images are always frustrating.

  35. Nice tips..thanx for sharing

  36. Thanks for the tips, but also using photoshop to get smaller images is better for me :)

  37. that was good. since my sites are usually full of images i am gonna use this

  38. 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.

  39. I always make sure my images are less than 20KB and ensure the image folder is cached on the server.

  40. Wow…that is very usefull!
    Thanks a lot.

  41. Yes this seems to work.

    Thanks

  42. 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!

  43. You Have just helped me solve the problem!

    Thanks

  44. 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.

  45. 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.

  46. Nice information. This article helped me out..

  47. 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!

  48. 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 :)

  49. Quick loading pages make browsing a happier experience, just like it should be =)

  50. Thanks for your useful information.

  51. You really helped me with this one

  52. 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 ?

  53. Thanks for sharing such invaluable resources here.

  54. 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.

  55. Great information, it’s very helpful for resize my images

    thanks!

  56. 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

  57. 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.

  58. 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.

  59. 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.

  60. 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.

  61. [...] 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 [...]

  62. [...] Source:Make Your Images Load Faster Share and Enjoy: [...]

  63. 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

  64. [...] 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 [...]

  65. thx for this useful information, need more of your great articles :)

  66. Thank for nice article.

  67. 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.

  68. 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

  69. I prefer Web Page Analyzer.

  70. Great, Nice posting, thanks for this information
    I will try it.

  71. I have used Cachefly for my website to make the images load faster.

  72. I didn’t know Smush.it, it seems pretty good, thanks for the tutorial ;)

  73. I have a image heavy page and this is very helpful!

  74. I used this to seo optimize my photography blog!

  75. 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.

  76. As always, great information to improve your web site and user experience. I really appreciate what you guys do for everyone.

  77. [...] [...]

  78. Taking on performance in the next phase. Perfect timing. Thanks for the great info!

  79. This is really useful information.

  80. Google came out recently and mentioned that image load times will affect rankings and their algorithm, which, I didn’t hear previously, so this is a great post to pay attention to.

  81. I ordered Outsystem 10 days ago and I’m still waiting… Trash…

  82. Great Info! Research some hacks on how to load fast your images…

    Freelance Writing Tips | Student Writer Jobs

  83. thanks for the info – some areas i havent considered – adobe photoshop offer a “save for web” options – which does a fairly good job of decreasing image size but still leaving image clarity – we do alot of image maniplation for marketing based images of exhibitons stands, roller banners and banner stands and sometimes save these images as png’s – which is also a low size image format.

  84. I thank you for this informative article. And I thank you for this I follow your vendors. It’s verry good. I wish you continued success.

  85. [...] 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 [...]

  86. The save for web feature in Photoshop is worth using to optmise images correctly.

  87. I do a lot of adwords advertising and I happen to know that Google are also using the load speed of your landing page as part of their pricing algorythm!

  88. Awesome tips here. Me personally, I keep things simple and just follow the rule of…keeping things simple.

    I prefer to work with a minimalistic design and really cut out as much as I can without taking away what the visitor is looking for.

  89. I prefer to keep image use to a minimum. Not because it takes up that much space, but if you get in the habit of using more than one picture per post, you are setting yourself up for a lot of needed bandwidth down the line.

  90. Adwords is very expensive. I know a company that spent so much on there that they went bust!

  91. One of the other simple ways of getting your images to load faster is to assign the height and width attributes with every image.

  92. Informative website, I wish more success to this very interesting blog

  93. Thanks for your tips. I’ve now looked into this and installed a module to compress and scale all my images automatically. My page speed is much faster. Many thanks!!

  94. Thanks for your tips. Speed and relevance rule the web experience

  95. smushit.com is one of the greatest tools online for people with pictures. thanks for reminding me I needed to smush some pics.

  96. Another technique is to choose a palettized image, using the correct color palette. Palettized images are created by examining the image pixel by pixel, and making a list of all the colors in the image.

  97. I thank you for this informative article. A

  98. [...]Another technique is to choose a palettized image, using the correct color palette. Palettized images are created by examining the image pixel by pixel, and making a list of all the colors in the image[..]

  99. Thanks for your tips. Speed and relevance rule the web experience

  100. I always wonder when sometimes the images loading takes awhile. Now, I understand why its happening and I will implement your tips. Thank you.

  101. It seems crazy that you can patent a “scarcely” designed webpage

  102. It seems crazy that you can patent a “scarcely” designed webpage

  103. thank you for this informative article

  104. We just switched to a Content Delivery Network and sites are loading a lot faster. It’s helped bounce rate and other metrics. Apparently the new google algorithm puts a higher importance on page load times so the extra outlay will be worth it if you have some organic traffic.

  105. Thanks for the useful info! I am particularly looking forward to trying the Web Page Analyzer.

  106. Thanks so much for the useful information! I use Smush.it all the time!

  107. To get my images to load quick I always set them to 72 dpi and then take the quality right down in photoshop.

    Works for me,

    Rob x

  108. To get my images to load quick I always set them to 72 dpi and then take the quality right down in photoshop.

  109. This really worked. We were able to increase the page load speed significantly

  110. Excellent post. The loadingtime on our site has dropped radically! Is there any way you could share some optimization tips on database loadingtime?

  111. Another excellent method to get the images to load faster is using the CSS sprites.

  112. [...] 200 Please Rate Thanks! An error occurred! 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 [...]

  113. Yahoo! YSlow for Firebug works great!!! Like it better than google, which I was using. Thanks for the recommendation.

Add Your Comments

 

Print this Article
Share

Bryan Eisenberg, founder of FutureNow, is a professional marketing speaker and the co-author of New York Times and Wall Street Journal bestselling books Call to Action and Waiting For Your Cat to Bark and Always Be Testing. You can friend him on Facebook or Twitter.

More articles from Bryan Eisenberg

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: