Skip to content

Guidelines for taking good screenshots for technical documentation

Resolution and file size

  • Take screenshots on a machine with at least a 4k or Retina monitor
  • Screenshots should not be larger than 200 KB, and preferably under 100 KB each

Zooming and cropping

  • Show a full window whenever possible - this keeps sizing consistent and helps the reader locate the correct portion of the UI to interact with

Annotations and callouts

  • Use red callouts unless the content of the screenshot contains too much red for the callout to be noticed
  • Generally use rectangles to call the readers attention to specific inputs or buttons
  • If showing three or more separate steps in a single screenshot, add numbered callouts (1), (2), (3), etc to indicate the order steps should be taken in
  • If interacting with a smaller part of the screen, add a red arrow to direct the reader's attention to the correct place in the screen


  • Do not leave space between a rectangle and what it is outlining

Gifs and videos

  • Gifs have problems regarding file size, but are the most portable and easiest to work with, as generally anywhere you can add an image you can also add a gif
  • For long gifs, use mp4 or webm instead
  • Generally avoid including sound in technical screenshots

Combining screenshots with text

  • Put the text first, followed by the screenshot
  • Do not put two screenshots in a row without text between them

Finishing touches

  • Add a browser frame and background colour with a tool like BrowserFrame
  • Optimize the filesize with a tool like TinyPNG