Bilder & Videos
Sie suchen nach Bildmaterial für Ihre neue Webseite oder wollen wissen, welche Richtlinien es generell bei der Darstellung von Fotos und Grafiken auf den Seiten der Universität Wien zu beachten gilt? Hier haben wir alle wesentlichen Informationen gesammelt und bieten einen Überblick über verschiedene Möglichkeiten, um geeignete Bilder zu finden. Auch für die Einbindung von Videos (z.B. u:stream, YouTube, Vimeo, Phaidra) gelten bestimmte Spezifikationen und Anforderungen an die digitale Barrierefreiheit, die wir hier für Sie zusammengefasst haben.
So verwenden Sie Bilder richtig
Die verschiedenen Inhaltselemente stellen Bilder, Grafiken und Videos je nach Art des Elements in sehr unterschiedlichen Größen dar. Um derartige Inhalte bestmöglich für den Aufbau Ihrer Website vorbereiten zu können, haben wir für Sie die wichtigsten Elemente und die dazu passenden Empfehlungen für die ensprechenden Pixelmaße von Bildern zusammengefasst:
- Header Hauptseiten: 2000 x 1500 Pixel (mobile Darstellung 4:3, Desktop 16:7)
- Header Contentseiten: 2000 x 727 Pixel
- Zahlen & Fakten, Teaser Banner: 2000 Pixel Breite
- Text & Medien, Galerie & Slider, Teaser, Kontaktbox: 1200 Pixel Breite
- Highlight-Banner: 1916 x 726 Pixel (mobile Darstellung: 1256 x 1081 Pixel). Das Bild für den Highlight-Banner muss so gestaltet werden, dass es zu keiner Überlagerung von wichtigen Informationen mit dem Textfeld kommt.
Hinweise: Als Regelformat empfehlen wir 16:9 (also z.B. 1600 x 900 Pixel oder 1920 x 1080 Pixel). Wird ein größeres Bild hochgeladen, kann man mit dem integrierten TYPO3-Foto-Editor einen Teilausschnitt des Bildes für die Website auswählen. Ein Hauptseiten-Headerbild sollte mit mindestens 2000 x 1500 Pixel hochgeladen werden, da die mobile Version das Format 4:3 verwendet.
Wenn Sie neues Bildmaterial (oder auch andere Dateien wie Videos oder Dokumente) für Ihre Website zusammengestellt haben, empfehlen wir, dieses immerzuerst in die Dateiliste im Backend hochzuladen. Dort haben Sie die Möglichkeit, eine eigene Ordnerstruktur anzulegen, um die bestmögliche Übersichtlichkeit und Wiederfindbarkeit der Dateien zu gewährleisten. Wenn Sie die Dateien im Ordner Ihrer Wahl hochgeladen haben, tragen Sie bitte unbedingt sofort die Metadaten der entsprechenden Datei und gleich in allen verwendeten Seitensprachen, mit ein:
- Alternativer Text, wenn es kein reines Schmuckbild ist (wichtig für die digitale Barrierefreiheit!)
- Beschreibung (erscheint direkt oder bei Klick-Vergrößerung unter dem Bild)
- Urheberrecht (erzeugt das Copyright-Icon im rechten unteren Eck des Bildes)
Hinweise: Die Metadaten, die in der Dateiliste eingetragen werden, werden überall dort wo ein Bild/Video/Dokument auf einer Website angezeigt wird, automatisch mit übernommen. Auf Wunsch können sie aber auf einzelnen Seiten auch manuell überschrieben werden, um größtmögliche Flexibilität zu gewährleisten.
Bei den Fotos aus der Mediathek ist der Copyright-Wortlaut bei jedem Bild einzeln hinterlegt.
Bitte beachten Sie, dass die Verwendung der Bilder nur zu redaktionellen Zwecken und im Zusammenhang mit der Universität Wien erlaubt ist. Außerdem muss der Copyright-Hinweis in der Dateiliste im Feld Urheberrecht platziert und dem Bild zuordenbar sein. Das Standardformat für Copyright-Hinweise ist Name des/der Fotograf*in - also z.B. “Ian Ehm”.
Das Copyright-Zeichen erscheint automatisch auf der Website, sobald das Urheberrechts-Feld ausgefüllt ist.
Bildmaterial aus anderen Organisationseinheiten bzw. Pressefotos
Bitte beachten Sie: Die bloße Angabe des Copyrights ist keine Freigabe zur uneingeschränkten Nutzung eines Bildes.
Wenn Sie Bildmaterial von anderen Organisationseinheiten oder externen Stellen (z. B. Pressebilder, Fotos von Veranstaltungen etc.) erhalten, stellen Sie bitte sicher, dass die liefernde Stelle schriftlich bestätigt, dass:
- die erforderlichen Nutzungsrechte vorliegen,
- die Bilder für unsere Zwecke (z. B. Webauftritt, Social Media, Print) verwendet werden dürfen, und
- die korrekte Copyright-Bezeichnung übermittelt wurde.
In der neuen TYPO3-Version 12 ist es nicht mehr zwingend erforderlich, Bilder zuerst in einem separaten Programm (z.B. Photoshop) konkret zuzuschneiden.
Bei allen Inhaltselementen mit Bildfunktion gibt es nämlich im Bereich, in dem die Bilddatei ausgewählt wird, die Möglichkeit einer einfachen Bildbearbeitung direkt im Backend.
Klicken Sie dazu einfach auf den Button “Editor öffnen”. Es erscheint ein neues Fenster mit einer Ansicht des Bildes und einer Legende im oberen rechten Eck der Bearbeitungsfläche. Hier können Sie das Format (16:9, 3:2, 4:3, 1:1 oder Frei) auswählen und gegebenenfalls Ihre Veränderungen über den “Reset” Button revidieren. Zudem können Sie manuell Bildbereiche ausschneiden, indem Sie mit dem Mauszeiger die entsprechenden Areale verkürzen oder zusammenziehen.
So finden Sie neues Bildmaterial
Seit Februar 2023 steht allen Mitarbeiter*innen der Universität Wien die Mediathek zur Verfügung. Auf dieser Online-Plattform können sie sich mittels u:account einloggen und aus knapp 2.000 Imagefotos, mehr als 300 Icons, sowie 30 Videos in den Kategorien Studium, Standorte und Forschung nach Bildmaterial suchen und in diversen Formaten herunterladen.
Beachten Sie bitte außerdem das Handbuch für die Benutzung, um besser in der Datenbank zu navigieren oder über Bildrechte zu informieren. Dort finden Sie u.a. wichtige Informationen zu Sortierung, Suche, Filtern und erlaubten Verwendungszwecken. Die Mediathek wird sukzessive um aktuelles Bildmaterial erweitert.
Falls Sie eine/n Fotograf*in für die Bebilderung Ihrer Website beauftragen möchten, schreiben Sie bitte an mediathek(at)univie.ac.at. Wir übermitteln Ihnen gerne entsprechende Kontaktdaten.
Bitte beachten Sie, dass die Kosten für das Shooting bei der beauftragenden Organisationseinrichtung liegen!
So verwenden Sie Videos richtig
- Format:
.mp4(H.264 Codec, AAC Audio – auch wenn Audio in der Regel deaktiviert ist). - Auflösung:
- Desktop: 1920 × 840 px (≈ 16:7)
- Mobil: 1080 × 810 px (≈ 4:3)
- Max. Länge: 15–20 Sekunden (Loop-fähig)
- Dateigröße: < 5 MB (optimiert, damit Ladezeit und Performance nicht darunter leiden).
- Kompression: Web-optimiert exportieren
- Bitte an die digitale Barrierefreiheit denken:
- Kein Ton (oder Ton standardmäßig deaktiviert).
- Keine schnellen Flacker- oder Strobe-Effekte.
Mit dem Inhaltselement UniWien Streaming können Sie einen u:stream-Link in Ihre Website einbetten.
Auch Links von YouTube, Vimeo oder Phaidra können auf diesem Weg integriert werden.
Bitte beachten Sie dabei die Spezifikationen der jeweiligen Plattform.
Aus Gründen der digitalen Barrierefreiheit sollten Videos nach Möglichkeit mit Untertiteln und einer kurzen Beschreibung des Inhalts versehen werden.
Über das Inhaltselement Video Teaser können Links von YouTube oder Vimeo eingebunden werden.
Das Video wird aus Datenschutzgründen mit einer 2-Klick-Lösung ausgespielt:
- Beim ersten Klick wird das YouTube-/Vimeo-Embed geladen.
- Beim zweiten Klick startet das Video.