Använda bilder och video i Totara

Använda bilder

I det här avsnittet har vi gett några tips om hur du använder bilder i Totara, samt rekommenderade storlekar för olika bilder, och några exempel på hur vi har använt bilder på våra Totara Community- och Academy-webbplatser.

Allmän vägledning

Här är några allmänna riktlinjer att tänka på när du lägger till bilder på din webbplats:

• Använd webboptimerade filformat som SVG eller JPG/JPEG. Detta kommer att bidra till snabbare laddningstider och effektivare mobil dataanvändning för användare som besöker webbplatsen på mobila enheter. Observera att SVG-bildfilformatet för närvarande inte stöds i Totara Mobile-appen, så du måste använda alternativa bildfilsformat för innehåll som måste vara kompatibelt med appen.
• PNG-filer är vanligtvis större i storlek, men detta format stöder transparenta bakgrunder. PNG-formatet rekommenderas därför när din bild har en transparent bakgrund.
• Undvik att lägga till text i bilder där så är möjligt. Om du behöver använda text i en bild, försök inte använda mer än tre ord. Tänk på hur läsbar texten kommer att vara när den skalas ner och visas på mindre enheter som smartphones.
• Undvik alltför stora filer och leta istället efter rätt balans mellan bildkvalitet och filstorlek.
• Kontrollera att färgläget för bilder är inställt på RGB (för webbanvändning), inte CMYK (för utskrift), oavsett vilken programvara som används (t.ex. Photoshop, Canvas, Illustrator eller Gimp).
• När du tar bilder från någon annanstans, kan du vanligtvis antingen göra en "spara som" eller "exportera bilder som" åtgärd, och sedan välja en lämplig filtyp, såsom JPG eller PNG.
• Upplösning på 72 dpi (eller ppi) räcker för användning på webbplatsen, medan 300 dpi rekommenderas för användning på utskrift.

Ventura tematillgångar

Bild logga in

standard på logga in: 692px x 1000px

Rekommenderad bild på logga in (icke-SVG): 1200px x 1200px

JPEG-, PNG- och SVG-filformat accepteras och PNG-filer föredras för illustrativa bilder. Vi rekommenderar att filstorleken är så liten som möjligt (utan att offra kvaliteten), med en minsta DPI på 150. Se till att all text i bilden har tillräcklig kontrast mot bakgrunden så att bilden är tillgänglig.

Banner för äldre (legacy) logga in

standard banner för logga in:  1672px x 430px

Banner för logga in som används i communityn:  1672px x 215px, JPEG-fil

Resursbilder

standard: 428px x 228px

Placera intressepunkten för bilden (t.ex. en ikon, text, en persons ansikte) i mitten, eftersom detta är det säkra område som inte kommer att beskäras. Bilden kommer att visas beskuren på andra enheter (t.ex. mobila enheter) och mindre skärmar (t.ex. bärbara datorer), men det centrala området kommer fortfarande att vara synligt. Här kan du se ett exempel på en resursbild med text och hur texten och ikonen är inriktade i det säkra området.

Resursbild med text:

Resursbild med säkert område överlagrat:

Bilder på arbetsytan

standard för samarbetsyta:  426px x 477px

Precis som med resursbilderna, placera huvudfokus för grafiken i mitten, eftersom det säkra området för arbetsytans bild är begränsat till en fyrkant i mitten, som visas i exemplet.

Bild av arbetsytan:

Arbetsyta bild med säkert område överlagrat:

Arbetsyta bild i sammanhang:

Bild av arbetsytan i blocket Rekommenderade arbetsytor:

I det här blocket visas arbetsytan med en svart gradient högst upp och med antalet medlemmar i arbetsytan längst ned.

Standard kurs- och programbilder

standardkursprogramkursbild:  373px x 150px

Kursbilder kommer automatiskt att storleksändras, så om du använder en fyrkantig bild kommer den att beskäras vertikalt eller horisontellt på olika sidor. I Totara Community använder vi en större bildstorlek (834px x 334px) som har samma proportioner som standard för kursbilden på 373px x 150px.

Exempel på kursbild:

Kursbild i aktuellt inlärningsblock:

Kursbild i blocket Rekommenderade kurser:

Logotyper och favicons

Logotyp: En horisontell logo utan marginaler är att föredra. En SVG-fil rekommenderas för att bibehålla den bästa bildkvaliteten i olika storlekar.

Favicon: Denna ikon kommer att visas bredvid namnet på webbplatsen/sidan i webbläsarfliken och i bokmärkena i webbläsaren. ICO-filer rekommenderas, men PNG-filer stöds också. Den optimala storleken är 16px x 16px (vanligast) eller 32px x 32px.

Andra gemenskaps-/akademitillgångar

utmärkelse:  426px x 426px, PNG-format (innehåller transparens)

Undvik att placera text på märkesbilder. Märken visas vanligtvis bredvid kursen eller programtiteln. Enkelhet är nyckeln, så när du designar utmärkelse med märken, försök att minska antalet element, färger och former till ett minimum, eftersom utmärkelser kan visas så små som 100px x 100px på vissa ställen.

Utvalda länkar block: Vi använder två dimensioner för plattor i Utvalda länkar block: 

• Fyrkantig: 500px x 500px
• Landskap:  500px x 375px

Banners med full bredd: Skrivbordsbanners är 1650px x 188px och mobila banners är 600px x 177px.

Webbbanderoll för feedbackformulär för community:  1280px x 223px

Akademins testikoner: 115px x 100px, PNG med transparent bakgrund

På Totara Academy innehåller frågetexten i frågeaktiviteter frågeikonen. Denna ikon är vänsterjusterad i bildegenskaperna. 

Använda video

I det här avsnittet har vi beskrivit viktig information och vägledning för bästa praxis för att lägga till video på din Totara-webbplats.

Allmänna rekommendationer

Här är några allmänna riktlinjer att tänka på när du lägger till videor på din webbplats:

• De flesta videor spelas in i minst 1080p (Full HD) med 24 bilder per sekund (fps). Se tabellen nedan för mer information om vanliga videostorlekar.
• Standardbildförhållandet för videor är 16:9. Termen "aspektförhållande" avser bredden och höjden på en bild i förhållande till varandra, t.ex. att dividera 1920 med 1080 ger dig 16/9.
• Bildförhållandet 16:9 kallas även för ”widescreen” och är för närvarande det vanligaste bildförhållandet.
• Exportera en video med kortare varaktighet för att testa olika codecs och kompressionsinställningar.
• Markera dialogrutorna för komprimeringsinställningar vid rendering/export av videon. 
• För video av hög kvalitet rekommenderas AVI-formatet, men observera att filstorlekarna vanligtvis är betydligt större med detta format.
• MP4-filer rekommenderas för streaming, eftersom det är det mest stödda formatet (till skillnad från MOV- eller AVI-filer).
• H.264 stöder inte transparens, men är ett bra alternativ för att maximera kvaliteten samtidigt som en liten filstorlek bibehålls. H.264 rekommenderas också för videoplattformar online som YouTube och Vimeo.
• Observera att QuickTime Player inte exporterar videor som MP4-filer.
• Grafik eller viktiga bilder ska inte visas i området där stängda bildtexter visas.
• Undvik att använda fler än två teckensnitt på skärmen samtidigt.

I tabellen nedan kan du se detaljer om vanliga videoupplösningar.

 När du exporterar videor för sociala medier, kontrollera bildförhållandet som används för den sociala medieplattform du vill använda:

• Landskap - 16:9 - (1280px x 720px) - Facebook- eller LinkedIn-videor
• Porträtt  - 9:16 (720px x 1280px) - t.ex. Instagram stories
• Fyrkant – 1:1 (minst 1080px x 1080px) – t.ex. Instagram-inlägg (fyrkantigt format)

När du skapar eller exporterar en video måste du överväga hur din video kommer att visas. Om din video är avsedd att visas i 9:16 (porträtt) vill du exportera den i det bildförhållandet med minsta videoupplösning för din avsedda plattform.

Videoupplösningen för varje plattform varierar, så vi rekommenderar att du kontrollerar riktlinjerna för plattformen för sociala medier innan du gör din video.

Bästa praxis för video

• All text som visas i videor måste uppfylla WCAG:s kontraststandarder .
• Undvik blinkande eller stroboskopiska effekter i dina videor.
• Ge stängda bildtexter eller transkriptioner för videor med ljud eller viktig information som ingår i bilderna.
• Undertexter och bildtexter låter dig dela dina videor med en större publik, inklusive döva eller hörselskadade tittare och tittare som talar ett annat språk. Lär dig hur du lägger till undertexter och stängda bildtexter på YouTube-videor .
• Videor som laddas upp till YouTube med upphovsrättsskyddad musik som används utan tillstånd kommer att blockeras av YouTube. Det finns ett antal webbplatser där du kan hitta upphovsrättsfri musik att använda i dina videor.

Ytterligare resurser och användbara verktyg

För videoredigering rekommenderar vi att du använder Adobe Premier Pro eller Adobe After Effects. Här är dock ett urval av gratisverktyg som du kan ha nytta av när du lägger till media på din Totara-webbplats:

• Adobe Express: Gratis videoprogramvara (med ett Adobe-konto). Låter dig beskära video till valfritt bildförhållande eller anpassad storlek gratis. Du kan också trimma din video till rätt längd eller stänga av ljudet, bland andra funktioner.
• Audacitet: Audacity är en gratis och öppen källkod digital ljudredigerare och inspelningsapplikation.
• Kontroll av tillgänglighet för färg och kontrast: Se till att dina valda färger uppfyller tillgänglighetskraven och att de lätt kan läsas av användare med nedsatt syn.
• Bildkompressor: Optimera JPEG-, PNG-, SVG-, GIF- och WEBP-filer.

Se W3C:s vägledning för att göra ljud- och videomedia tillgängliga för mer information.