The following guidelines should be used for screenshots on regular Drupal.org documentation pages.

Usage
Screenshots are no substitute for text. Furthermore, they are harder to translate and not accessible. Do not use screenshots to list items in the interface: use a text list.

Use a screenshot only where it is needed to clarify something that would otherwise be confusing if it was only explained in the text.

Cropping:
Crop your screenshot to remove unnecessary detail. You can also use callouts and highlighting to draw attention to the relevant portion of the image.

Trim the browser from your screenshot: it takes up extra space on the page.

Crop surplus parts of the Drupal interface. For example, if you are showing the module admin page, you don't need to show more than a couple of module checkboxes for the reader to get the idea.

Windows XP:
Turn off ClearType font smoothing when taking screenshots under XP, if you can, please. Most people don't have this feature and it increases the file size somewhat.

Here are some instructions to help you discover if you have ClearType enabled.

  • Right click on the desktop
  • Choose 'Properties'
  • Click on the 'Appearance' Tab
  • Click on the 'Effects' button
  • Under 'Use the following method to smooth edges of screen fonts:' select standard from the dropdown.
  • Click OK

Screenshot format

Screenshots on Drupal.org must follow these standards:

Format: PNG-8
PNG is preferred because of its lossless compression and small file size. JPEG is not suitable - it leaves artifacts and its 24-bit color depth is unnecessary when dealing with screenshots. GIF is not used because it is an outdated format.

Size:
620 x 700 pixels is the maximum preferred image size for Documentation.

Uploading Screenshots

To upload and attach an image in a page:

  1. Attach the screenshot under file attachments
  2. Use the img tag in the body of the page to place the screenshot where you want it to go:
    <img src="{copy URL from attachments}" alt="{appropriate replacement for the image}" />
    To place an image to the left or right of text, add class="left" or class="right". Note: You can click the image button in the editing toolbar above the text area as a shortcut to creating this tag.
AttachmentSize
documentation-team-links-box.png3.71 KB