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.

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

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

Only use photos that the photographer and subjects have given permission to use. Once you upload a photo to SF.gov, it can be used across the website. You can use your own photos, use photos that are publicly available, or 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. No images with text

Text embedded in an image can't be read by screen readers. Images with words or numbers on them are not accessible, because sighted users can get information from them while people who use screen readers can’t. Images with text embedded do not comply with the City’s Digital Accessibility and Inclusion Standard and cannot be used on SF.gov.

Images with text won’t display right on smaller screens like phones. For low vision users, who frequently magnify webpages, the images won't scale properly if users are using text enlargement. It's also easy for text in images to get cut off or distorted.

Text in images cannot be translated, nor can alt text.

Additionally, all images will may be cropped, depending on screen size and where the image shows. If you post an image of your poster, the edges will get cropped as and the impact will be lost. Use the image and add text in the text fields on SF.gov for maximum impact.

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).

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.