Image Dimensions Cheat Sheet | Civio Engage Knowledge Base [Skip to content](#main) [ ![Civio Engage Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io) [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [ Support portal ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) Toggle navigation [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [Support portal](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) 1. [Home](/) › 2. [Product documentation](/articles) › 3. [Tips, Tricks and Best Practices](/articles?category=14) › 4. Image Dimensions Cheat Sheet Image Dimensions Cheat Sheet ============================ Updated 12 hours ago · 3 min read Search Search **High-quality images play a crucial role in enhancing the visual appeal and user engagement.** This guide offers best practices for selecting the right image sizes for your content. ### Suggested Image Dimensions Here are the recommended image dimensions for different tools on Civio Engage. These dimensions ensure your images look great on all devices and screen sizes. **Image type****Ideal size**Hero ![A project hero image on the public site, spanning the width of the page](https://engage.knowledge.civ.io/storage/wWPhdIaFxBz0chss1D8UrisRES0nyY5VWQfchEDv.png) Width: 1000 px, Height: 500 px (the default; Card 500×250, Thumb 500×500 and X Large 1800×900 are also available under Settings → Appearance → Hero image size) Aspect Ratio: **2:1** Full (only used in a Slideshow) ![A full-width slideshow image on a public page, with previous and next arrows](https://engage.knowledge.civ.io/storage/2cm9cTl4Yonl0y8SdDXMICCBB4OD7GQYG2Mxg7fe.png) No fixed pixel size. The Image gallery block's slideshow display uses a fixed aspect ratio instead: choose **16:9** or **4:3** when you add the block. Thumbnails ![A project card on the public site, showing its thumbnail and summary](https://engage.knowledge.civ.io/storage/kXLcEvNKJY6F3DXX5a78IPnqNQvAOQcxsB8xGPKg.png) A thumbnail image will be automatically built from the project page image, so users will not need to upload thumbnail images. Width = 500 px , Height = 250 px Aspect Ratio: **2:1** Rich Content images ![A rich content image placed within page text](https://engage.knowledge.civ.io/storage/c82LQuiT0QYH30dQMptMEKvJ0pAwrd37zrzJZiOf.png) Width = 1200 px, Height = 800 px Aspect Ratio: **3:2** Image slider ![An image slider comparing two versions of the same photograph](https://engage.knowledge.civ.io/storage/Z832QdTQCzoSeqyrO0IaUnO2Sc5K9hWZ0YuxQVK6.png) **Keep both images the same dimensions** for best results. Available aspect ratio settings: **Original**, **1:1**, **16:9** Landscape, **16:9** Portrait, **4:3** Landscape and **4:3** Portrait. Only 16:9 and 4:3 have separate landscape and portrait options; 1:1 and Original do not. Recommended minimum: Width = 800 px, Height = 600 px Hotspot images ![A hotspot image, with coloured hotspot markers placed over an aerial photograph](https://engage.knowledge.civ.io/storage/7viCwEhPr4Dhdpv84OW44SEKfk2Aoyj3qSPMHwNR.png) Width = 1200 px, Height = 900 px Aspect ratio: **4:3** ### Banner Dimensions and View Width Banner dimensions have a variable view width that affects how much of the image is visible to users. The view width varies based on the device's screen size, which means only a portion of your uploaded banner may be visible at any given time. As shown in the examples above, the same banner displays differently at two common view widths. This adaptability ensures your content looks good across different devices and screen resolutions. ### Adaptive images 📏 Civio Engage adapts to the visitor's screen. For cards, the number of images per row changes with the width. For banners, the image is not resized: it is cropped, and how much of it you see changes with the width. The visible portion starts at 55% of the page width on screens from 960 pixels, 60% from 1200 pixels and 63% from 1800 pixels, where the angled edge also straightens out. Because of this adaptability, banner dimensions can vary with screen width. Here are a few examples of how images adjust on different screens: **Card Thumbnails:** ![Project cards on a wide screen, showing three thumbnails side by side](https://engage.knowledge.civ.io/storage/joZyyGsQxu4qqafPy1pUhbk7ct0uTrBeS5BQC46l.png) ![Project cards on a narrower screen, showing two thumbnails side by side](https://engage.knowledge.civ.io/storage/fDx0kCB8EDJjtnyNPs2w3BE0gj2ssiB1vyrueRt8.png) **Hero Banners:** ![A hero banner at 1080 pixels wide](https://engage.knowledge.civ.io/storage/LJ37KKHhadkoeO96HQGl6zIx1QnPReytA5JtnBLl.png) ![The same project banner in a browser window 900 pixels wide. On the Default site style the banner photograph is hidden below 960 pixels, so the banner is flat brand colour carrying only the title, summary, status and closing date, and the site navigation has collapsed to a menu button.](https://engage.knowledge.civ.io/storage/HDdVLghA0t6SiqDXaWmAaQ8oxgx7jUeK0lWiuXIN.png) The same banner at 1080 pixels and at 900 pixels. Below 960 pixels the photograph is not shown at all and the banner falls back to your brand colour with the title, summary and status. #### Important Note for Mobile Users Banner images are hidden on any screen narrower than 960 pixels, which covers phones, most tablets in portrait, and any browser window a visitor has made small. This applies when your site uses the Default site style with the Default hero style. If your site uses the **Kiwi** or **Spacious** site styles, the banner image is shown at every width. The **Wide image** hero style also shows the image at every width, but it applies only to your homepage banner, so it makes no difference to a project banner. When designing your content, remember that visitors on a narrow screen will not see the banner image at all, so never put anything essential in it. ### File Size Recommendations 📂 To ensure fast loading times and optimal performance, keep image file sizes within **20MB**. This balance maintains image quality without compromising speed. ### Effective Use of Image Banners 🖼️ - Image banners should be used to enhance the accessibility and visual impact of your projects. We recommend avoiding text within images to ensure readability across all devices. - Choose images with ample space around the focal point for better visual appeal. Was this article helpful? ------------------------- Your feedback helps us prioritise what to rewrite. Yes No [ Back to Tips, Tricks and Best Practices ](/articles?category=14) On this page ### Still need help? Raise a request in the support portal and track it to resolution. [ Submit a support request ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) Submit a support request through the [support portal](/portal) or email . © 2026 [Civio](https://civ.io) [Privacy Policy](/articles/privacy-policy) [Terms of Use](/articles/terms-of-use)