Size and cropping specs

 

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

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