Images

Images like photos, graphics, and screenshots can help explain your message. Use them when they make your content easier to understand.

Just like with writing, good images should:

• Focus on the user – Show what you want them to learn or notice.
• Keep it simple – One or two clear images are better than many confusing ones.
• Be thoughtful – Choose images that include everyone and don’t leave people out.

• Group photos work well for posts about meetings or events.
• Screenshots help explain how something works, especially in tutorials.
• GIFs can show steps or how something moves or works.

• Full-width images should be at least 1200 pixels wide (they’ll show at 800 pixels).
• Use SVG format for vector images when possible.
• Full-width images at the top of a post should match the main idea of the post.
• Don’t use screenshots of text at the top of a post—they can be confusing. If you must, tilt them slightly (about 6°) to show they’re not part of the main text.
• Place images right before the section they relate to.
• Avoid tall images that push other content off the screen.
• Captions go under the image and should be italicized.

• When placing images to the left or right of text, keep them between 100 and 500 pixels wide.
• If you use more than one image, check how they look on smaller screens like phones.
• Always test your page on a phone to make sure the images don’t block the text.

Most government images are in the public domain, so you can use them freely.

Before using copyrighted images, try these sources for free images:

• USA.gov
• Flickr (choose “U.S. Government works” or “No known copyright restrictions”)
• Wikimedia Commons

If you use a copyrighted image:

• Choose ones with few restrictions, like Creative Commons licenses.
• Get permission if needed.
• Give credit to the source.
• Link to the source when possible.

All images must follow accessibility rules:

• Every image must have alt text (a short description for screen readers).
• If the image has text in it, include that text in the alt text.
• Don’t start alt text with “Image of…”—screen readers already say that.
• Keep alt text under 150 words. If it’s longer, put the info in the main content.
• If an image is just for decoration, use alt="" so screen readers skip it.
• If the image shows an action (like a magnifying glass for search), describe the action, not the image (say “Search” instead of “Magnifying glass”).

For more help, check the IA Accessibility Guide.

Captions should add extra information—not just describe what’s in the photo. They’re also a good place to give credit if the image is from another source.