We write Knowledge Base articles to work without screenshots but boy they sure do make things easier — especially for novice users. So please don't be shy about adding screenshots to the articles you work on.

What makes a good screenshot?

• Screenshots illustrate a procedure that's difficult to understand. You don't have to have a screenshot for every step — just the ones where you want to make sure someone doesn't miss an important detail.
• They match what the user sees on his/her screen. This is why we have the ability (using {for} markup) to show Windows screenshots to Windows users and Mac screenshots to Mac users.
• They include enough context that someone can tell what part of the interface they are viewing.
• They use the current OS and Firefox default configurations. So that means, for example, Windows 7 aero and the latest Firefox with no customizations. The easiest way to get Firefox back to its default state is to create a new profile that you use just for making screenshots. See Profile Manager - Create, remove or switch Firefox profiles for instructions.

Focus on making Windows screenshots

Windows users account for over 90% of our visitors. So a Windows screenshot will be seen, on average, 9X more than a Mac and Linux screenshot combined. Making screenshots is time intensive. If you only have time for one set, please focus your efforts on Windows screenshots.

Creating Windows screenshots

These instructions use the Windows 7 built-in print screen command and the Paint program.

1. First, turn on the default Windows 7 Aero theme and make your desktop background white:
   • Right-click on your desktop and choose Personalize.
     
   • Under Aero Themes, select Windows 7.
   • Then click the Desktop Background link at the bottom of the window and choose a solid white background.
2. Next, set up the situation you want to screenshot. When you've got it how you want it, press Print Screen or Prnt Scrn on your keyboard.
3. Go to the Start menu and open up the Paint program.
4. Once Paint is open, click Paste and your screenshot will appear.
   
5. Now let's crop the image to just the relevant part:
   • Make sure you have the rectangular selection method selected
     
   • Then use that rectangular selection to draw a box around the area that you want to include...
     
     ... and then click Crop.
     
6. Use red callouts to highlight things (like what people should click on) in the screenshot.
   
7. When you are done cropping and highlighting, scale down large images to less than 650 pixels wide so they will fit on the page properly.
   
8. Finally, save your image as a PNG so you can upload it to the media gallery.
   

Creating Mac screenshots

These instructions are for Mac OS 10.7 Lion and the Preview application.

1. First, control-click on your desktop, choose Change Desktop Background... and make your desktop background white.
   
2. Next, set up the situation you want to screenshot. When you've got it how you want, press command + 3 on your keyboard and a screenshot will placed on your desktop.
3. Go to your desktop, double-click the screenshot and it will open with the Preview application.
4. Now let's crop the image to just the relevant part:
   • Use the rectangular selection to draw a box around the area that you want to include...
   • ... and then go to the Tools and select Crop.
     
5. Use red callouts to highlight things (like what people should click on) in the screenshot.
   
6. When you are done cropping and highlighting, scale down large images to less than 650 pixels wide so they will fit on the page properly.
   
7. Finally, save your image as a PNG so you can upload it to the media gallery.
   

Creating Linux screenshots

These instructions are for Ubuntu Linux with the Unity interface

1. First, control-click on your desktop, choose Change Desktop Background and make your desktop background white.
2. Next, set up the situation you want to screenshot.
3. Search for "Screenshot" and open the application Take Screenshot.
   
4. If you set the delay to something like 5 seconds, you'll have enough time to open a menu or position your pointer over the place you wish to highlight.
   
5. Save the image to your desktop (default).
6. Go to your desktop, double-click the screenshot and it will open with the Image viewer application.
7. Click the Edit Image button to open the image in another application where you can crop it.
   
8. Click Crop and adjust the box around the area you want to keep. Then click OK to crop the image.
   
9. Finally, close the image and you will be given the opportunity to save your changes.
   • Unfortunately, the built-in tools don't have any options for adding annotations or resizing the images. But hey! It's Linux so there are tons of free software that you can download to accomplish this.

Adding screenshots to articles

1. When you're editing an article, just click the Image button on the toolbar
   
2. The insert media dialog will open. Click the Upload Media link at the bottom of the dialog.
   
3. A new tab will open with the upload dialog. After you've uploaded your screenshot you can close that tab and return to the article.
   Note for Localizers: Be sure to pick your locale from the dropdown menu in the upload dialog so we can keep screenshots organized.
4. Place your cursor where you want to insert the image and click the Image button again.
5. Select the image you just uploaded and click Insert Media at the bottom of the dialog.
   
   • The image will be inserted with the markup: [[Image:title]]
   • Since we usually add an image at the end of a line of text you'll need to include a <br> (break) tag before it, making the markup:<br>[[Image:title]]

Screenshots and file size

We do a couple of things to limit how much data has to be downloaded when you visit a Knowledge Base article:

• We automatically compress all image uploads so that each file is small.
• We only load the images for the selected platform. So if you are viewing an article with Windows, we only load the Windows screenshots. If you then change the Article is for: setting in the sidebar to another platform (like Mac OS X), we'll then load the screenshots for that platform.

Screenshots and localization

Knowledge Base articles are written to work without screenshots. Screenshots are a great bonus that make it easier to understand an article, but they are not a required part of the article. Obviously, localized screenshots are ideal but if that's not possible, it's perfectly appropriate to remove the English screenshots.

Do we have to update screenshots for every visual change?

No! We'd go crazy if we did. For example, at one point we made a bunch of screenshots of the Options window that had the Sync panel last. One of the last things they did before releasing Firefox 4 was to swap Sync and Advanced in the Options panel so that it looked like this. Since the article was about the options listed in the window and the order of the icons at the top were not critical, we didn't change the screenshots right away (they eventually got updated when options in those various panels changed).

As always, use your best judgement. If it seems like the image for the previous Firefox version will help and not be confusing, then use it.

Other screenshot tools you might find helpful

Windows:

• SnagIt (30 day free trial)
• Irfanview (Free)
• Paint .NET (Free)
• XNView (Free)
• Gadwin PrintScreen (Free)

Mac:

• Skitch(Free)
• XNView (Free)

Linux:

• XNView (Free)