These are specific recommendations for each image component on SF.gov. You can read more about choosing good images in our Image guide.

Image

Recommendations

Example

Homepage campaign

  • Minimum 550 px wide

  • Horizontal is recommended

  • Can be square or vertical if your text is long

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

Profile photo

  • Minimum 300 x 300 px

  • Square

  • If you do not have a profile photo, use an image of the City Seal.

News

  • Minimum 375 px wide

  • Horizontal is recommended

  • The full image will be displayed on the news page, but it will be cropped for the thumbnail

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

Event

  • Minimum 375 px wide

  • Horizontal is recommended

  • The full image will be displayed on the event page, but it will be cropped for the thumbnail

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

Department logo

  • Minimum 100 x 100 px

  • Choose a version of your logo that is more square (rather than very tall or very wide)

  • Choose a version that doesn’t include a tagline (on a website, it may be too small to read)

  • White or transparent background recommended

Department spotlight top

  • Minimum 550 px wide

  • Square or horizontal is recommended

Department spotlight middle

  • Minimum 550 px wide

  • Square or horizontal is recommended

  • Can be vertical if your text is long

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

Topic spotlight

  • Minimum 550 px wide

  • Square or horizontal is recommended

  • Can be vertical if your spotlight text is long

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

Campaign logo

  • Minimum 100 px tall

  • Horizontal is recommended

  • White or transparent background recommended

Campaign spotlight

  • Minimum 550 px wide

  • Square or horizontal is recommended

  • Can be vertical if your spotlight text is long

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

Campaign top facts

  • Minimum 375 px wide

  • Square, vertical, or horizontal are all OK

  • Choose the same size image for all facts, if possible

Campaign featured image

  • Minimum 1000 px wide

  • Horizontal

Location

  • Minimum 700 px wide

  • Horizontal

  • (Currently hardcoded to 700x500 aspect ratio, should edit so it works like Events where full image is displayed)

Information page

  • Minimum 700 px wide for full width

  • The full image will be displayed without cropping