This article is here to help you with uploading images to the Haiilo platform. It outlines the required aspect ratios, pixel dimensions (width x height), and other specifications for various platform features that include images.
General notes on image uploading
- File Size Limits: Most standard image uploads have a 10MB limit. The Studio editor supports images up to 25MB. While some features have no explicit size limit, we recommend keeping images below 10MB whenever possible to ensure quick loading. Larger images will take more time to load.
- Supported Formats: JPEG and PNG are generally supported across the platform. Some features may support other formats. GIFs are only supported on the timeline or within the rich text editor.
- Vector Graphics: For branding (logos/white label app assets), SVG is highly recommended or required to ensure the user interface remains sharp across all screen resolutions.
- Ratio Enforcement: When you upload an image that doesn't match the required ratio for a feature, Haiilo will activate a cropping tool, helping you adjust the focus easily. If the image has been uploaded earlier to the file library, the system will automatically crop it to fit the ratio of the element to which you add the image.
- Compression: Images uploaded to Haiilo will be compressed to smaller file sizes for performance reasons and to ensure faster load times. Images are converted using the Java ImageIO library, aiming for a compression quality of 85%. The output is always a JPEG. If you notice that one of your images is blurry, you can try uploading a larger image to see if that resolves the issue.
- Display Impact: Images are downscaled to provide a suitable image size for their display location. For example, a user avatar is very small in the comment section, so we show an XS image. These variants are available in the following target widths, in pixels: XS (40), S (80), M (160), L (400), XL (800), XXL (1200), and ORIGINAL for the original size of your uploaded image.
- File Previews: For information about supported file formats that generate a preview and can be opened and viewed directly on the platform, read Supported file formats for previews.
User profiles
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Profile/Avatar Image | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | |
| Cover Image | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Pages and Communities
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Page and Community Avatar | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | |
| Cover Image (only Pages) | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Events
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Profile Image | 1080 x 1080 px 3000 x 3000 px |
1:1 | 10MB | With Haiilo AVA, you can automatically generate event images. Learn more. |
| Cover Image | 2400 x 400 px 3600 x 600 px |
6:1 | 10MB |
Studio
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Image in Studio Post or Newsletter | Any | Any | 25MB |
Supported image formats in the Studio are JPEG, PNG, GIF, BMP, WebP, and AVIF. Images keep their original size when uploaded and can be aligned to the center, left, or right. For the teaser, you can select a focal point for your images to control how they appear in widgets, on digital signage, on the mobile app, etc. |
Apps and Widgets
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Blog App Teaser Image (Large) | 1920 x 640 px 2400 x 800 px | 3:1 | - | This image is displayed in widgets (e.g., Latest blog articles) and on the mobile app. |
| Blog App Teaser Image (Small) | 1080 x 1080 px 3000 x 3000 px |
1:1 | - | This image is used in the blog app overview, in studio newsletters, when the blog is shared on the timeline, and when reading the blog article in the browser, if selected. |
| Timeline | Any | Any | - | Images are displayed in a flexible grid. When multiple images are uploaded, they are resized to the same height while maintaining their original widths. Learn more in Attachments & links on the timeline. |
| Teaser Widget |
Wide: e.g., 1185 x 395 px Square: e.g., 860 x 860 px Custom: Defined by set height |
Wide: 3:1 Square: 1:1 Custom: Defined by set height |
- |
"Custom" size allows manual height; GIFs only work in "Custom" mode. Although there is no specific size limit, 10MB is recommended for optimal results and faster loading. |
| Image Widget | Any | Any | - | The image's aspect ratio will be retained, but its size depends on the column the widget is added to; a narrower column = a smaller image. Learn more in Adding widgets. |
| Media Widget | Any | Any | - |
Images in the Media widget are arranged in a grid. If you have an odd number of images, the first image is displayed at a 2:1 ratio, while the remaining images are at a 1:1 ratio. For an even number of images, all images appear in a 1:1 ratio. When opened, the images display in their original ratios. |
| Rich Text Editor Widget | Any | Any | - | Images can be resized by dragging the corners or by manually entering width and height in pixels. Learn more in Adding images and videos in the rich text editor. |
Hero teasers
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Slider Hero Teaser (Desktop) | 1920 x 640 px 2400 x 800 px | 3:1 | 10MB | |
| Slider Hero Teaser (Mobile) | 1024 x 768 px 1200 x 900 px | 4:3 | 10MB | |
| Cards Hero Teaser (Primary image) | 2000 x 1000 px 2400 x 1200 px |
2:1 | 10MB | |
| Cards Hero Teaser (Secondary images) | 800 x 1000 px 1080 x 1350 px |
4:5 | 10MB |
Platform theme
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Front Logo (Login) | Min. 80 px (height) | Varies | - | |
| Navigation Bar Logo | Min. 100 px (height) | Varies | - | SVG format recommended for quality. |
| Favicon | 16 x 16 px | 1:1 | - | Must be in .ico format. |
| iOS Homescreen Icon | 180 x 180 px | 1:1 | - |
PNG format. Used when bookmarking the URL to a mobile home screen. |
Launchpad
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Launchpad | 180 x 180 px | Any, but 1:1 recommended | - |
A launchpad icon is automatically retrieved from the URL you provide for the launchpad. You can manually replace it if necessary. The icon is automatically placed on a white background, resulting in a white border. The aspect ratio of an uploaded image will be maintained, but we recommend using a 1:1 ratio to ensure the icon remains visible. |
Mobile app
| Feature | Example Dimensions | Aspect Ratio |
Max. Size Limit | Notes |
|---|---|---|---|---|
| Image/Banner for Mobile Dashboard |
Single image: Min. 54 px (height) Two images: e.g., 1080 x 1080 px Masonry grid:
|
Single image: Varies Two images: 1:1 Masonry grid:
|
10MB |