Verwenden von Bildern und Videos in Totara

Bilder verwenden

In diesem Abschnitt haben wir einige Tipps für die Verwendung von Bildern in Totara sowie empfohlene Größen für verschiedene Bilder und einige Beispiele für die Verwendung von Bildern auf unseren Totara Community- und Academy-Websites bereitgestellt.

Allgemeine Anleitung

Hier sind einige allgemeine Hinweise, die Sie beim Hinzufügen von Bildern zu Ihrer Website beachten sollten:

• Verwenden Sie weboptimierte Dateiformate wie SVG oder JPG/JPEG. Dies wird dazu beitragen, schnellere Ladezeiten und eine effizientere Nutzung mobiler Daten für Nutzer zu ermöglichen, die auf mobile Geräte auf die Website zugreifen. Beachten Sie, dass das SVG-Bilddateiformat derzeit nicht in der Totara Mobile App unterstützt wird. Daher müssen Sie alternative Bilddateiformate für Inhalte verwenden, die mit der App kompatibel sein müssen.
• PNG-Dateien sind in der Regel größer, aber dieses Format unterstützt transparente Hintergründe. Das PNG-Format wird daher empfohlen, wenn Ihr Bild einen transparenten Hintergrund hat.
• Vermeiden Sie es, nach Möglichkeit Text zu Bildern hinzuzufügen. Wenn Sie Text in einem Bild verwenden müssen, versuchen Sie nicht mehr als drei Wörter zu verwenden. Überlegen Sie, wie lesbar der Text ist, wenn er herunterskaliert und auf kleineren Geräten wie Smartphones angezeigt wird.
• Vermeiden Sie es, wichtige Informationen (z. B. Text, Logos oder Flächen) um die äußeren Ränder von Bildern zu platzieren, da einige Bilder nicht im ursprünglichen Verhältnis dargestellt werden und daher zuschneiden. Wir empfehlen, eine 20 % sichere Zone um den äußeren Rand der Bilder zu verlassen.
• Vermeiden Sie zu große Dateien und suchen Sie stattdessen nach der richtigen Balance zwischen Bildqualität und Dateigröße.
• Stellen Sie sicher, dass der Farbmodus der Bilder unabhängig von der verwendeten Software (z. B. Photoshop, Canvas, Illustrator oder Gimp) auf RGB (für die Webnutzung) und nicht auf CMYK (für den Druck) eingestellt ist.
• Wenn Sie Bilder von einem anderen Ort aufnehmen, können Sie in der Regel entweder die Aktion 'Speichern als' oder 'Bilder exportieren als' ausführen und dann einen geeigneten Dateityp wie JPG oder PNG auswählen.
• Die Auflösung von 72 dpi (oder ppi) reicht für die Website-Nutzung aus, während 300 dpi für die Drucknutzung empfohlen werden.

Themen-Assets inspirieren

Bild der Anmeldeseite

Standardbild der Anmeldeseite: 1200px x 1000px

Empfohlenes Anmeldeseitenbild (nicht-SVG): 1200px x 1200px

JPEG-, PNG- und SVG-Dateiformate werden akzeptiert, und PNG-Dateien werden für veranschaulichende Bilder bevorzugt. Wir empfehlen, die Dateigröße so klein wie möglich zu halten (ohne die Qualität zu beeinträchtigen), mit einem Mindest-DPI von 150. Stellen Sie sicher, dass jeder Text im Bild einen ausreichenden Kontrast zum Hintergrund aufweist, damit das Bild zugänglich ist.

Banner der alten Anmeldeseite

Standardbanner für Anmeldeseite: 1672px x 430px

Banner der Anmeldeseite in der Community: 1672px x 215px, JPEG-Datei

Standardbilder für Kurse, Programme und Zertifizierungen

Standardbild für Programm/Kurs: 960px x 540px

1280px x 720px bietet eine bessere Qualität mit zukünftiger Unterstützung für Bilder in Netzhautqualität. 960px x 540px ist die empfohlene Mindestgröße. Bei 480px x 270px wird die Bildqualität in einigen Fällen beeinträchtigt.

Kurs-, Programm- und Zertifizierungsbilder werden automatisch in der Größe geändert. Wenn Sie ein quadratisches Bild verwenden, wird es vertikal oder horizontal auf verschiedenen Seiten zugeschnitten.

Beispiel für Kursbild:

Kursbild im aktuellen Lernblock:

Ressourcen-Bilder

Standard-Ressourcenbild: 960px x 540px

1280px x 720px bietet eine bessere Qualität mit zukünftiger Unterstützung für Bilder in Netzhautqualität. 960px x 540px ist die empfohlene Mindestgröße. Bei 480px x 270px wird die Bildqualität in einigen Fällen beeinträchtigt.

Platzieren Sie den Interessenpunkt des Bildes (z. B. ein Symbol, Text, das Gesicht einer Person) in der Mitte, da dies der sichere Bereich ist, der nicht zugeschnitten wird. Das Bild erscheint zugeschnitten auf anderen Geräten (z. B. Mobilgeräten) und kleineren Bildschirmen (z. B. Laptops), aber der zentrale Bereich ist weiterhin sichtbar. Hier sehen Sie ein Beispiel für ein Ressourcenbild mit Text und wie der Text und das Symbol im sicheren Bereich ausgerichtet sind.

Bild mit Text:

Bild mit Sicherheitsbereich überlagert:

Workspace-Bilder

Standardbild für Arbeitsbereich: 960px x 960px

1280px x 1280px bietet eine bessere Qualität mit zukünftiger Unterstützung für Bilder in Netzhautqualität. 960px x 960px ist die empfohlene Mindestgröße, mit teilweiser zukünftiger Unterstützung für Bilder in Netzhautqualität. Bei 480px x 480px wird die Bildqualität in einigen Fällen beeinträchtigt.

Stellen Sie wie bei den Ressourcenbildern den Hauptfokus der Grafik in die Mitte, da der sichere Bereich des Arbeitsplatzbildes auf ein Quadrat in der Mitte beschränkt ist, wie im Beispiel gezeigt.

Bild des Arbeitsbereichs:

Arbeitsbereichsbild mit Sicherheitsbereich überlagert:

Workspace-Bild im Kontext:

Logos und Favicons

Logo: Ein horizontales Logo ohne Ränder wird bevorzugt. Eine SVG-Datei wird empfohlen, um die beste Bildqualität in verschiedenen Größen zu erhalten.

Favicon: Dieses Symbol wird neben dem Namen der Website/Seite in der Browser-Registerkarte und in den Browser-Lesezeichen angezeigt. ICO-Dateien werden empfohlen, aber auch PNG-Dateien werden unterstützt. Die optimale Größe ist 16px x 16px (am häufigsten) oder 32px x 32px.

Andere Community-/Akademie-Assets

Ausweiskartengröße: 426px x 426px, PNG-Format (enthält Transparenz)

Vermeiden Sie es, Text auf Ausweisbildern zu platzieren. Badges werden normalerweise neben dem Kurs- oder Programmtitel angezeigt. Einfachheit ist der Schlüssel. Wenn Sie also Badge-Bilder entwerfen, versuchen Sie, die Anzahl der Elemente, Farben und Formen auf ein Minimum zu reduzieren, da Badges an einigen Stellen nur bis zu 100px x 100px angezeigt werden können.

Ausgewählte Linksblöcke: Wir verwenden zwei Dimensionen für Kacheln in ausgewählten Linksblöcken: 

• Quadratisch: 500px x 500px
• Landschaft: 500px x 375px

Banner in voller Breite: Desktop-Banner sind 1650px x 188px und mobile Banner sind 600px x 177px.

Banner des Community-Feedback-Formulars: 1280px x 223px

Akademie-Quiz-Symbole: 115px x 100px, PNGs mit transparentem Hintergrund

In der Totara Academy enthält der Fragetext in den Quizaktivitäten das Quiz-Symbol. Dieses Symbol ist in den Bildeigenschaften links ausgerichtet. 

Video verwenden

In diesem Abschnitt haben wir einige wichtige Informationen und Best-Practice-Anleitungen für das Hinzufügen von Videos zu Ihrer Totara-Website beschrieben.

Allgemeine Empfehlungen

Hier sind einige allgemeine Hinweise, die Sie beim Hinzufügen von Videos zu Ihrer Website beachten sollten:

• Die meisten Videos werden mit mindestens 1080p (Full HD) bei 24 Bildern pro Sekunde (fps) aufgenommen. In der folgenden Tabelle finden Sie weitere Informationen zu gängigen Videogrößen.
• Das Standardseitenverhältnis für Videos beträgt 16:9. Der Begriff „Aspektverhältnis“ bezieht sich auf die Breite und Höhe eines Bildes in Bezug zueinander, z. B. ergibt die Division von 1920 durch 1080 16/9.
• Das Seitenverhältnis von 16:9 wird auch als „Breitbild“ bezeichnet und ist derzeit das am häufigsten verwendete Seitenverhältnis.
• Exportieren Sie ein Video mit einer kürzeren Dauer, um verschiedene Codecs und Komprimierungseinstellungen zu testen.
• Aktivieren Sie die Dialogfelder Komprimierungseinstellungen, wenn Sie das Video wiedergeben/exportieren. 
• Für hochwertige Videos wird das AVI-Format empfohlen. Beachten Sie jedoch, dass die Dateigrößen bei diesem Format in der Regel erheblich größer sind.
• MP4-Dateien werden für das Streaming empfohlen, da es das am häufigsten unterstützte Format ist (im Gegensatz zu MOV- oder AVI-Dateien).
• H.264 unterstützt keine Transparenz, ist aber eine gute Option, um die Qualität zu maximieren und gleichzeitig eine kleine Dateigröße beizubehalten. H.264 wird auch für Online-Videoplattformen wie YouTube und Vimeo empfohlen.
• Beachten Sie, dass QuickTime Player keine Videos als MP4-Dateien exportiert.
• Grafiken oder wichtige Bilder sollten nicht in dem Bereich erscheinen, in dem Untertitel erscheinen.
• Vermeiden Sie die gleichzeitige Verwendung von mehr als zwei Schriftarten auf dem Bildschirm.

In der folgenden Tabelle finden Sie Details zu häufig verwendeten Videoauflösungen.

 Wenn Sie Videos für soziale Medien exportieren, überprüfen Sie das Seitenverhältnis, das für die Social-Media-Plattform verwendet wird, die Sie verwenden möchten:

• Landschaft – 16:9 – (1280px x 720px) – Facebook- oder LinkedIn-Videos
• Porträt – 9:16 (720px x 1280px) – z. B. Instagram-Stories
• Quadrat – 1:1 (mindestens 1080px x 1080px) – z. B. Instagram-Posts (Quadratformat)

Wenn Sie ein Video erstellen oder exportieren, müssen Sie berücksichtigen, wie Ihr Video angezeigt wird. Wenn Ihr Video in 9:16 (Hochformat) angezeigt werden soll, sollten Sie es in diesem Seitenverhältnis mit der minimalen Videoauflösung für Ihre beabsichtigte Plattform exportieren.

Die Videoauflösung für jede Plattform variiert. Wir empfehlen daher, die Richtlinien der Social-Media-Plattform zu lesen, bevor Sie Ihr Video erstellen.

Bewährte Verfahren für Video

• Jeder Text, der in Videos erscheint, muss den WCAG-Kontraststandards entsprechen.
• Vermeiden Sie Flash- oder Stroboskopeffekte in Ihren Videos.
• Stellen Sie Untertitel oder Transkripte für Videos mit Audio oder wichtigen Informationen bereit, die in den Bildern enthalten sind.
• Untertitel und Bildunterschriften ermöglichen es Ihnen, Ihre Videos mit einem größeren Publikum zu teilen, einschließlich gehörloser oder schwerhöriger Zuschauer und Zuschauer, die eine andere Sprache sprechen. Erfahren Sie, wie Sie YouTube-Videos Untertitel und Untertitel hinzufügen können.
• Videos, die mit urheberrechtlich geschützter Musik, die ohne Genehmigung verwendet wird, auf YouTube hochgeladen werden, werden von YouTube blockiert. Es gibt eine Reihe von Websites, auf denen Sie urheberrechtlich geschützte Musik finden können, die Sie in Ihren Videos verwenden können.
• Wenn das Miniaturbild für ein eingebettetes Video nicht angezeigt wird (entweder im Inhalt oder im nutzergenerierten Ressourcenbild), überprüfen Sie, ob der Proxy-Server oder Webfilter eine Verbindung zur Quelle des Videos, z. B. YouTube, ermöglicht.

Zusätzliche Ressourcen und nützliche Tools

Für die Videobearbeitung empfehlen wir die Verwendung von Adobe Premier Pro oder Adobe After Effects. Hier finden Sie jedoch eine Auswahl an kostenlosen Tools, die Sie beim Hinzufügen von Medien zu Ihrer Totara-Website nützlich finden können:

• Adobe Express: Kostenlose Videosoftware (mit einem Adobe-Konto). Ermöglicht Ihnen, Videos kostenlos in ein beliebiges Seitenverhältnis oder eine benutzerdefinierte Größe zuzuschneiden. Sie können Ihr Video auch auf die richtige Länge kürzen oder das Audio stummschalten, neben anderen Funktionen.
• Wagemut: Audacity ist ein kostenloser und Open-Source-Digital-Audio-Editor und eine Aufzeichnungsanwendung.
• Farb- und Kontrast-Erreichbarkeitscheck: Stellen Sie sicher, dass Ihre ausgewählten Farben den Anforderungen an die Zugänglichkeit entsprechen und von Nutzern mit Sehbehinderungen leicht gelesen werden können.
• Bildkompressor: JPEG-, PNG-, SVG-, GIF- und WEBP-Dateien optimieren.

Weitere Informationen finden Sie in der Anleitung von W3C zur Bereitstellung von Audio- und Videomedien.