Ganz allgemein gilt: oft sind Bilder für das Verständnis des Inhaltes der Website nicht nötig (=dekorativ). Diese sollen nicht per Text erklärt werden. Der Alt-Text bleibt also komplett leer. Gibt man ein Leerzeichen ein, dann liest z.B. das VoiceOver von Apple „Leerzeichen“ vor…
Sind die Bilder für das Verständnis wichtig, müssen Sie den Inhalt per Text erklären. Da gibt es dann abhängig vom 
Format und Layout verschiedene Stellen, an denen Sie diesen Text einfüllen, aber meist ist es der alt = alternative Text.

Ganz allgemein muß einfach alles, was nicht Text ist auf der Webseite, wenn es denn inhaltlich relevant und keine Dekoration ist, per Text erklärt werden.

Nicht alles, was Sie im Internet an Bildern finden, dürfen Sie hochladen!

Für den Upload oder die Wiedergabe fremder Inhalte (z.B. fremder Bilder, PDF-Dateien) auf den Internetseiten Ihres Projektes muss in der Regel die Zustimmung des Urhebers eingeholt werden!

  • Für Fotos und Abbildungen, die verwendet werden, müssen die Nutzungsrechte des jeweiligen Urhebers (z.B. Fotograf, Illustrator) bzw. Rechteinhabers (z.B. Bilddatenbanken, Adobe Stock, Verlage) vorliegen.
  • Bildhinweise der verwendeten Fotografien und Abbildungen entsprechend der vereinbarten bzw. vom Urheber genannten Nutzungsbedingungen hinterlegen.
  • Betrifft die Illustrationen:
    – Sofern ausschließlich Illustrationen von Rebekka Weimer (Schönefuß) verwendet werden, ist eine Nennung im Impressum ausreichend. Die Urheberrechtsangaben (Bildnachweise) sind in der Quelldatei in der Mediathek bei der Illustration zu hinterlegen (im Template bereits eingerichtet), auf der jeweiligen Seite kann auf die Veröffentlichung des Bildnachweises verzichtet werden.
    – Sofern Illustrationen zusätzlich von anderen Illustratoren*innen verwendet werden, muss mit dem/der weiteren Illustrator*in abgestimmt werden, ob sie/er (im günstigsten Fall) mit einer Nennung in dieser Weise einverstanden wäre oder ggfls. eine andere Nennung gewünscht wird.
    Hinterlegung des Urhebers in den Dateiinformationen in der Mediathek:
    Dieser Urheberrechtsvermerk ist in den einzelnen (!) Dateien als Info in der Mediathek zu hinterlegen
    Die Anzeige des Copyright-Vermerks an den einzelnen Illustrationen kann in diesem Fall in Word-Press bei der Verwendung auf der jeweiligen Seite deaktiviert werden.
    Die Bilder in der Mediathek behalten über diesen Weg zur Nachvollziehbarkeit den hinterlegten Vermerk bzw. die hinterlegte Information.
    Falls dies anders gehandhabt würde, bitte den Bildnachweis bei jeder Illustration sichtbar lassen.
    Verwendungshinweise:
    Generell sollten die Illustrationen nach dem ursprünglichen Konzept eingesetzt werden, d.h. z.B. NICHT im Seiteneinstieg, etc.
    Die Verwendung der unterschiedlichen Illustrationstypen (detailliert/roter Rahmen/Silhouette) wird in der Anleitung zur Erstelllung von Illustrationen erläutert. Diese ist für alle Personen mit JGU-Account zugänglich.

Mehr dazu in der Verwaltungsverfügung: Abmahnungen wegen Urheberrechtsverletzungen

Das Zentrum für Datenverarbeitung ist nicht verantwortlich für Urheberrechtsverletzungen, welche durch den nicht-autorisierten Upload fremder Inhalte entstehen.Nicht alles, was Sie selbst fotografiert haben, dürfen Sie hochladen!

Das Recht am eigenen Bild, welches sowohl durch § 22 KUG (Kunst-Urheber-Gesetz) als auch durch das allgemeine Persönlichkeitsrecht (Art. 2 Abs. 1 GG –als Auffangtatbestand) geschützt wird, macht es
erforderlich, dass in Werken abgebildete Personen der Nutzung zustimmen. Wird in einem
Werk eine Person abgebildet, muss daher neben der Einverständniserklärung der Urheberin
/ des Urhebers auch die Einverständniserklärung der abgebildeten Person eingeholt werden.
Dies gilt nur, wenn die Person (auch unter Einbeziehung der weiteren äußeren Umstände)
erkennbar ist. Hierbei ist auf den näheren Bekanntenkreis der / des Abgebildeten
abzustellen.Personen aus Zeitgeschichte, oder als Beiwerk

Ausnahme: Abbildungen dürfen ohne Einwilligung genutzt werden, wenn es sich um Bildnisse
aus dem Bereich der Zeitgeschichte handelt oder Bilder, auf denen die Personen nur als
Beiwerk erscheinen (§23 KUG). Dies ist jedoch ausgeschlossen, wenn berechtigte Interessen
des Abgebildeten hierdurch verletzt werden.

Werden die Bilder nicht von einer Mitarbeiterin oder einem Mitarbeiter (weisungsabhängig)
im Rahmen ihrer oder seiner Dienstaufgaben gemacht, müsste zusätzlich noch eine
Rechteeinräumung durch die Fotografin oder den Fotografen erfolgen. Der Fotograf oder die
Fotografin müsste das Recht einräumen, die Fotos öffentlich zugänglich zu machen. Sollten
weitere Nutzungen vorgesehen werden, müssten diese in die Rechteeinräumung aufgenommen
werden.

Der Block Bild stellt das Bild maximal groß dar. Sie sollten den Block Bild darum nur innerhalb von Spalten verwenden. Fügen Sie den Block Bild in eine Spalte ein und bestimmen Sie mittels der Prozentangaben, wie groß die Elemente in der Spalte sein sollen. Auch Blöcke wie Medien und Text kontrollieren die Bildgröße.

Es hilft auch nichts, ein Bild klein zu skalieren. Jedes noch so kleine Bild wird immer auf die größtmögliche Breite großgezogen.

Nach der Aktivierung der neuen Webkomponenten (geplant ist, diese bis Jahresende einzuführen) werden die Bilder so groß angezeigt, wie sie sind. Der Größe-Parameter wird beachtet.

Verwalten Sie in den Blockeinstellungen Bildnachweis, Beschriftung, Hintergrund und ob sie das Bild bei Klick separat öffnen wollen (=Lightbox)

Die Funktion Lightbox, also ob sie das Bild bei Klick separat öffnen, ist in mehreren Blöcken vorhanden, diese finden Sie hier.

bei Erweitert:

Bild-Alternativtext: nur, wenn es sich um ein inhaltlich für die Seite relevantes Bild handelt, tragen Sie hier etwas ein.
Bildbeschriftung: wird nicht angezeigt.
Bildnachweis: bei wem liegen die Bildrechte? Wer hat das Foto gemacht? Taucht bei dem kleinen i rechts unten am Bildrand auf
Bildnachweis ausblenden: wenn sie das Bildcredit-i ausblenden wollen
Bildbeschriftung ausblenden: damit ist die Caption gemeint, die sich direkt unter dem Bild eintragen können
Dunkler Hintergrund: für manche Bilder schöner
Bildbeschreibung: wird nicht angezeigt
Bild-Titel (aus Mediathek): dies ist nur eine Anzeige
Bild-Titel: wenn Sie hier nichts eintragen, wird bei Mouseover der Bild-Titel der Mediathek angezeigt.

Mehr zum Urheberrecht und dem Recht am eigenen Bild

Medien organisieren

Bevor Sie anfangen, Bilder hochzuladen, überlegen Sie sich eine Strategie, wie Sie Bilder, die zusammengehören, immer wiederfinden. Da Sie in der Mediathek keine eigene Ordnerstruktur haben, lohnt sich eine Systematik gleich von Anfang an. Hier unsere Vorschläge gegen einen Mediathek-Dateien-Dschungel:

  • Struktur in der Mediathek geht davon aus, dass man einen Blog hat (einschränken auf einen Monat)
  • Bilder und Dateien NIE über Dashboard → Medien hochladen, sondern IMMER aus der Seite! Dann hat man in der Mediathek die Verknüpfung „Hochgeladen zu“
  • Bilder  vor dem Hochladen sprechend nennen (vor allem bei Bildergalerien, anstelle des von der Kamera vergebenen kryptischen Namens). Zusammengehörende Bilder haben am besten den gleichen Dateinamensanfang. Danach können sie in der Mediathek auch einschränken und suchen.
  • Das geht auch im Nachhinein: Verwenden Sie die Felder Beschriftung und Beschreibung. Nach denen können Sie in der Mediathek ebenfalls suchen!

Das ZDV hat für Mitarbeitende der JGU (ohne An-Institute) einen Lizenzvertrag für Adobe-Produkte abgeschlossen und übernimmt die Kosten dafür zentral. Der Vertrag endet am 31.10.25
Aus: https://www.zdv.uni-mainz.de/software-wichtige-software-von-adobe/
Beachten Sie auf der Seite besonders:
https://www.zdv.uni-mainz.de/software-wichtige-software-von-adobe/#Lizenzbedingungen_zu_Adobe_Stock_Standard_Collection

Bereits eingebaute Bilder können also weiterverwendet werden.

Sie erhalten mit Ihrer neuen Website einen mit Illustrationen vorgefüllten Medienbereich. Auch die Bildrechte sind bereits ausgefüllt. Das Format SVG steht für scalable vector graphic und garantiert glasklare Abbildungen.

Die in den Webseiten verwendeten Bilder und Grafiken sollen folgenden Kriterien entsprechen:

  • Sie sollen Kernzielgruppen ansprechen
  • Sie sollen zum Inhalt passen und diesen ergänzen

Die auf den Webseiten verwendeten Bilder und Grafiken sollen folgenden Kriterien entsprechen:

  • Sie sollen Kernzielgruppen ansprechen
  • Sie sollen zum Inhalt passen und diesen ergänzen
  • Sie sollen DSGVO-konform und diversitätssensibel sein
  • Reportageartig
  • Authentische Situationen
  • Natürliche Lichtverhältnisse
  • Spiel mit
    • Perspektive
    • Bildtiefe
    • Schärfe und Unschärfe
  • dokumentarischer Einblick in die JGU

Ausgewählte Plätze des Campus werden belebt und unbelebt abgebildet. Dabei ist auch die Anzeige von „nur“ stark herangezoomten Bildfragmenten möglich. Diese lassen sich variabel einsetzen und führen zu einer Beruhigung und Fokussierung im Seitenverlauf.

Zu Themengebieten werden passende flächige Aufnahmen ausgesucht die Mikro- und Makrostrukturen abbilden. Dabei sind auch „nur“ stark herangezoomte Bildfragmente möglich.

Diese lassen sich variabel einsetzen und führen zu einer Beruhigung und Fokussierung im Seitenverlauf.

Sie sind zudem leicht über Bilddatenbanken wie https://stock.adobe.com/de/ zu beziehen.

Ein Satz von Illustrationen und eine Anleitung, wie sie selbst weitere Illustrationen erstellen, steht Ihnen im Intranet CMS Sharepoint WP zur Verfügung. Dort wird auch auf eine passende Farbpallette eingegangen.

Die Illustrationen (alle quadratisch) unterteilen sich in detaillierte und vereinfachte Illustrationen, reine Silhouetten und Icon Illustrationen (2 Farben, sehr reduziert)

Auch wenn Sie ein Bild in ein Slider Elemente in einen Sliderblock bauen, werden diese in einer Lightbox angezeigt.

Auch die Bildergalerie arbeitet mit Lightboxen.

$primary: #c1002a; (Teaserbox Standard)

$red-hover: #a33135;

$red-light: #d02c31;

$beige-2-teaser: #d0c7b6;

$orange-1: #d17f00; (Teaser Orange)

$orange-2: #ff5500;

$green: #489b7d;

$green-dark: #183339;

$swamp: #2b3331;

$blau-teaser-notification: #004358; (Teaser Blau)

$gold-notification: #eac58c; (Teaser Gold)

$white-blau: #eceef2;

$asphaltblau-hintergrund: #f4f5f5;

$asphaltblau-10: #f0f1f2;

$asphaltblau-15: #cbcfd0;

$asphaltblau-25: #c8cdce;

$asphaltblau-35: #b2b9bb; (Teaser „Dark Blue“, tatsächlich ist die Farbe ein hellgrau)

$asphaltblau-50: #919b9d;

$asphaltblau-55: #869194;

$asphaltblau-50: #768083;

$asphaltblau-60: #6d7c80;

$asphaltblau-65: #707d80; (Teaser Grau)

$asphaltblau-70: #546266;

$asphaltblau-80: #4f5f63; (Teaser Blaugrau)

$asphaltblau: #23373c; (Teaser Dark)

$white-gray: #ededee;

$blue-event-title: #184256;

$gray-event-title: #303a3e;

$gray: #e4e4e5;

$link-color: #475258;