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:
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:
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:
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):
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:
- don’t resize your screenshots, and
- use a high quality image optimizer.
It’s really no more difficult than that.
Step 1
Take a screenshot with your Mac using either:
- Command + Shift + 3 – this takes a shot of the entire screen.
- 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:
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…
…then select Custom Size from the Size drop down menu and make the necessary changes:
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
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 🙂
Glad you liked it Jawad!
I agree with Javed,
But you can use some tools too like snagit, lightshot or jing ?
Never heard of them!
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!
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
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.
You’re welcome Lindsay!
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.
No problem Adrian!
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/
I’m not a Windows user Prashanth, but thanks for the suggestion!
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.
I’ve wondered how to do this for ages – top tips, thanks.
You’re welcome Kimberly 🙂
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.
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
No problem Elvis 🙂
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
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 🙂
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.
I’m taking a screenshot successfully so thanks for this post.
You’re welcome 🙂
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.
You’re welcome Derek 🙂
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. 🙂
What do you think about using a CDN instead of going through this process?
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
Command + Shift + 4 is a great tip for the Mac – I’ll be using that a lot. Thanks Tom!
Hi Tom,
After following these procedures, I still don’t know why the quality of my screenshots reduces after uploading to WordPress.
Any ideas?
Thanks though 🙂