Optimizing Images and Screenshots

Our tutorials often include dozens of screenshots, and optimizing these is really important. Tutorials which load quickly offer a far better experience for visitors and well-performing websites will even see Google rewarding them with higher ranking.

Optimizing our screenshots is a great way to improve performance, so here are some simple steps to follow.

Key Points

  1. Any images you use should be exactly 850px wide.
  2. An individual image should never be over 200kb in size.
  3. If your image is a photograph or illustration, save it as JPG (see an example).
  4. If your image has large areas of flat colour, save it as a PNG-8 (see an example).
  5. PNGs should be saved without transparency.

Image Quality

  • If you use Photoshop, or a similar graphics application, you'll be able to save your images "for the web", giving you the opportunity to optimize them straight away.
  • If your image comprises much in the way of shading, texture and color, it's probably best to use JPG format.
  • With a web-optimized JPG, you'll be given the option of determining the quality from 0 to 100%. Higher quality will give you a better image, but at the cost of a heavier file. Lower quality will reduce the file size, but might sacrifice how nice your image looks. In your graphics application preview window, you'll be able to see what the best balance is for your image. If you're not sure what percentage quality to save your file at, 60% is generally a good balance between quality and file size.
  • If your image is largely made of distinct flat colored areas, you might find that a PNG-8 gives you the smallest file size, whilst maintaining quality.
Image Format Size
image JPG 100% 18Kb
image JPG 25% 5Kb
image PNG-8 4Kb

Extra Compression

In order to make your files as performant as possible, you can use a number of tools to compress your images further.

  • TinyPNG is a web-based tool and will shrink your PNG-24 images by removing unnecessary data from the files. File sizes can be reduced by as much as 70% in this manner.
  • ImageOptim is an application for Mac OS X and will compress all kinds of files, including PNG, JPG and GIF.
  • FileOptimizer is a Windows-based application which also compresses a huge variety of file formats.
Image Format Size
image PNG 24 405Kb
image PNG 24 (optimized with TinyPNG) 123Kb

Progressive JPGs

Depending on your graphics application, you may be given the option to save your JPG images as being progressive.

Doing this will often reduce the file size by a small percentage and will also change the way the image is presented as it loads into the page. A progressive JPG will load in its entirety at a low quality, before gradually becoming sharper. A non-progressive JPG will be revealed at best quality from top-to-bottom.

Extra Tips

Number of Images

Every image file included in your tutorial is sent to the visitor's browser from our servers. Most browsers can simultaneously download just a couple of images at a time, causing a queue to form when tutorials have many images.

Whilst images can certainly improve the effectiveness of a tutorial, consider how many are really needed.

Focus on What's Important

For screenshots, rather than trying to fit your entire application window into a single 850px image, feature the area of most relevance at 1:1 scale.

File Names

Besides being handy for organisational purposes, it's also helpful for Google to give your images appropriate file names.

Use hypens, instead of underscores, to separate words within a filename; selecting-the-pen-tool.jpg as opposed to selecting_the_pen_tool.jpg or p00023.jpg