Recommended Custom Image Formats
Learn which dimensions and file size your images for the Help Center theme should ideally have, and which image formats are supported.
Header Logo
The header logo is shown on the top left in the header navigation.
Allowed | Recommended | |
|---|---|---|
Image dimensions | Any dimensions are accepted but the image will be displayed with a maximum height of 40px. | Since a logo can differ of it’s dimensions, we recommend to create a image which uses the full height of 40px and has a minimum width of 40px. Our image in this documentation has the dimensions of: |
Image file size | Maximum of 20MB | ~10kb |
Image formats | JPG, PNG, SVG | SVG |
Favicon
The favicon is shown in the browser tab and can be customized from the header settings in the theme configurator.
Allowed | Recommended | |
|---|---|---|
Image dimensions | For the image to show up as a favicon in some operating systems or on Google Search results, the image must be square. | Since this is shown in the browser tab, we recommend to use the size of 32x32 Our image in this documentation has the dimensions of: |
Image file size | Maximum of 20MB | ~1kb |
Image formats | JPG, PNG, ICO | PNG |
Banner Image on Portal and Content Source Page (Hero Layout)
The banner image is shown in the top section of the content source page and portal page.
Allowed | Recommended | |
|---|---|---|
Image dimensions | Background image with no dimension settings. Resizes to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Center point of the image is the top left corner. The fixed height of the shown area is 380px. | We recommend to use image dimensions which also serve larger screens, so the image won’t get blurry on these larger screens. Our image in this documentation has the dimensions of: |
Image file size | Maximum of 20MB | ~250kb |
Image formats | JPG, PNG, SVG | PNG / SVG |
Banner Image on Content Source Page (Detail Layout)
The banner image is shown in the top section of the content source page.
Allowed | Recommended | |
|---|---|---|
Image dimensions | Background image with no dimension settings. Resizes to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Center point of the image is the top left corner. The fixed height of the shown area is 200px. | We recommend to use a image dimensions which servers also bigger screen so the image won’t get blurry on bigger screen sizes. For guidance, the banner image in this documentation has the dimensions of 6027x2519. |
Image file size | Maximum of 20MB | ~250kb |
Image formats | JPG, PNG, SVG | PNG / SVG |
Footer Logo
The footer logo is shown on the bottom left in the site footer.
Allowed | Recommended | |
|---|---|---|
Image dimensions |
| We recommend to use a image dimensions which uses the maximum width and height of 100x80 and leave a transparent background for space you might not need to use. The image in this documentation has the dimensions of: |
Image file size | Maximum of 20MB | ~250kb |
Image formats | JPG, PNG, SVG | SVG |
Images Within the Articles
Scroll Sites displays images in their original size. Learn how to resize images.
We recommend you respect the following for images within articles:
Keep the file size of images as small as possible. We recommend compress every image before uploading it to the Confluence page.
A thumb rule for image file size is that an image should have a maximum file size of ~1mb.Make sure your images are optimized in their dimensions. E.g. uploading an App icon with the dimensions of 500x500px.