Blog

Reduce Image File Size Without Losing Quality!

05/14/2012 12:13 am / by / 16 comments

reduce file size

I recently discovered a simple and effective way to decrease image size of a photo without losing quality. This was an especially important find for me because my website relies heavily on images. With Google now putting more emphasis on page load speed than ever before, any chance to improve a website’s load time is a great thing. Let me show you how you can reduce the file size of your web images without sacrificing quality.

If you’re a designer, you’re probably familiar with Photoshop’s “save for web” option (as seen in the preview below), which allows users find a happy medium between image quality and file size. Saving at a high quality setting will result in better looking photos, but higher file size. Saving at too low quality and your going to end up with pixelated images.

photoshop save for web

What I discovered is that by simply blurring out part of your image in Photoshop prior to saving, you can reduce your photo’s file size quite drastically. As you can see in the image below, the image size dropped from 31.7K to 22.4k without reducing the quality setting one bit (51 for both). Blurring out part of a photo using Photoshop’s blur tool not only reduces file size, but actually improves the look of many images (in my opinion). It’s a great way to focus the viewer’s attention on the most important part of your image. In the image below you can see how I blurred out everything but the mouse.

reduced image file size

While this blurring technique may not be suitable for every image on your site (ex: portfolio images that you don’t want modified), give it a try the next time you create images for a blog post. Saving 10-20% on file size should result in noticeably quicker loading images and may help improve your site’s standing with Google. Hope this tip was helpful!

Thanks for reading. Please share your thoughts by commenting below. 

 

 

DesignBuddy

My name is Derek Kimball. I'm a graphic designer specializing in logo design, branding and print design. If you enjoy this blog, consider subscribing (top of sidebar). You can also follow me on these sites:


TwitterFacebookLinkedInPinterestGoogle PlusFlickr

 

16 Comments

  1. Tisha Oehmen says:

    Thanks so much! I am always looking for ways to reduce file sizes on images, for the same reason. I’ll give it a try.

  2. DesignBuddy says:

    Hope you found it useful Tisha. I was checking out your website…you’ve got some interesting articles.

  3. Greg says:

    Hello Derek,

    Thanks for the information…You can’t believe how I have battled with this problem. I have developed several websites, both static html and wordpress for clients that needed many images. The one static site does specialist wall applications and the best way to show this is via images.

    My most recent WordPress site (static) is for a friend who is a photographer and that says it all. He is a great photographer but can’t understand why he can’t have 20 large images on every page.

    For both sites it has been very difficult to optomise the pages for load speed and to satisfy the clients.

    I’d be very interested in your comments on the site and would appreciate any suggestions you have for reducing the image sizes. You will notice that I have rotating images just below the header and clickable images on the right of each page.

    I placed the photography website above….hope that’s ok?
    Looking forward to your response…
    Regards

    Greg
    BTW what is this commentluv for?

  4. DesignBuddy says:

    Hey Greg, thanks for visiting my site. The file size vs image quality battle seems to be one that many people have had a tough time with, including myself.

    Considering that most people now have higher speed internet connections these days, I don’t think it’s as much of a problem worrying about page load anymore, as long as we aren’t going crazy with high resolution images and have a fairly optimized and clutter free website. Although people viewing pages on cell phones with slower connections may experience problems with large/many photos.

    The blurring method (as mentioned in this article) will definitely allow for faster loading images without reducing file size (quality), but of course it’s not always a suitable option.

    As far as I’m aware, the only other thing you can do to speed up page load time is reduce the image quality on images some more. I’ve visited some photographer web pages that had a bunch of quality photos on a single page, and they all loaded fairly quickly. But I also have a relatively higher speed internet connection.

    With the new higher resolution retina displays on mac book pros, etc, the web’s 72dpi images don’t look so great. For those of us who want our photos or portfolios to look their absolute best to all visitors, this is an entirely new issue to consider. Even sites like Dribbble.com have implemented new higher quality upload options to accommodate the new retina displays.

    Greg…your site loads very quickly on my end and the images look great. If you ever find yourself having load issues, sometimes too many plugins can greatly reduce a site’s load time. Just another thing to consider if you weren’t aware. In regards to the “commentluv” you asked about…it is just a plugin that rewards people for commenting by allowing them to leave a link to one of their blog posts. It also creates a “do-follow” link back to your site, which adds a bit of “link juice” which is supposedly good for seo.

  5. Greg says:

    Hey Derek,
    Thanks for the information…it’s certainly an issue which needs more in depth discussion and research especially with the growth in the use of smartphones as the first port of entry onto the internet (as per Google).

    Do you know what the optimum number of plugins is?

    I don’t know if you use this or not, but I have found a batch image resizer that is really superb. It’s called Faststone Photo Resizer. It gives the ability to resize, add borders and other effects….take a look.

    Will commentluv work on a wordpress site with only static pages?

    Best regards
    Greg

  6. DesignBuddy says:

    Hey Greg, as far as I know there is no optimum number of plugins for a website. I think it’s just a matter of checking your page load times and making sure your pages aren’t too heavy after each new plugin install.

    From what I’ve read, the size of your site can have a lot to do with how certain plugins effect the site. For example, the “Yet Another Related Posts Plugin” was known to cause issues when sites became bigger. If I remember right, the plugin was making too many requests to people’s servers causing them to crash.

    I checked out the Faststone Photo Resizer program you mentioned. It gets good reviews and looks pretty interesting. Thanks for the suggestion. I’ll probably just stick with Photoshop since it allows me to basically do the same thing without the install of another program on my system. I just create custom actions in Photoshop for auto resize, crop, etc of my photographs.

    I checked around to see if I could find any info on whether or not “CommentLuv” works on static pages but couldn’t find anything. Maybe the developers will be able to answer your question?

  7. prudhvi raj says:

    thank u bro…..really great one thank you

  8. furniture says:

    Hello! I’ve been following your web site for some time now and finally got the courage to go ahead and give you a shout out from Idaho. Just wanted to tell you keep up the great job!

  9. paleo says:

    Wonderful. Thank you for writing that. I will check to this site to find out more and recommend my coworkers about your site.

  10. Ahmad Raza says:

    Thanks for sharing this trick,,,it really works…

  11. Hey There. I found your weblog the use of msn. This is an extremely well written article. I’ll be sure to bookmark it and return to learn more of your helpful information. Thanks for the post. I’ll definitely return.

  12. sandysmith says:

    Fantastic site. A great deal of tips the following. I’m just delivering the idea to a number of buddies ans as well sharing with yummy. And obviously, thank you in your efforts!

Leave a Comment

 

— required *

— required *