Page Comparison

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.

When to use photos

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

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

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.

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.

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.

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.