Images

Images are an excellent way to communicate information.

Use relevant photos, graphics, and other visual elements when they clarify what you’re communicating. The same principles we apply to written content apply to images:

Address the user: Focus on illustrating or drawing attention to specific points you want them to understand.
Be concise: Don’t use numerous or complex images when one or two simple ones will do.
Be conscious: Consider how your image choices include or exclude.

Tips for imagery at FPAC

Group pictures or images of people working together are great additions to posts about events.
Screenshots can go a long way in explaining design and user experience techniques in how-to pieces.
Consider (animated) GIFs to illustrate functionality, show users a series of steps, or give examples of interactive content in a static post.

An image on a web page that spans the full width of a page should be 1600 pixels wide, though it will only display as 800 pixels wide. If possible, use vector images in the SVG format. Full-width images that precede body copy should illustrate the theme of the full post, not just one small part. Avoid using screenshots of text above the body copy as they can be confused with the body of the post. If you’d like to use a screenshot of text, consider slightly tilting the image to the left—about 6 degrees—so that it’s clearly separate from the body of the page. If a page includes an image that illustrates only a specific section, put that image directly before that section. When choosing images, make sure they are not so tall as to push other content off the screen. Captions for images should be directly below the image and italicized.

When floating images left or right around the text on a page, make sure the images are between 500 pixels and 100 pixels wide, but when using multiple images on the page, consider how those images might look as the text wraps on smaller screens. Make sure you test your content on a phone to ensure the images don’t impede the readability of the text.

Copyrighted images

Government works, including both written content and images created by FPAC employees, are in the public domain by default.

If you want to use existing images, explore public domain options before resorting to works under copyright. The process of publishing will be simpler, and questions of attribution will be much less confusing for the public if they choose to use our written content elsewhere. Look for images with a public domain (CC0) license.

Good places to search for CC0 images:

USA.gov,
Flickr (via “U.S. Government works” or “No known copyright restrictions” from the top left drop down), or
Wikimedia commons.

If you do use copyrighted images:

Try to find use one with few restrictions on reuse like a Creative Commons Attribution license.
Get permission from the copyright holder.
Attribute the photo to the source (especially if required or requested).
Where possible, link to the source online.

Accessibility

Images must comply with 508 standards and accessibility guidelines. The broad requirement is that any information presented in an image must also be presented in an alternative format (for people who cannot view images). While 508 compliant is the minimum threshold for our content, we generally hold FPAC work to a higher standard specified by the Web Content Accessibility Guidelines’ (WCAG) AA standard.

For images, this means every image on a web page must have “alt text” describing the image. Additionally, any text that appears in the image must also appear in the alt text. Most screen readers already add “Image of” when reading out an image, so alt text like “Image of the FPAC logo” is redundant because screen readers will read it as “Image of image of the FPAC logo.” A good rule of thumb is to limit alt text to 150 words; anything longer should be placed in the content of the page. Images that serve solely to illustrate or provide visual interest for other nearby content do not require alt text, but they do require the “alt” attribute (in HTML, this is alt="").

For more details and examples, read the Accessibility Guide.

Captions

When captioning an image, the goal is to add additional context and information. Don’t simply state what the reader is able to see by looking at the photo itself. Captions should increase depth and understanding. They’re also a good place to include attribution information when images are under a Creative Commons license or other groups have granted FPAC permission to use an image.