How to Optimize Images on Your Blog or Website

A lot of blogs and websites that use StudioPress themes are image heavy, and that’s a good thing, as that’s what makes them look good. However, these images tend to be a lot heavier than they have to be, because most people don’t know how to save their images for the web.

Over the last year or so, a lot of improvements have been made in that area. The first to make it very easy to optimize your images was Yahoo, with its Smush.it service. Smush.it is included in the tool that most web developers now can’t live without: Firebug. By removing all sorts of meta data and other unneeded info in files, it can make files a lot smaller, I’ve seen it save up to 50% on very large images.

The cool thing about Smush.it is that there’s an API, and a WordPress plugin that uses it, appropriately called WP Smush.it. This plugin automatically “smushes” all your images when you upload them, so it’s a default install on all the sites I work on.

There’s a “one up” though. All the images on your site that are regularly loaded, so especially everything in your theme, should be ran through a tool called PunyPNG. There’s no API for this tool yet, so it’s not as easy to integrate it with WordPress, but it does take it one step further and has reduced some of the imagery on yoast.com with another 10% or so.

Doing this can really make your site load faster as the total size of your page is decreased. So, go install WP Smush.it now, and run all your themes images for PunyPNG.

What? Still here? Go off already, and let us know in the comments how many KB you saved!