Image guidance


See size and cropping specs for specific content types on SF.gov.

Photography style

On SF.gov, we use photos with natural lighting, real people, and real places.

We want to capture San Francisco realistically and honestly. Our website is designed to be clear and straightforward, and our imagery should be clean and direct as well.

The best images are real photos from your department's work. For example, that can be from events, around the work site, or of people who use your services (with their permission).

 

 

 

 

When to use photos

Only use photos when it enhances your message.

Photos are a type of content, just like words. Think about what value your photo will add. If your photo does not add meaning, you should not use a photo or find another one. Don’t add photos just for decoration.

 

Permissions and rights

Use photos that the photographer and subjects have given permission to use. Or you can purchase the rights to the photo from a stock photo website, like gettyimages.com.

If you choose to use a photo with a public copyright license, such as Creative Commons, you must include an attribution. You will need to include: 

  • The title of the image (if available)

  • The creator or photographer’s name

  • A link to the original source

  • The type of license that allows you to use the image

Example:

“Dave The Goat” by Case Farm, CC BY 2.0

 

Alt text

You must add alt text (or alternative text) when you upload an image to SF.gov. Alt text helps people understand the meaning of an image if they cannot see it. It is read out by screen readers, or displayed if an image does not load or if images have been switched off. 

Learn how to write good alt text in the Accessibility guide.

 

Cropping

Keep subjects in the center of the image to avoid cropping.

Images are sometimes cropped to fit in the page. Exactly how it is cropped can depend on the size of the viewer’s screen and the length of the text on your page.

Horizontal

 

 

Main subject is near the center

Main subject is on the side, could be cropped

 

Vertical

 

 

Main subject is near the center

 

Main subject is near the top or bottom, could be cropped

 

 

Things to avoid

1. Avoid images with text

Text that is embedded in an image can't be read by screen readers, can't be translated, and won't scale properly if users are using text enlargement. It's also easier for it to get accidentally cut off or distorted.

Note: Incidental text that isn't meant to be read is OK (like a sign that happens to be in the background of a photo).

Text overlaid on a photo

Text saved as an image

 

2. Avoid abstract and artistic photography, or special effects.

While these images may be attractive, they are more artistic than functional. They look artificial or obscured, and the meaning may not be clear.

Abstract or artistic

Strong filters

Special effects

3. Avoid stock photos that appear artificial or posed.

Posed models or stock photos feel less genuine and relatable. Metaphors may have hidden meanings that are not obvious or understandable to everyone.

Posed models

Metaphorical objects

Studio stock photos