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 att placera viktig information (t.ex. text, logotyper eller ansikten) runt de yttre kanterna av bilder, eftersom vissa bilder inte kommer att visas i sitt ursprungliga förhållande, och därmed kommer beskärning att ske. Vi rekommenderar att du lämnar en säkerhetszon på 20% runt den yttre kanten av bilder.
• 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.

Inspire tema assets

Inloggningssida bild

Standardbild för inloggningssida: 1200px x 1000px

Rekommenderad bild för inloggningssida (icke-SVG): 1200px x 1200px

JPEG, PNG och SVG filformat accepteras, och PNG-filer föredras för illustrativa bilder. Vi rekommenderar att hålla filstorleken så liten som möjligt (utan att göra avkall på kvaliteten), med en minsta DPI på 150. Säkerställ att eventuell text i bilden har tillräcklig kontrast mot bakgrunden så att bilden är tillgänglig.

Legacy-inloggningssida banner

Standardinloggningssida banner: 1672px x 430px

Inloggningssida banner använd i Communityn: 1672px x 215px, JPEG-fil

Standardkurs-, program- och certifieringsbilder

Standardprogram/kursbild: 960px x 540px

1280px x 720px ger bättre kvalitet, med framtida stöd för bilder med retina-kvalitet. 960px x 540px är den rekommenderade minimistorleken. Vid 480px x 270px kommer bildkvaliteten att minska i vissa fall.

Kurs-, program- och certifieringsbilder kommer automatiskt att ändra storlek, så om du använder en fyrkantig bild kommer den att beskäras vertikalt eller horisontellt på olika sidor.

Exempel på kursbild:

Kursbild i aktuellt inlärningsblock:

Resursbilder

Standardbild för resurs: 960px x 540px

1280px x 720px ger bättre kvalitet, med framtida stöd för retina-kvalitetsbilder. 960px x 540px är den minsta rekommenderade minsta storleken. Vid 480px x 270px kommer bildkvaliteten att försämras i vissa fall.

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 beskäras på andra enheter (som 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.

Bild med text:

Bild med säkert område överlagt:

Bilder på arbetsytan

Standardbild för arbetsyta: 960px x 960px

1280px x 1280px ger bättre kvalitet, med framtida stöd för bilder av retina-kvalitet. 960px x 960px är den rekommenderade minimistorleken, med delvis framtida stöd för bilder av retina-kvalitet. Vid 480px x 480px kommer bildkvaliteten att försämras i vissa fall.

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:

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 (mest vanlig) eller 32px x 32px.

Andra gemenskaps-/akademitillgångar

Märkesstorlek: 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 märkesbilder försök att minska antalet element, färger och former till ett minimum, eftersom märken 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: 

• Kvadratisk form: 500px x 500px
• Liggande: 500px x 375px

Banners med full bredd: Skrivbordsbannrar är 1650px x 188px och mobilbannrar är 600px x 177px.

Community feedback-formulär bannrar: 1280px x 223px

Academy quiz-ikoner: 115px x 100px, PNGs med transparenta bakgrunder

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-berättelser
• Kvadratisk - 1:1 (minst 1080px x 1080px) - t.ex. Instagram-inlägg (kvadratiskt 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.
• Om miniatyrbilden för en inbäddad video inte visas (varken i innehållet eller användargenererad resurs bild), kontrollera att proxyservern eller webbfilter tillåter anslutning till källan för videon, t.ex. YouTube.

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.