Bilder in RUB-Web

Formate

Bilder in RUB-Web haben standardmäßig ein 3:2-Querformat, wir empfehlen ein Format von 999x666 Pixeln. Ein Herunterrechnen vor dem Hochladen ist nicht notwendig.

Im Paragraph "Bild und Text" ist das Bild optional quadratisch.

Das Hero-Image (Helden-Banner) ist ein großes, auffälliges und breites Bild ganz oben auf Übersichtsseiten und Landingpages. Über das Drop-Down-Menü „Height size“ kann man die Höhe des Helden-Banners auswählen. Zur Verfügung stehen vier Optionen: small, medium, large, full screen.

Fokuspunkt am Bild setzen

Es gibt die Möglichkeit, an den Bildern in RUB-Web, die nicht im 3:2-Format vorliegen, einen Fokuspunkt zu setzen, um den Bildausschnitt an eure Wünsche anzupassen und dafür zu sorgen, dass das wichtigste/zentrale Element des Bildes prominent abgebildet wird.

Sucht dazu im Backend unter Inhalt > Medien das Bild aus und klickt dort auf → Bearbeiten. In der Bildvorschau zeigt das kleine weiße Kreuz den aktuellen Fokus an. Dieses Kreuz könnt ihr beliebig versetzen. Nach dem Speichern des Bildes könnt ihr auf eurer Webseite prüfen, wie sich der Bildausschnitt verändert hat.

Datenbank und Zugriffsregelungen

Benennung und Alt-Text

Name

Das Feld „Name“ beim Bilder-Upload ist ein Redaktionstitel, der im Backend in der RUB-Web-Bilder-Bibliothek angezeigt wird. Nur die Angaben in diesem Feld werden von der Mediensuche im Backend erfasst.

Es gibt in RUB-Web jeweils eine große Datei-Sammlung, auf die alle Voll- und Einzelseitenredakteur*innen Zugriff haben.
Das bedeutet:

• für Schmuckbilder, die ihr hochladet und bei denen ihr mit der Verwendung auf anderen Seiten einverstanden sind: Benennt das Bild im Feld „Name“ mit Schlagworten, unter denen das Motiv typischerweise gesucht werden würde.
• für eigene Bilder, die ihr nur für die eigene Verwendung beansprucht: Nennt den Namen eurer Abteilung oder eures Projekts im Feld „Name“ direkt als Erstes.
• für Bilder, die ihr in der Dateisammlung findet und die eine Projekt- oder Abteilungsbezeichnung im Namen tragen: Verwendet diese Bilder nicht, außer ihr habet grünes Licht von den Inhaltseigner*innen.

Alternative Bildbeschreibung

Im Feld „Alternative Bildbeschreibung“ wird der sogenannte ALT-Tag (Alternativtext) hinterlegt. Dieser wird von Suchmaschinen verwendet und angezeigt, wenn Bilder oder Grafiken einmal nicht im Frontend geladen werden können. Außerdem ist er ein wichtiger Bestandteil der barrierefreien Gestaltung von Webseiten, da Screenreader den Text für Menschen mit Sehbehinderungen auslesen.

Der Alternativtext beschreibt kurz und präzise den wesentlichen Inhalt und die Funktion eines Bildes. Er sollte so formuliert sein, dass auch Personen, die das Bild nicht sehen können, die Information des Bildes verstehen. Beschreibt nur relevante Bildinhalte, verzichtet auf Wertungen und unnötige Details.

• Bei Porträts nennen wir im ALT-Tag den Namen der abgebildeten Person, aber keine Titel.
• Bei Stellvertreterbildern verzichten wir auf die Nennung von Personennamen.
• Sofern Text im Bild/in der Grafik enthalten ist, muss dieser auch im ALT-Tag stehen.
• Bei KI-generierten oder mit KI bearbeiteten Bildern muss dies ebenfalls im ALT-Tag kenntlich gemacht werden.

Bildtexte ins Englische „übersetzen“

Um die zu Bildern gehörigen Bildtexte auch ins Englische übersetzen, gehen wir im Backend von RUB-Web so vor:

1. Geht auf Inhalt > Medien und sucht das betreffende Bild.
2. Klickt bei dem betreffenden Bild auf „Bearbeiten“.
3. Klickt dann im Bearbeitungsmodus des Bildes auf „Übersetzen“ und fügt die englische Version hinzu.
4. Gebt im Feld „Name“ z. B. zusätzlich „EN“ oder „Englisch“ ein – das ist hilfreich für die Organisation im Backend.
5. Das Feld „Alternative text“ kann bequem mittels DeepL (Button „Create Deepl Translation“) aus dem Deutschen ins Englische übersetzt werden.
6. Prüft die automatische DeepL-Übersetzung kurz.
7. Falls im Deutschen eine Caption hinterlegt wurde, übersetzt auch die Caption über denselben Weg.
8. Klickt unten auf den Button „Save“.

Das System zeigt dann auf den englischen Seiten automatisch die englischen Texte für das Bild an. Ihr müsst die Bilder auf euren englischen Seiten also nicht extra austauschen.