Für unsere Webautorinnen und -autoren: Grafiken auf TU-Webseiten

Auf unseren Webseiten kommen an vielen Stellen Grafiken zum Einsatz – ob als Hingucker mit reiner Deko-Funktion, inhaltserweiternde Infografik oder illustrierendes Element. Bei der Bereitstellung der Bilder sind verschiedene Aspekte zu beachten, die Einfluss auf das Nutzererlebnis haben.

Hinsichtlich der Auflösung und Bildgröße können Sie sich an folgenden Hinweisen orientieren:

Header-Bilder

Das Header-Bild lässt sich zentral in der Datei „config.inc“ oder individuell im Kopfbereich der einzelnen Seitendateien über die Variable $seitenbild einbinden. Mit $seitenbild_alt und $seitenbild_copyright können außerdem eine Bildbeschreibung sowie ein Copyright-Vermerk für die Grafik gesetzt werden. Bei rein dekorativen Grafiken kann der Alternativtext leer bleiben. Die Header-Grafiken sollten eine Abmessung von 855×171 Pixel (5:1) haben.

Beachten Sie: Die Bildgröße hat Einfluss auf die Ladezeiten. Ist die Datei zu groß, wird dies besonders bei begrenztem Datenvolumen oder langsamer Netzanbindung sehr deutlich spürbar und führt nutzerseitig zu unnötigem Frust. Zudem können sich die Ladezeiten negativ auf die Suchmaschinenbewertung auswirken. Mit überschaubarem Aufwand kann hier also viel Einfluss auf das Nutzerlebnis genommen werden.

Eine kleine Bildauswahl und die wichtigsten Hinweise zu den Header-Bildern finden Sie auf unserer Webseite „Nutzbare Seitenbilder“ .

Tipp: In Bildbearbeitungsprogrammen lässt sich beim Zuschneiden in der Regel das Seitenverhältnis fixieren. Den Zuschnittrahmen können Sie dann geeignet ziehen und positionieren. Unter Beibehaltung des Seitenverhältnis skalieren Sie nach dem Schneiden auf die Breite von 855.

Portraitbilder

Auf den Kontaktseiten der Professuren und Fakultäten werden in den Visitenkarten häufig auch Portraitbilder eingesetzt. Ansprechende Mitarbeiter- und Gruppenfotos erstellt beispielsweise der Fotoservice der TU Chemnitz. Ihr Portraitfoto steht Ihnen danach in Ihrem persönlichen Fotobereich zur Verfügung und ist in der korrekten Größe (140×210) mit der Visitenkarte verknüpft.

Möchten Sie eigene Portraitbilder einbinden, beachten Sie bitte folgende Hinweise:

• Legen Sie die Bilder in der Größe ab, in der Sie sie anzeigen wollen – bei den TUCAL-Visitenkarten sind das bspw. 140×210 Pixel. Beachten Sie, dass bei sehr großen Bildern neben den Ladezeiten auch der Zugriff auf das hochaufgelöste Bild der dargestellten Person häufig nicht erwünscht ist. Über die rechte Maustaste lassen sich die Bilder in der abgelegten Originalgröße aufrufen – auf manchen Seiten leider so, dass die Wimpern gezählt werden können.
• Beachten Sie unbedingt die Bild- und Nutzungsrechte. Insbesondere bei Pass- und Bewerbungsbildern ist vom Fotografen häufig ein bestimmter Verwendungszweck festgelegt, sodass diese nicht in Webseiten eingebunden werden dürfen.
• Sie möchten selbst Portraitaufnahmen erstellen? Die Pressestelle unterstützt Sie mit einem Videotutorial für Portraitfotos.

Stichwort Barrierefreiheit: Geben Sie für Bilder von Ansprechpersonen im Alternativtext am besten immer den Namen der Person an. Verzichten Sie an dieser Stelle auf Personenbeschreibungen der Art „dunkelhaarige Frau mit grüner Bluse“, da die Funktion „Ansprechperson” hier im Vordergrund steht.  Bei Nutzung des Visitenkartenmoduls wird der Alternativtext automatisch aus dem Namen generiert.

Bilder allgemein

Auf der Webseite der TU-Pressestelle finden Sie neben einem Styleguide für eigene Bilder auch rechtliche Hinweise und Kontaktdaten von Kooperationsfotografen. In der ebenfalls verlinkten Bilddatenbank steht eine Reihe von Aufnahmen zur Verwendung auf den TU-Webseiten zur Verfügung: Bilder-Seite der Pressestelle mit allen Links und Hinweisen

Auch hier gilt wieder: Legen Sie die Bilder möglichst in der Größe ab, in der sie auf der Webseite maximal angezeigt werden. Beachten Sie, dass bei Webseiten an Mobilgeräten kein horizontales Scrollen  erforderlich sein sollte, Grafiken also entsprechend mitskalieren müssen. Um das zu erreichen, nutzen Sie im HTML-Quellcode die  Klasse „img-responsive“:

<img src="bilddatei.jpg" class="img-responsive" alt="…" />

Auf unseren WWW-Seiten sind weitere Hinweise zum Responsive Design sowie zu Popups und Slideshows zu finden.

Stichwort Barrierefreiheit: Denken Sie an Alternativtexte für Ihre Grafiken. Je nach Art und Funktion des Bildes gibt es dafür verschiedene Vorgehensweisen, die wir in einem Leitfaden beschreiben.

Weitere Fragen beantworten wir Ihnen gern über unsere zentrale Supportadresse support@hrz.tu… oder immer donnerstags ab 11:00 Uhr in unserer BBB-Sprechstunde, in der Ihnen sowohl zum Thema Webseitenerstellung als auch zur Barrierefreiheit unsere Expertinnen und Experten beratend zur Seite stehen.