Introduction
You can upload images in various places in BCS Connect: from the featured news overview on the home page to group banners and logos. Each place has its own ideal size and aspect ratio.
In this article you will find the recommended size for each element, learn how images are scaled and cropped, and get specific advice for the carousel view of featured news.
Info:
The recommendations in this article apply to both desktop and the mobile app. On smaller screens the image is automatically scaled and cropped where necessary.
The recommendations in this article apply to both desktop and the mobile app. On smaller screens the image is automatically scaled and cropped where necessary.
How does image scaling work?
BCS Connect never crops your image manually — the platform scales the image automatically so that it fills the available area. The following happens:
- If the aspect ratio matches the area, the image is shown in full.
- If the aspect ratio differs, the image is centered and the edges (left/right or top/bottom) fall outside the frame.
Therefore, always use the recommended aspect ratio from the tables below, and place the most important part of your image in the center.
Tip:
It is better to upload an image that is slightly too large than one that is too small. Downscaling happens without loss of quality; an image that is too small becomes blurry when it is enlarged.
It is better to upload an image that is slightly too large than one that is too small. Downscaling happens without loss of quality; an image that is too small becomes blurry when it is enlarged.
Recommended sizes per element
Home page
| Element | Ratio | Recommended dimensions (px) | Notes |
|---|---|---|---|
| Header image featured news - grid view | 16:9 | 1280 x 720 | The crop you make when publishing the post is shown almost entirely in the grid. |
| Header image featured news - carousel view | 16:9 | 1280 x 720 | The carousel crops the image automatically based on the screen width. Place the subject in the center and avoid text in the image. See Featured news in the carousel below. |
| Banner widget next to news overview (2 banners) | 16:9 | 640 x 360 | |
| Banner widget next to news overview (3 banners) | - | 300 x 107 | |
| Banner widget next to timeline | 16:9 | 640 x 360 | The minimum width is 600 pixels. Images for widgets can be uploaded in any length. The image is scaled. |
Logos
| Element | Ratio | Recommended dimensions (px) | Notes |
|---|---|---|---|
| Logo home page | - | 400 x 160 | The image is scaled. |
| Logo mobile app | - | 120 x 30 | When using a larger size, the logo is cut off. |
Background
| Element | Ratio | Recommended dimensions (px) | Notes |
|---|---|---|---|
| Background platform | 16:9 | 1920 x 1080 | |
| Background login screen | 16:9 | 1920 x 1080 | The background is cut off on the left side (460 pixels). |
Groups
| Element | Ratio | Recommended dimensions (px) | Notes |
|---|---|---|---|
| Group icon | 1:1 | 500 x 500 | |
| Group banner | - | 1108 x 158 | When using a different size, the image is scaled. You can crop the image in BCS Connect. Please note: the image is cut off diagonally on the left side. |
| Shortcut within group | 16:9 | 640 x 360 | The minimum width is 600 pixels. Images for widgets can be uploaded in any length. The image is scaled. |
Programme manager, calendar and applications
| Element | Ratio | Recommended dimensions (px) | Notes |
|---|---|---|---|
| Header programme manager | 16:9 | 640 x 360 | |
| Banner event | - | 500 x 246 | When using a different size, the image is scaled. You can crop the image in BCS Connect. Please note: the image is cut off diagonally on the left side. |
| Application icon | 1:1 | 500 x 500 |
Featured news in the carousel
Featured news can be shown on the home page in two ways: as a grid (fixed tiles) or as a carousel (sliding cards). Both views use the same header image, but display it differently:
- Grid view: each tile has a fixed ratio of approximately 16:9. The crop you make when publishing the post appears almost one-to-one on screen.
- Carousel view: the cards have a fixed height, but the width adapts to the screen. The aspect ratio of a card therefore varies from approximately 4:3 on narrow screens to over 2:1 on wide screens. The image is centered and always fills the card completely — the edges that do not fit fall outside the frame.
In addition, the carousel shows information on top of the image: at the bottom of the card there is a colored bar with the title of the post and the Read more button, and in the top left the labels Featured and New may appear.
Therefore, follow these guidelines for carousel images:
- Use an image of at least 1280 x 720 pixels (16:9).
- Place the subject (face, product, eye-catcher) in the center of the image.
- Keep the outer 15% of the edges free of important elements — this part may fall outside the frame, depending on the screen width.
- Keep in mind that the bottom 30% of the card is covered by the title bar, and the top left corner by the labels.
Please note:
Avoid images with text, logos or other graphic elements that must remain precisely in view. In the grid view they look fine, but in the carousel they are almost always partially cut off or covered. Put text in the title of the post — it always remains readable.
Avoid images with text, logos or other graphic elements that must remain precisely in view. In the grid view they look fine, but in the carousel they are almost always partially cut off or covered. Put text in the title of the post — it always remains readable.
Tip:
Not sure whether an image is suitable? After publishing, check the home page on both a wide monitor and in the mobile app (or a narrowed browser window). That way you can see immediately what remains in view at different screen widths.
Not sure whether an image is suitable? After publishing, check the home page on both a wide monitor and in the mobile app (or a narrowed browser window). That way you can see immediately what remains in view at different screen widths.
Troubleshooting
My image looks good in the grid, but is cut off in the carousel
- This is expected behavior: the carousel has no fixed aspect ratio and crops the image differently per screen width, while the grid shows the crop almost entirely.
- Check whether the subject of the image is in the center. Move important elements away from the edges and the bottom 30%.
- Is there text or a logo in the image? Remove it from the image and use the title of the post for the message.
- If necessary, adjust the crop: edit the post and re-crop the header image with the subject centered in the frame.
My image is blurry or grainy
- The uploaded image is probably smaller than the recommended size and is being enlarged. Upload a larger version (see the tables above).
- Preferably use a JPG or PNG file directly from the source, not a screenshot or a previously downscaled version.
The title bar covers the most important part of my image
- In the carousel, the title bar always covers the bottom approximately 30% of the card. Choose or create an image where the subject is in the top two thirds of the frame.
Can't figure it out? Send an email to support.plek@bcs-hr.com.