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!

Comments

  1. Great Tip Joost. I’m glad you are posting here at Studiopress.

    For anyone that is wondering – if you have lots of existing images on your blogyou want to smush you can do so via the WordPress Media Library once you have installed the plugin. Just click on the Smush.it now! link for any image you’d like to smush.

  2. Great tip. I just used PunyPNG to squash about 35% out of several images. Very helpful.

    • That’s great news Bruce – glad that helped with your site!

      • Hi Brian,

        I need your help again…any chance you can write a little help document on how to convert an odd shaped picture from D40 something like 3888 x 2650 and get it shrunk to 588 by 300 the FCG requirements when it is not porportionally the same numbers. Why I tell photoshop to reduce size of pic, keep resolution set to 75, I have to uncheck porportions and then it goes wacky or if I leave porportions set to 588 on one side the 300 is too large like 380.

        Ideally I would like to have a square to that size and then move my picture around or shrink whatever I want to see in the picture to be inside the square and then crop that image to be like “what you see is what you get” type of scenario…am I hoping for the stars. I know you can do something like this in like a wordprocessor…but will photoshop do it also? If you have another solution that would be easy…I am all ears. I have seen lots of comments from people but all the admins just say “use your editor” which hasn’t helped me as I know very little about photo manipulation.

        • Rebecca Diamond :

          hey Phil, good to ‘see’ you again! In Photoshop, you can set the crop tool to the exact dimensions you want. Just select the crop tool, and up top you’ll see the tool options. Type in 588 px and 300 px – I usually set the pixels per inch as 72.

          Then you can crop exactly how you need it, it will be in proportion to the FCG, and you have total control over the process.

          • Thanks so much for your help, Rebecca…that is exactly what I was looking for. for those who do not have Photoshop another friend sent in this suggestion using Microsoft Office Picture Manager.

            Open picture and the click on re size by percentage and move to until it is just a little above our requirement (you will want to watch the measurements underneath the percentage marker)
            Then crop the picture to the exact amount …you can select the portion of the picture you want cropped at this time.

          • Don’t forget that in PhotoShop (and a few other photo editing programs) one can choose to “Save for the Web or devices.” This option, as I understand it, will also strip most of that extra data as well.

  3. I’m getting this error after installing Smush.it “Smush.it error: Could not get the image” any clue why? *Great article Joost!

  4. @Joost, incredible tools, I reduced the files for my new site with an avarage of 6% and the top images with 12%.

    Together with with the WP Smush.it it makes the site load much faster already. Thank for sharing your knowledge with us!

  5. Useful tips. Maybe I will need it someday. Thanks!

  6. Very useful tip. Thank you. Earlier “saving for web” in GIMP was the only thing I did and wondered how to reduce image size in already uploaded images.

  7. Hi Joost

    Thanks for the very very HELPFUL advice. After reading your post, I immediately went onto my website and SMUSHed the whole lot. The outcome? Saved me heaps of loading time. I want my site to be pretty but at the same time load quickly. It used to take almost a coffee break to load a page, but after using WP Smush.it, the site is loading tonnes faster! Thanks and I cannot tell you how much I appreciate your help.

    Good work guys!

  8. Good to see that it works nicely for all of you :)

  9. Thanks for sharing. I use ACDSEE, also a very cool image tool. and the PunyPNG is also useful. thanks.

  10. ” Smush.it is included in the tool that most web developers now can’t live without: Firebug”

    Don’t you mean it’s included with YSlow?

  11. Thanks for the advise, i going to give the plugin a try and see how well it works on my site..

  12. So glad to have stumbled across the StudioPress community as I am preparing to tackle transferring my static site to wordpress.

    I have narrowed down between 2 of your themes and need to decide :D

    Your support forum is what sold me, as I don’t want to loose any SE ranking and am confident I’ll find the best way to go about this switch over upon joining.

    Regards,

    P.