Uploading images | Civio Engage Knowledge Base [ ![Civio Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.engage-vic-docs.dh1.amazee.io) [Articles](/articles) [Home](/) [Knowledge base](/articles) [✏️ Content tools](/articles?category=5) Uploading images ================ Updated 2 months ago Search Go When creating site and project content, users will often have the option to upload an image to make the page more engaging. To have an optimal display of your image, you need to consider the following image aspects: **Supported file types**Civio Engage supports the following image types: jpeg, jpg, png, svg.**Max. file upload size**The maximum image upload size supported by Civio Engage is 10 MB, with the exception of the image gallery and image carousel which supports images up to 20 MB.**Max. dimensions**The maximum width and height of an image supported by Civio Engage is Width = 5000 px, Height = 5000 px.**Recommended aspect ratio**The recommended aspect ratio for Civio Engage differs depending on the image type (e.g. carousel, image slider). The most common image ratios are 4:3 and 16:9.To optimise the display of your image on your site, follow the below instructions. Image gallery ------------- Image gallery example: ![image (72).png](/storage/articles/9493433815439.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png**Max. file upload size**20 MB**Max. dimensions**If the image is larger than 5000 px to 5000 px, it automatically resizes the image down to the largest axis. Therefore we recommend the following maximum dimensions for both axes: Width = 5000 px , Height = 5000 px .**Recommended aspect ratio**The platform allows for upload of images with any ratio. However, the images in the image gallery view will be fitted to the selected ratio (4:3 or a 16:9) for the image gallery. When clicking on an image in the gallery, the full image will open in a lightbox in its original image ratio. Click [here](/articles/9493447286543-Creating-an-image-gallery) to learn more about how to set the display ratio of the images in your image gallery.Click [here](/articles/9493447286543-Creating-an-image-gallery) to learn how to create an image gallery. Image carousel ============== Example of an image carousel: ![image (71).png](/storage/articles/9493448276879.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png**Max. file upload size**20 MB**Max. dimensions**If the image is larger than 5000 px to 5000 px, it automatically resizes the image down to the largest axis. Therefore we recommend the following maximum dimensions for both axes: Width = 5000 px , Height = 5000 px .**Recommended aspect ratio**The platform allows for upload of images with any ratio. However, the images in the image carousel view will be fitted to the selected ratio (4:3 or a 16:9) for the image gallery. When clicking on full screen button, the full image will open in a lightbox in its original image ratio. For optimal display we recommend all images to have the same ratio and this ratio being either 4:3 or a 16:9. Click [here](/articles/9493444918671-Creating-an-image-carousel) to learn more about how to set the display ratio of the images in your image carousel.Click [here](/articles/9493444918671-Creating-an-image-carousel) to learn how to create an image carousel. Before and after image slider ============================= Example of a before and after image slider: ![image (70).png](/storage/articles/9493433815951.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png**Max. file upload size**10 MB**Max. dimensions**Width = 5000 px , Height = 5000 px**Recommended aspect ratio**The ratio of the before and after image must have the same aspect ratio in order for the slider to function correctly. We recommend images with either a 4:3 or a 16:9 ratio for optimal image display. Click [here](/articles/9493473683471-Creating-an-image-slider) to learn more about how to set the display ratio of the images in your image slider.Project hero image ================== Example of a project hero image: ![image (69).png](/storage/articles/9493448277263.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png, svg**Max. file upload size**10 MB**Max. dimensions**Width = 5000 px , Height = 5000 px**Recommended aspect ratio**16:9Project thumbnail image ----------------------- Example of a thumbnail image: ![image (68).png](/storage/articles/9493448278031.png) A thumbnail image will be automatically built from the project page image. Users will not need to upload the thumbnail images. Department/Campaign hero image ============================== Example of a department/campaign hero image: ![image (67).png](/storage/articles/9493448278543.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png, svg**Max. file upload size**10 MB**Max. dimensions**Width = 5000 px , Height = 5000 px**Recommended aspect ratio**16:9WYSIWYG images ============== Example of a WYSIWYG image: ![image (66).png](/storage/articles/9493433817103.png) Instructions for optimal image display: **Supported file types**jpeg, jpg, png**Max. file upload size**10 MB**Max. dimensions**Width = 5000 px, Height = 5000 px**Recommended aspect ratio**Images uploaded through the WYSIWYG editor maintain their original image aspect ratio.Click [here](/articles/9493602548879-WYSIWYG-editor) to learn more about the WYSIWYG editor. [ Back to articles ](/articles) Table of contents ----------------- © 2026 [Civio](https://civ.io)