Image dimension Guidelines

Tips for sizing various images across the platform.

When you're customizing logos, banners, and content images, it's important to use the right dimensions to make sure they look great and professional.

General Guidelines

• Profile Avatar - 165px (w) x 165px (h)

• Community Front Page Banner - 2048px (w) x 1152px (h)

• Community Logo  - 165px (w) x 165px (h)

• Document/Event/Badge Card  - 232px (w) x 211px (h)

• Badge - 250px (w) x 250px (h)

• Space Banner - 2048px (w) x 1152px (h)

Community and Space Banner 

For Community Banners specifically, there are some special cases to keep in mind, particularly if you would like for your banner to look good on mobile devices.  For banners, you will want to try and keep text and key portions of the graphic closer to the center.  There will be a certain amount of "safe space" where the banner will not get cut off when the screen size shrinks to a narrower width, as seen on smaller mobile devices.  If you follow the guidelines below, your banner should still show the majority of the text/graphic in the area in the center even when your members are on smaller devices.  These guidelines are set to allow the area in green to display between screen sizes that are up to 2560px and down to 375px.  If you are on an ultrawide monitor, or a very narrow device, the directions below may not hold true.  

Note: the "Safe Space" dimensions are the absolute max of what will be displayed at extremes (wide and narrow) - if you would like any margins around your content at the extremes, make critical content slightly smaller than the "Safe Space".

Image Tips

• For all images, center critical content, use text only when necessary, and choose graphics that don't lose meaning when the right/left or top/bottom are clipped a bit.  Not only will this give you the best shot at the image adapting well to multiple areas, it's also more accessible for users of all abilities (screen readers can't read text on images).
• Attempt to keep in mind the largest size your image may be.  Images will adapt (larger/smaller) depending on the screen size they are on.  You will want to choose an image that is of sufficient quality to look good when sized up, or down.
• Megabytes don't grow on trees!  Remember, each image must be loaded by your members/consumers of your content.  The larger the image, the longer it takes to load.  If you follow the guidelines above, your images will look good on a 2560x1440p screen and anything smaller, while not being super heavy on memory. 

By keeping these guidelines/tips in mind, you can create visuals that are both professional and visually appealing, helping your online presence stand out from the crowd.