Recommended Custom Image Formats
On this page you will learn which dimensions your images for the theme should ideal have, which file sizes your images should be and which image formats the Help Center theme is supporting.
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. |
Image file size | Within the Confluence upload limit | ~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 editor.
Allowed | Recommended | |
|---|---|---|
Image dimensions | - | Since this is shown in the brower tab, we recommend to use the size of 32x32 Our image in this documentation has the dimensions of: |
Image file size | Within the Confluence upload limit | ~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 | Within the Confluence upload limit | ~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 | Within the Confluence upload limit | ~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 | Within the Confluence upload limit | ~250kb |
Image formats | JPG, PNG, SVG | SVG |
Images Within the Articles
Scroll Viewport 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.