Optimize screenshots for the web. How to reach screenshot nirvana?

ShareX screenshot capture

Previously you have seen me harping about a lesser known tool to take screenshots – the tool is called ShareX. ShareX is a great tool to take screenshots, make minor annotations on the screenshot, and to publish the screenshot to image sharing sites.

[Read the complete ShareX review.]

Although ShareX is excellent is doing what it does, you will miss one feature in the tool. And, that is to optimize screenshots for the web (or, for that matter optimizing any image files).

The web is all about bandwidth. More the images on the web page, more is the time taken to load it in the browser. The browser requests images from the server and renders them for display, and getting those images from the server to the browser takes the maximum time in this transaction.

The lesser the size of the image, quicker the load time of the web page.

However lesser size also implies a compromise in the image quality. The images and screenshots need not be pixel-perfect, but they should look decent enough.

This is where the image format and lossless compression play a crucial role.

 

Know whether you have a problem

You have been uploading screenshots and images day in and out. You have not heard anything about loading problems so far – so do you need to worry about optimizing images?

In one word, YES!

Optimizing images is a best practice for any website, and yields benefits in the long run. Unless you are in the business of delivering highest quality images or complex graphics, you want to ensure the best possible website performance.

Further more, there are bunch of readers sitting there who have a narrower pipe to the web. Slower loading images do not give them a good experience. You can gain all those readers by improving the perceived speed, while delighting the others with that ‘extra’ page load speed.

Don’t believe me? Test one your web pages that have images on them. The following two tools help you do just that..

1. Use YSlow

YSlow is a tool from Yahoo that can tell you about the performance of any webpage.

YSlow is available as a plugin for Chrome and Firefox. You just navigate to the webpage in question, and click a button to see YSlow in action.

YSlow in action

YSlow tests numerous bottle necks for your webpage and tells you how to correct them. It will also grade the webpage on the performance. What we are particularly interested is in the “IMAGES” link of YSlow results.

YSlow checks the images on the webpage and tells you whether the images can be further optimized for size. The tool just determines whether the images can be reduced in size using lossless compression methods. This optimization will not result in any degradation in quality of images.

2. Use GTmetrix

I have talked about GTmetrix before. GTmetrix provides multiple options to check your webpage performance. It does that using excellent tools including YSlow.

Just input your webpage as the URL in GTmetrix and know whether the images are optimized for the web. GTmetrix follows the same methods used by YSlow and more.

By now, you should know you have a problem. Let’s see the means to mitigate that.

 

Specifying screenshot format in ShareX

Most of my images on my technical blog are screenshots. As is obvious by now, I use ShareX for that taking screenshots – the tool can save screenshots in multiple formats.

ShareX Optimize screenshots

For the best compression and “good enough” quality, I use JPEG. JPEG compresses images while retaining quality, and is the de facto format for images on the web.

Prefer JPEG over other formats unless you have a specific necessity to do otherwise. It provides the best compression to quality ratio.

However, JPEG is not fit for all purposes. When you need transparency in images or need high quality images that do not distort the fonts, you need to use PNG. This format is commonly used for images stored on the local computer but is quite common on the web.

JPEG also does not support animated images. GIF is the only option in that case.

Optimize screenshots for web

Even when you use JPEG image format or any others, you still have further ways to optimize them. You can use free tools like the below to compress images with, or without loss of quality.

 

1. SmushIt!

smush.it is a service on the web provided by Yahoo! The service optimizes any images that you feed to it, and you are handed an image that is perfect for the web. SmushIt uses lossless compression methods.

A WordPress plugin connects your WordPress site to smush.it. The plugin monitors all images uploaded to your website/blog, and calls smush.it APIs to get them optimized.

You don’t need to worry about a lot of options setting up the WP Smushit plugin. You just install the plugin and let it watch over the media uploads.

smushit in action in WordPress

Every image that you upload can be smushed on upload. The plugin shows just how much was the image optimized in the Media gallery.

Optionally, you can choose to optimize images in bulk at a later point in time. That comes in handy when you have images uploaded in the past, or if the service fails to optimize your images for whatever the reason. The status of the optimization gets captured against each of your images.

 

2. Use FileOptimizer

FileOptimizer is a brilliant tool that can optimize a lot of file types including images.

Don’t let the tool name, or the look of the FileOptimizer website fool you. It is one of the tools that I have been relying on for more than an year now, and have nothing but appreciation for what it does.

FileOptimizer is a desktop application for Windows that you install and let it loose on images stored on your computer. It is targeted at Windows OS but can run in Linux through WINE.

FileOptimizer for optimizing images for web

You just point to one or more images, click the button, and see the magic. FileOptimizer can do lossless compression of PNG, JPEG, GIF among other image types. The optimization process itself is quite fast, and the tool shows the before/after file size.

The optimized images can be uploaded to a webpage, and I guarantee everyone including YSlow will be happy to see them.

 

Integrate ShareX and FileOptimizer

It would be a fantastic world if I could take screenshots and optimize them in one go. Since it indeed is a fantastic world this can be easily done.

ShareX allows “actions” to be performed after capturing screenshots. These actions can be used to run FileOptimizer on the captured screenshots.

  1. Go to Task Settings [in left-hand menu] > Actions.
  2. Create a new action. Provide the full path of FileOptimizer here, and provide the parameter as %filepath%

integrate sharex with fileoptimizer Optimize screenshots

Now ShareX will run FileOptimizer for every image captured. Optionally, you can also copy the path of the image file to clipboard. This will have the file path in memory for next steps!

copy screenshot file path to clipboard

Put all this together and you have a screenshot powerhouse geared for the web. You have an easy way to capture the screenshots of an application window, part of the application window, or the entire screen. Optimize those images without any further intervention, and copy the file to the image sharing sites or just copy the file path.

All thes tasks are done in one or two clicks.

Know of better way to capture and optimize images? Comment!

  • Sunny

    Not JPEG! For screenshots you should use PNG. Either save them as indexed PNG or compress them with a tool like http://optimizilla.com or http://tinypng.com

    • Thanks Sunny.. Yes, PNG works better. But JPEGs can give you acceptable quality in return for lesser bandwidth and faster load times.