Afbeeldingen en video's gebruiken in Totara

Afbeeldingen gebruiken

In deze sectie hebben we enkele tips gegeven voor het gebruik van afbeeldingen in Totara, evenals aanbevolen formaten voor verschillende afbeeldingen, en enkele voorbeelden van hoe we afbeeldingen hebben gebruikt op onze Totara Community en Academy-sites.

Algemene richtlijnen

Hier zijn enkele algemene richtlijnen waarmee je rekening moet houden bij het toevoegen van afbeeldingen aan je site:

• Gebruik web-geoptimaliseerde bestandsformaten zoals SVG of JPG/JPEG. Dit zal helpen om snellere laadtijden en efficiënter mobiel datagebruik te bieden voor gebruikers die de site bezoeken op mobiele apparaten. Let op dat het SVG-afbeeldingsbestandsformaat momenteel niet wordt ondersteund in de Totara Mobile-app, dus je moet alternatieve afbeeldingsbestandsformaten gebruiken voor inhoud die compatibel moet zijn met de app.
• PNG-bestanden zijn gewoonlijk groter, maar dit formaat ondersteunt transparante achtergronden. Het PNG-formaat wordt daarom aanbevolen wanneer je afbeelding een transparante achtergrond heeft.
• Vermijd het toevoegen van tekst aan afbeeldingen waar mogelijk. Als je tekst in een afbeelding moet gebruiken, probeer dan niet meer dan drie woorden te gebruiken. Overweeg hoe leesbaar de tekst zal zijn wanneer deze kleiner wordt en getoond op kleinere apparaten, zoals smartphones.
• Plaats geen belangrijke informatie (bijvoorbeeld tekst, logo's of gezichten) rond de buitenranden van afbeeldingen, omdat sommige afbeeldingen niet in hun oorspronkelijke verhouding worden weergegeven en er dus bijgesneden wordt. We raden je aan om een 20% veilige zone rond de buitenrand van afbeeldingen te laten.
• Vermijd te grote bestanden en zoek in plaats daarvan naar de juiste balans tussen beeldkwaliteit en bestandsgrootte.
• Zorg ervoor dat de kleurmodus van afbeeldingen is ingesteld op RGB (voor webgebruik), niet op CMYK (voor afdrukken), ongeacht de gebruikte software (bijv. Photoshop, Canvas, Illustrator of Gimp).
• Wanneer je afbeeldingen van ergens anders maakt, kun je gewoonlijk een actie 'bewaar als' of 'exporteer afbeeldingen als' doen en vervolgens een geschikt bestandstype selecteren, zoals JPG of PNG.
• Een resolutie van 72 dpi (of ppi) is voldoende voor gebruik op de website, terwijl een resolutie van 300 dpi wordt aanbevolen voor afdrukken.

Inspireer thema-items

Afbeelding inlogpagina

Standaard inlogpagina afbeelding: 1200px x 1000px

Aanbevolen inlogpagina afbeelding (niet-SVG): 1200px x 1200px

JPEG-, PNG- en SVG-bestandsformaten worden geaccepteerd en PNG-bestanden hebben de voorkeur voor illustratieve afbeeldingen. We raden aan om de bestandsgrootte zo klein mogelijk te houden (zonder afbreuk te doen aan de kwaliteit), met een minimum DPI van 150. Zorg ervoor dat alle tekst in de afbeelding voldoende contrast heeft met de achtergrond, zodat de afbeelding toegankelijk is.

Verouderde inlogpaginabanner

Standaard inlogpaginabanner:  1672px x 430px

Inlogpaginabanner gebruikt in de Community:  1672px x 215px, JPEG-bestand

Standaard cursus-, programma- en certificeringsafbeeldingen

Standaard programma/cursus afbeelding:  960px x 540px

1280px x 720px levert betere kwaliteit, met toekomstige ondersteuning voor afbeeldingen van netvlieskwaliteit. 960px x 540px is de minimum aanbevolen minimumgrootte. Bij 480px x 270px zal de beeldkwaliteit in sommige gevallen verminderen.

Afbeeldingen van cursussen, programma's en certificeringen worden automatisch herschaald, dus als je een vierkante afbeelding gebruikt, wordt deze verticaal of horizontaal bijgesneden op verschillende pagina's.

Voorbeeld cursusafbeelding:

Cursusafbeelding in het huidige leerblok:

Bronafbeeldingen

Standaard bronafbeelding: 960px x 540px

1280px x 720px levert betere kwaliteit, met toekomstige ondersteuning voor afbeeldingen van netvlieskwaliteit. 960px x 540px is de minimum aanbevolen minimumgrootte. Bij 480px x 270px zal de beeldkwaliteit in sommige gevallen verminderen.

Plaats het interessante punt van de afbeelding (bijv. een icoon, tekst, het gezicht van een persoon) in het midden, omdat dit het veilige gebied is dat niet bijgesneden zal worden. De afbeelding zal bijgesneden worden op andere apparaten (zoals mobiele apparaten) en kleinere schermen (bijv. laptops), maar de centrale zone zal nog steeds zichtbaar zijn. Hier kun je een voorbeeld zien van een bronafbeelding met tekst en hoe de tekst en het icoon in de veilige zone zijn uitgelijnd.

Afbeelding met tekst:

Afbeelding met een veilige zone eroverheen gelegd:

Werkgroep afbeeldingen

Standaardafbeelding van de werkgroep:  960px x 960px

1280px x 1280px levert betere kwaliteit, met toekomstige ondersteuning voor afbeeldingen van netvlieskwaliteit. 960px x 960px is de minimum aanbevolen minimumgrootte, met gedeeltelijke toekomstige ondersteuning voor afbeeldingen van netvlieskwaliteit. Bij 480px x 480px zal de beeldkwaliteit in sommige gevallen verminderen.

Zoals met de bronafbeeldingen, plaats je de hoofdfocus van de afbeelding in het midden, omdat de veilige zone van de afbeelding van de werkgroep beperkt is tot een vierkant in het midden, zoals getoond in het voorbeeld.

Afbeelding werkgroep:

Werkgroepafbeelding met een veilige zone eroverheen gelegd:

Werkgroepafbeelding in context:

Logo's en favicons

Logo: Een horizontaal logo zonder marges heeft de voorkeur. Een SVG-bestand wordt aanbevolen om de beste beeldkwaliteit op verschillende groottes te behouden.

Favicon: Dit icoontje zal getoond worden naast de site/paginanaam in de browser tab en in de browser bladwijzers. ICO-bestanden worden aanbevolen, maar PNG-bestanden worden ook ondersteund. De optimale grootte is 16px x 16px (meest voorkomend) of 32px x 32px.

Andere voorzieningen van de gemeenschap/academie

Badgegrootte:  426px x 426px, PNG-formaat (bevat transparantie)

Plaats geen tekst op badge-afbeeldingen. Badges worden gewoonlijk naast de cursus- of programmatitel getoond. Eenvoud is belangrijk, dus probeer bij het ontwerpen van badge-afbeeldingen het aantal elementen, kleuren en vormen tot een minimum te beperken, omdat badges op sommige plaatsen zo klein als 100px x 100px kunnen worden weergegeven.

Blokken met uitgelichte links: We gebruiken twee dimensies voor tegels in blokken met uitgelichte links: 

• Vierkant: 500px x 500px
• Landschap:  500px x 375px

banners over de volledige breedte: Desktopbanners zijn 1650px x 188px en mobiele banners zijn 600px x 177px.

Community feedback formulierbanner:  1280px x 223px

Academy quiz iconen: 115px x 100px, PNG's met transparante achtergronden

Op de Totara Academy bevat de vraagtekst in de toetsactiviteiten het toetsicoon. Dit icoontje is links uitgelijnd in de afbeeldingseigenschappen. 

Video gebruiken

In deze sectie hebben we belangrijke informatie en best practice-richtlijnen voor het toevoegen van video aan je Totara-site uiteengezet.

Algemene aanbevelingen

Hier zijn enkele algemene richtlijnen waarmee je rekening moet houden bij het toevoegen van video's aan je site:

• De meeste video's worden opgenomen in minstens 1080p (Full HD) met 24 frames per seconde (fps). Zie onderstaande tabel voor meer informatie over algemene videoformaten.
• De standaard beeldverhouding voor video's is 16:9. De term 'beeldverhouding' verwijst naar de breedte en hoogte van een afbeelding ten opzichte van elkaar, bijvoorbeeld het delen van 1920 door 1080 geeft je 16/9.
• De 16:9 beeldverhouding wordt ook wel 'breedbeeld' genoemd en is momenteel de meest gebruikte beeldverhouding.
• Exporteer een video met een kortere duur om verschillende codecs en compressie-instellingen te testen.
• Vink de dialoogvensters voor compressie-instellingen aan bij het weergeven/exporteren van de video. 
• Voor video van hoge kwaliteit wordt het AVI-formaat aanbevolen, maar let op dat de bestandsgroottes bij dit formaat gewoonlijk beduidend groter zijn.
• MP4-bestanden worden aanbevolen voor het streamen, omdat het het meest ondersteunde formaat is (in tegenstelling tot MOV- of AVI-bestanden).
• H.264 ondersteunt geen transparantie, maar is een goede optie om de kwaliteit te maximaliseren met behoud van een kleine bestandsgrootte. H.264 wordt ook aanbevolen voor online videoplatforms zoals YouTube en Vimeo.
• Let op dat QuickTime Player video's niet exporteert als MP4-bestanden.
• Alle afbeeldingen of belangrijke afbeeldingen mogen niet verschijnen in het gebied waar gesloten bijschriften verschijnen.
• Gebruik niet meer dan twee lettertypes tegelijk op het scherm.

In onderstaande tabel kun je details zien over veelgebruikte videoresoluties.

 Controleer bij het exporteren van video's voor social media de beeldverhouding die wordt gebruikt voor het social media-platform dat je wil gebruiken:

• Landschap - 16:9 - (1280px x 720px) - Facebook- of LinkedIn-video's
• Portret  - 9:16 (720px x 1280px) - bijv. Instagram-verhalen
• Vierkant  - 1:1 (minimaal 1080px x 1080px) - bijv. Instagram-berichten (vierkant formaat)

Bij het maken of exporteren van een video moet je rekening houden met hoe je video wordt bekeken. Als je video bedoeld is om in 9:16 (portret) bekeken te worden, dan wil je die exporteren in die beeldverhouding met de minimale videoresolutie voor het bedoelde platform.

De videoresolutie voor elk platform verschilt, dus we raden aan om de richtlijnen van het social media-platform te controleren voordat je je video maakt.

Best practice voor video

• Elke tekst die in video's verschijnt, moet voldoen aan de WCAG-contrastnormen.
• Vermijd knipperen of strobe-effecten in je video's.
• Geef bijschriften of transcripties voor video's met audio of belangrijke informatie in de afbeeldingen.
• Met ondertitels en bijschriften kun je je video's delen met een grotere doelgroep, waaronder dove of slechthorende kijkers en kijkers die een andere taal spreken. Leer hoe je ondertitels en bijschriften kunt toevoegen aan YouTube-video's.
• Video's die naar YouTube worden geüpload met auteursrechtelijk beschermde muziek die zonder toestemming wordt gebruikt, worden geblokkeerd door YouTube. Er zijn een aantal sites waar je copyrightvrije muziek kunt vinden om te gebruiken in je video's.
• Als de miniatuurafbeelding voor een ingebedde video niet wordt weergegeven (ofwel in de inhoud of in de door de gebruiker gegenereerde bronafbeelding), controleer dan of de proxyserver of het webfilter verbinding toestaat met de bron van de video, bijv. YouTube.

Aanvullende bronnen en handige tools

Voor het bewerken van video's raden we aan om Adobe Premier Pro of Adobe After Effects te gebruiken. Hier is echter een selectie van gratis tools die je misschien nuttig vindt bij het toevoegen van media aan je Totara-site:

• Adobe Express: Gratis videosoftware (met een Adobe-account). Hiermee kun je gratis video bijsnijden naar elke aspectratio of aangepaste grootte. Je kunt je video ook op de juiste lengte trimmen of de audio dempen, naast andere functies.
• Gedurfdheid: Audacity is een gratis en open source digitale audio-editor en opnametoepassing.
• Toegangscontrole kleur en contrast: Zorg ervoor dat je geselecteerde kleuren voldoen aan de toegankelijkheidseisen en gemakkelijk kunnen worden gelezen door gebruikers met visuele beperkingen.
• Afbeeldingscompressor: Optimaliseer JPEG-, PNG-, SVG-, GIF- en WEBP-bestanden.

Zie de W3C-richtlijnen voor het toegankelijk maken van audio- en videomedia voor meer informatie.