Inleiding
Op verschillende plekken in BCS Connect kun je afbeeldingen uploaden: van het belangrijk nieuwsoverzicht op de startpagina tot groepsbanners en logo's. Elke plek heeft zijn eigen ideale formaat en beeldverhouding.
In dit artikel vind je per onderdeel het aanbevolen formaat, lees je hoe afbeeldingen worden geschaald en bijgesneden, en krijg je specifiek advies voor de carouselweergave van belangrijk nieuws.
Info:
De adviezen in dit artikel gelden voor zowel desktop als de mobiele app. Op kleinere schermen wordt de afbeelding automatisch geschaald en waar nodig bijgesneden.
De adviezen in dit artikel gelden voor zowel desktop als de mobiele app. Op kleinere schermen wordt de afbeelding automatisch geschaald en waar nodig bijgesneden.
Hoe werkt het schalen van afbeeldingen?
BCS Connect snijdt je afbeelding nooit handmatig bij — het platform schaalt de afbeelding automatisch zodat die het beschikbare vak vult. Daarbij gebeurt het volgende:
- Komt de beeldverhouding overeen met het vak, dan wordt de afbeelding volledig getoond.
- Wijkt de beeldverhouding af, dan wordt de afbeelding gecentreerd en vallen de randen (links/rechts of boven/onder) buiten beeld.
Gebruik daarom altijd de aanbevolen beeldverhouding uit de tabellen hieronder, en plaats het belangrijkste deel van je afbeelding in het midden.
Tip:
Upload liever een iets te grote afbeelding dan een te kleine. Verkleinen gebeurt zonder kwaliteitsverlies; een te kleine afbeelding wordt wazig wanneer die wordt uitvergroot.
Upload liever een iets te grote afbeelding dan een te kleine. Verkleinen gebeurt zonder kwaliteitsverlies; een te kleine afbeelding wordt wazig wanneer die wordt uitvergroot.
Aanbevolen formaten per onderdeel
Startpagina
| Onderdeel | Ratio | Advies afmetingen (px) | Opmerkingen |
|---|---|---|---|
| Headerafbeelding belangrijk nieuws - gridweergave | 16:9 | 1280 x 720 | De uitsnede die je bij het plaatsen van het bericht maakt, wordt in de grid vrijwel volledig getoond. |
| Headerafbeelding belangrijk nieuws - carouselweergave | 16:9 | 1280 x 720 | De carousel snijdt de afbeelding automatisch bij op basis van de schermbreedte. Plaats het onderwerp in het midden en vermijd tekst in de afbeelding. Zie Belangrijk nieuws in de carousel hieronder. |
| Banner widget naast nieuwsoverzicht (2 banners) | 16:9 | 640 x 360 | |
| Banner widget naast nieuwsoverzicht (3 banners) | - | 300 x 107 | |
| Banner widget naast tijdlijn | 16:9 | 640 x 360 | De minimale breedte is 600 pixels. Afbeeldingen voor widgets kunnen in elke lengte geüpload worden. De afbeelding wordt geschaald. |
Logo's
| Onderdeel | Ratio | Advies afmetingen (px) | Opmerkingen |
|---|---|---|---|
| Logo startpagina | - | 400 x 160 | De afbeelding wordt geschaald. |
| Logo mobiele app | - | 120 x 30 | Bij het gebruik van een grotere afmeting wordt het logo afgesneden. |
Achtergrond
| Onderdeel | Ratio | Advies afmetingen (px) | Opmerkingen |
|---|---|---|---|
| Achtergrond platform | 16:9 | 1920 x 1080 | |
| Achtergrond inlogscherm | 16:9 | 1920 x 1080 | De achtergrond wordt aan de linkerkant afgesneden (460 pixels). |
Groepen
| Onderdeel | Ratio | Advies afmetingen (px) | Opmerkingen |
|---|---|---|---|
| Groepsicoon | 1:1 | 500 x 500 | |
| Groepsbanner | - | 1108 x 158 | Bij een andere afmeting wordt de afbeelding geschaald. Je kunt de afbeelding bijsnijden in BCS Connect. Let op: de afbeelding wordt aan de linkerkant diagonaal afgesneden. |
| Snelkoppeling binnen groep | 16:9 | 640 x 360 | De minimale breedte is 600 pixels. Afbeeldingen voor widgets kunnen in elke lengte geüpload worden. De afbeelding wordt geschaald. |
Programma manager, agenda en applicaties
| Onderdeel | Ratio | Advies afmetingen (px) | Opmerkingen |
|---|---|---|---|
| Header programma manager | 16:9 | 640 x 360 | |
| Banner evenement | - | 500 x 246 | Bij een andere afmeting wordt de afbeelding geschaald. Je kunt de afbeelding bijsnijden in BCS Connect. Let op: de afbeelding wordt aan de linkerkant diagonaal afgesneden. |
| Applicatie icoon | 1:1 | 500 x 500 |
Belangrijk nieuws in de carousel
Belangrijk nieuws kan op de startpagina op twee manieren worden getoond: als grid (vaste tegels) of als carousel (schuivende kaarten). Beide weergaven gebruiken dezelfde headerafbeelding, maar tonen die anders:
- Gridweergave: elke tegel heeft een vaste verhouding van ongeveer 16:9. De uitsnede die je bij het plaatsen van het bericht maakt, komt vrijwel één-op-één in beeld.
- Carouselweergave: de kaarten hebben een vaste hoogte, maar de breedte past zich aan het scherm aan. De beeldverhouding van een kaart varieert daardoor van ongeveer 4:3 op smalle schermen tot ruim 2:1 op brede schermen. De afbeelding wordt gecentreerd en vult de kaart altijd volledig — de randen die niet passen, vallen buiten beeld.
Daarnaast toont de carousel informatie over de afbeelding heen: onderin de kaart staat een gekleurde balk met de titel van het bericht en de knop Lees meer, en linksboven kunnen de labels Belangrijk en Nieuw staan.
Houd je daarom bij carousel-afbeeldingen aan deze richtlijnen:
- Gebruik een afbeelding van minimaal 1280 x 720 pixels (16:9).
- Plaats het onderwerp (gezicht, product, blikvanger) in het midden van de afbeelding.
- Houd de buitenste 15% van de randen vrij van belangrijke elementen — dit deel kan wegvallen, afhankelijk van de schermbreedte.
- Houd er rekening mee dat de onderste 30% van de kaart wordt afgedekt door de titelbalk, en de linkerbovenhoek door de labels.
Let op:
Vermijd afbeeldingen met tekst, logo's of andere grafische elementen die precies in beeld moeten blijven. In de gridweergave ogen die prima, maar in de carousel worden ze vrijwel altijd deels afgesneden of afgedekt. Zet tekst in de titel van het bericht — die blijft altijd leesbaar.
Vermijd afbeeldingen met tekst, logo's of andere grafische elementen die precies in beeld moeten blijven. In de gridweergave ogen die prima, maar in de carousel worden ze vrijwel altijd deels afgesneden of afgedekt. Zet tekst in de titel van het bericht — die blijft altijd leesbaar.
Tip:
Twijfel je of een afbeelding geschikt is? Bekijk de startpagina na het plaatsen op zowel een breed beeldscherm als in de mobiele app (of een versmald browservenster). Zo zie je direct wat er in beeld blijft bij verschillende schermbreedtes.
Twijfel je of een afbeelding geschikt is? Bekijk de startpagina na het plaatsen op zowel een breed beeldscherm als in de mobiele app (of een versmald browservenster). Zo zie je direct wat er in beeld blijft bij verschillende schermbreedtes.
Problemen oplossen
Mijn afbeelding ziet er goed uit in de grid, maar wordt afgesneden in de carousel
- Dit is verwacht gedrag: de carousel heeft geen vaste beeldverhouding en snijdt de afbeelding per schermbreedte anders bij, terwijl de grid de uitsnede vrijwel volledig toont.
- Controleer of het onderwerp van de afbeelding in het midden staat. Verplaats belangrijke elementen weg van de randen en de onderste 30%.
- Staat er tekst of een logo in de afbeelding? Verwijder die uit de afbeelding en gebruik de titel van het bericht voor de boodschap.
- Pas eventueel de uitsnede aan: bewerk het bericht en snijd de headerafbeelding opnieuw bij met het onderwerp centraal in beeld.
Mijn afbeelding is wazig of korrelig
- De geüploade afbeelding is waarschijnlijk kleiner dan het aanbevolen formaat en wordt uitvergroot. Upload een grotere versie (zie de tabellen hierboven).
- Gebruik bij voorkeur een JPG- of PNG-bestand rechtstreeks van de bron, niet een screenshot of een eerder verkleinde versie.
De titelbalk valt over het belangrijkste deel van mijn afbeelding
- In de carousel staat de titelbalk altijd over de onderste circa 30% van de kaart. Kies of maak een afbeelding waarbij het onderwerp in het bovenste twee derde van het beeld staat.
Kom je er niet uit? Stuur een e-mail naar support.plek@bcs-hr.com.