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 District Engage. These dimensions ensure your images look great on all devices and screen sizes.
| Image type | Ideal size |
|
Hero |
Width: 750 px , Height: 500 px Aspect Ratio: 3:2 |
|
Full (only used in a Slideshow) |
Width = 1900 px , Height = 1000 px Aspect Ratio: 16:9 |
|
Thumbnails |
A thumbnail image will be automatically built from the project page image, so users will not need to upload thumbnail images. Width = 750 px , Height = 500 px Aspect Ratio: 3:2 |
| Rich Content images |
Width = 1200 px, Height = 800 px Aspect Ratio: 3:2 |
| Before and after image slider |
Width = 1200 px, Height = 800 px Aspect ratio: 3:2 |
|
Hotspot images |
Width = 1280 px, Height = 960 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 📏
District Engage uses an adaptive viewport that adjusts image dimensions based on the user's screen size and the Items per row.
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:
Hero Banners:
Important Note for Mobile Users
Banner images will be hidden on mobile devices to optimise performance and improve the user experience on smaller screens. When designing your content, remember that mobile users won't see these banner images.
File Size Recommendations 📂
To ensure fast loading times and optimal performance, keep image file sizes within 10MB. 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.