• Three Reasons to Resize Images Before Using Them on Your Blog

    Of course, images are very important to use on your website. They draw the attention of readers, help to illustrate points, and add flourish and colour to your writing.

    But you don’t want your images to work against you! If you’re not resizing your images before uploading them to your blog, you may be missing out on some important benefits for both you and your readers.

    There are three main reasons to resize images before adding them to your blog posts:

    1. Image loading time

    Visitor experience is undoubtedly the most important factor to consider when adding content to your website. And you’ll quickly lose visitors if the images on your site take too long to load.

    You might not realise that even if you’ve resized your image after uploading, visitors are still loading the full-sized images – they’re just seeing them at a smaller size. All this extra load on your site slows everything down, and the longer your site takes to load, the more people will get frustrated and potentially leave your site.

    2. Size control

    While content management systems like WordPress do give you the option to resize images after uploading them, these controls are limited in comparison to what you can do on your computer.

    For instance, on your computer you are able to specify the exact size, down to the pixel, you want your image to be. Usually, the WordPress image editor only gives you at most three or four size options. Resizing on your computer allows for the greatest control over how big your image will appear on your site.

    3. Server space

    The larger your images are, the more of that valuable hosting space they’re taking up. This means that you may fill up your allocated space more quickly, and backups will take longer to process and will take up more space on your computer and/or hard drive.

    How do I resize images?

    OK, so now you know why it’s important to resize images on your computer before uploading them to your blog. But what’s the best way to do this? Resizing is one of the most simple tasks graphics software can do, and therefore you probably don’t need anything more sophisticated than what you already have.

    Below are the easiest ways to resize your images using software that came with your operating system. Remember, when resizing, make sure to keep the image proportion (sometimes called aspect ratio) intact! Otherwise your images will look all stretched… not great!

    Mac: Open your image in Preview. Go to the Tools menu and choose Adjust Size

    Windows: Open your image in Paint. Go to the Home tab and click the Resize button.

    There are also numerous websites that will resize your image for you. I haven’t used any, but if you do a Google search you’ll find many options to try.

    I hope this has helped to understand the reasons to resize images before adding them to your blog posts. Happy blogging!

    Post By Tessa (18 Posts)

    Tessa is passionate about designing for and teaching WordPress! She also has a background in performance, video, design, photography and writing. She lives in San Francisco with her husband, baby boy and cat.

    Tessa recently launched a new website, WP SuperGeek: Your fearless WordPress help desk. WP SuperGeek offers courses, advice, and a forum to ask questions. They speak geek so you don't have to!

    Website: → WP SuperGeek

    Connect

If you like it, please share it!

Join in! There's already been 11 comments

  1. Melinda March 06, 2012 @ 11:28 pm

    Great blog topic because resizing images before you add them to your blog is really important.

    I learned the hard way; Tess backs up my personal blog for me and I asked her to email me a copy of the backup file for the content, but the file size was MASSIVE! This was due to all the large photos that I had uploaded without resizing.

    Now I use http://www.pixlr.com to resize images before uploading them, and this also prompts me to name the file with keywords included, rather than uploading a file called IMG00879 or similar.

    Cheers
    Mel

    • Tessa Needham March 07, 2012 @ 12:21 am

      Thanks Mel! And good call with http://www.pixlr.com – I hadn’t heard of that one but it’s great to get a recommendation!

      Tess

  2. Tracey -Life Changing Year March 07, 2012 @ 3:58 am

    Hey Tessa. It was really nice of you to write this post just for me!! I had been reduced to changing the quality of the pics I was taking as it was causing me loading problems on the blog! I knew I had to resize but didn’t know how!! I’ll try this tonight and will hopefully be able to go back to taking my pictures in high quality!! Thanks!!

  3. Belinda Weaver | Copywrite Matters March 07, 2012 @ 5:30 am

    Great post Tessa!

    I hadn’t really thought of doing this as I was just resizing the image for display thinking that was enough.

    I shan’t from here on in!

  4. Tessa Needham March 07, 2012 @ 6:11 pm

    Thanks for the comments, Tracey and Belinda!

  5. Serena Star Leonard March 08, 2012 @ 12:25 pm

    Good to know! I have been using paint.net which is a free tool that you can use on PC’s.

    If the image you load gets inserted into a pre-specified size like a featured image, does that shrink it for you or is the image still saved into your media list in a large size?

    • Tessa Needham March 08, 2012 @ 2:55 pm

      Good question! The different thumbnail sizes are actually saved as separate images in WordPress, so it’s only loading the small version then.

      • Serena Star Leonard March 17, 2012 @ 3:29 am

        Cool thanks! I always like to take the link out when the picture uploads as I find it annoying when an image just links to a bigger version of an image

  6. Karen March 09, 2012 @ 12:12 am

    If you are resizing make sure to keep a copy of the photo in it’s original size. Picasa is free and good for photo adjustments too.

  7. Erin April 30, 2012 @ 7:15 am

    Thanks Tess! I’m not sure if you wrote this post before or after I asked you about uploading a 10MB photo 😉 Either way, it felt like this post came at exactly the right time.

    I’ve done a little bit of sleuthing and have learned that 60-100KB is a good size for large webpage images, and 30KB or less is a good size for smaller images. Would you agree?

    I use Microsoft Office Picture Manager and there’s a resize dropdown, with six options (large and small for each of these document/web/email). So it’s pretty easy now.

    Anyway thanks for motivating me to learn about this stuff, Tess!

    • Tessa May 02, 2012 @ 5:25 pm

      Before, but it’s a topic that often comes up!

      The sizes you mention are fine, but there are various factors influencing file size like transparency and complexity of the image, which is why I’d hesitate to give a one-size-fits-all response.