Leaving Work Behind

How to Take Perfect Screenshots for Blog Posts

Written by Tom Ewer on May 26, 2015. 29 Comments

As a WordPress writer, I tend to take a lot of screenshots.

But I’m no graphic designer – far from it. So how do I go about taking top quality screenshots?

It turns out that this is more complicated than one might think. You want to offer up a beautiful screenshot, but you don’t want the file to be so big that it takes an age for the image to download.

My solution serves up crystal clear screenshots that are far less resource-intensive than you might imagine. In this post I’ll show you the difference between my process and a ‘standard’ JPEG image, then give you instructions to achieve the same effect.

Before and After

Before I show you how to take perfect screenshots, I’ll demonstrate the results of my process.

We’ll start with the original:

Original screenshot

 

The image above has not been resized or compressed in any way. As you would expect, it is enormous (nearly one megabyte), so it may have taken some time to download, depending upon the quality of your connection. Sorry!

Now here’s a screenshot of average quality, the likes of which you will have seen all over the internet:

Standard screenshot

The above image weighs in at a relatively featherweight 61kb. It’s okay, but you can clearly see the compression ‘artifacts’, and the image obviously isn’t HD quality.

Now here’s my optimized version:

PNG optimized screenshot

This image weighs in at 225kb – still pretty hefty, but about a quarter of the original size.

Here’s a comparison of the uncompressed image (930kb) versus my version (225kb):

Screenshot comparison

You might just be able to guess which side is the original, but only when you can see both images side-by-side and take some time to scrutinize them.

With my method, we’re getting crystal clear images with an enormous reduction in file size. 225kb is still fairly big, but on plenty of occasions I’ve taken screenshots that optimize down to well under 150kb (and sometimes to double figures). The inclusion of the photograph in the above screenshot is what pushes the file size up.

So, how do you achieve near-perfect results while reducing image file size enormously?

My Process for Taking Perfect Screenshots

Note: I use a Mac, but the following process can be adapted for PCs too.

In my experience, there are two simple principles to creating high quality screenshots:

  1. don’t resize your screenshots, and
  2. use a high quality image optimizer.

It’s really no more difficult than that.

Step 1

Take a screenshot with your Mac using either:

  1. Command + Shift + 3 – this takes a shot of the entire screen.
  2. Command + Shift + 4 – this enables you to take a screenshot of a specific area of the screen.

This will save a PNG image to your desktop.

To achieve the same on a PC, I found this article.

Step 2

Upload the image to TinyPNG for processing. Doing so will reduce the file size by an insane amount:

TinyPNG screenshot

Step 3

Upload and insert the image into WordPress.

At this point you’ll have an enormous image that takes up far too much screen real estate. However, you can now use WordPress’ native re-sizing option (which doesn’t affect the quality at all) to reduce the image to more appropriate dimensions.

Just hover over the image and click the pencil icon…

WordPress image edit button

…then select Custom Size from the Size drop down menu and make the necessary changes:

WordPress' image editing options

Note that the width will adjust to the height (and vice versa) automatically.

That’s it! You now have an image that is optimized to a level that the naked eye cannot discern, yet you will benefit from a relatively low file size.

I’m not going to pretend like this is the perfect result (as the file size can still be relatively high), but as a general rule, I’d choose an HD image over sub-par image quality with a small file size.

I already mentioned that I’m no graphic designer, and I’m sure that there are better methods out there for maintaining quality while reducing file size. However, the method above is a piece of cake to execute and requires no special software.

But now I want to turn it over to you – do you have your own methods? Share with us in the comments section below!

Photo Credit: Hefin Richards

This Isn't Just Another "Make Money Online" Blog.

I'm sure you've had enough of hollow promises and get-rich-quick schemes.

I don't buy into that stuff; it's never worked for me. Instead, I create profitable online businesses through nothing other than hard work and persistence.

Here on Leaving Work Behind I share it all: both my successes and my failures.

Enter your email address below and hit "Sign Me Up!" to join us.

29 Responses to “How to Take Perfect Screenshots for Blog Posts”

  1. Jawad Khan
    May 26, 2015 at 1:47 pm

    Hey Tom,

    Your email says you thought this post was a bit off topic – I don’t think so.

    Really useful post, and I think you could share more of these tips that go into developing a high quality blog post.

    Seems very relevant to me.

    Thanks for sharing 🙂

  2. Yogiraj
    May 26, 2015 at 3:00 pm

    I agree with Javed,
    But you can use some tools too like snagit, lightshot or jing ?

  3. sandra
    May 26, 2015 at 3:06 pm

    Thanks for the practical advice Tom. I’m not clear on why you wouldn’t upload the image at the size that you want on your page? Won’t this save a bit on page speed?
    Another useful option for Mac users is an app (on app store) called Photobulk (£3.99) that will resize and optimise at the same time – it also will rename and add a watermark. I just keep it in the dock and drag an image onto it, select one of my user defined presets and it’s done! Easy peasy.

    I agree with Jawad – nice tips are great!

    • Tom Ewer
      May 28, 2015 at 10:17 am

      Hi Sandra,

      I should have included this in the post, but I don’t resize PNGs because it affects the quality. Perhaps you can use PhotoShop to reduce dimensions without affecting quality, but I’m not aware of how to do so. Like I say, it’s just my method!

      Cheers,

      Tom

  4. Lindsay
    May 26, 2015 at 4:10 pm

    Tom,

    This has been a lifesaver for me! It is so easy to do and works like a charm every time. The way you explain it makes the process so simple. I cannot thank you enough for sharing this great tip.

  5. Adrian
    May 26, 2015 at 4:26 pm

    I’m grabbing screenshots all the time so thanks for this Tom!

    Also, as a relative new convert to a Mac, thanks for the screen capture shortcuts.

  6. Prashanth K
    May 27, 2015 at 2:07 am

    I write technology topics that need a lot of screenshots. After some trial and error, I found the right free programs for the job.

    All we need to do is combine the screenshot tool (Free & Open Source) with the image optimization tool (Free & Open Source), set the right optimization parameters, and we are done.

    No need to save images and process them manually. You just click, point & click to take screenshot of specific area and you are done.

    http://technosanct.com/optimize-screenshots-web/

  7. Stuart Auton
    May 27, 2015 at 12:16 pm

    This is a great idea. Anything that improves (i.e. reduces) page load times without taking away from the quality of the page is definitely worth a try.

  8. Kimberley Pledger
    May 28, 2015 at 10:55 am

    I’ve wondered how to do this for ages – top tips, thanks.

  9. Skye Class
    June 3, 2015 at 12:09 pm

    This is really good advice. I also use a plug-in (on my pc) called Photo Resizer. This is great for an instant resize for any picture file, or for resizing several hundred photos at once (as I do after each city I visit). But it’s definitely important not to glut your blog page with oversized pictures.

  10. Elvis Michael
    June 3, 2015 at 10:53 pm

    This is awesome. I use a program called Jing to get screenshots and im in love with it. However, I typically leave the size as-is, not keeping in mind that WP can now resize them for you. Thanks, Tom!

    Elvis

  11. Joe
    June 4, 2015 at 7:07 am

    Interesting.

    So you don’t actually edit the image’s dimensions so that it has smaller size in terms of its width and height?

    Just display it at a smaller size in the blog post instead.

    All this time I’ve been messing about with zooming in and out in the browser, and then cropping and cutting, to try and make the image the exact width used by the blog I am writing for.

    I always thought it was bad practice to resize an image by changing its display settings!

    Cheers,
    Joe

    • Tom Ewer
      June 4, 2015 at 10:13 am

      Bad practice in the sense that you could reduce the file size by resizing before you upload, which is true. However, doing so with PNGs has an adverse effect on quality, so it’s a trade-off 🙂

  12. Vivek Kumar Poddar
    July 7, 2015 at 6:35 pm

    One simple suggestion from my side. If you use Photoshop to edit your images then you should save your images for web.. Shortcut for doing this is ctrl+shift+alt+s. Now you can set the quality of image and can save it in multiple web safe format.

    Thanks for this great article.

  13. TASG
    September 11, 2015 at 4:04 pm

    I’m taking a screenshot successfully so thanks for this post.

  14. Derek Sanders
    October 13, 2015 at 12:22 am

    Tom,

    This is fantastic. While not all of our blog posts have photos some of them do. We will definitely refer to this resource in the future when we continue to publish our newest content. Thank you for passing along this valuable information!

    Derek.

  15. Axel
    November 2, 2015 at 9:51 am

    Hi, you can do that all with your standard MACOS tools. After you did the screenshot you can open the picture with the standard app “Preview”, then use “Export” to make it to a .jpg file. It will reduce the file also with no significant quality loss. Also in the “Preview” app under “Tools” you can reduce the width/hight of the picture before you export it. Mac OS can do it all for you by default. 🙂

  16. Kyle
    January 18, 2016 at 8:30 am

    What do you think about using a CDN instead of going through this process?

  17. Lisa
    December 8, 2016 at 12:30 am

    Thanks Tom, this was helpful! Just started my blog yesterday and I have done exactly what your blog is about, quit my stressful job, on to better things

  18. Lee
    March 18, 2017 at 10:08 am

    Command + Shift + 4 is a great tip for the Mac – I’ll be using that a lot. Thanks Tom!

Leave a Reply

Your email address will not be published. Required fields are marked *