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 |
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:
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.