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.
Event Use on: 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
Minimum 400 px high
16:5 aspect ratio is recommended
Ideal size:
2400 px wide
750 px high
On desktop and tablet, part of image center will be covered by white title background
Search "headerimage" in Karl Images for some you can use
Information page Use on: Information
Minimum 700 px wide for full width
The full image will be displayed without cropping
Location Use on: Location
Minimum 700 px wide
Horizontal
Recommend 700x500 aspect ratio
Minimum 100 x 100 px
Square is recommended
White or transparent background recommended
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)
News Use on: 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
Profile photo Use on: Profile
Minimum 345 x 345 px
Square
Keep subjects near the top of the image for the best focal point
Minimum 1080 px wide
Minimum 350 px height
Recommended aspect ratio 4:3
Square or horizontal is recommended
Can be vertical if your text is long
Keep subjects in the center of the image to avoid cropping
You can choose:
Full width image with text at the bottom
Half-width image side by side with text. You can display the image on the left or the right.
Top fact Use on: Campaign
Minimum 375 px wide
Square, vertical, or horizontal are all OK
Choose the same size image for all facts, if possible
Last updated