Bilder

Bilder sind ein wesentlicher Bestandteil jeder Webseite. Sie sorgen nicht nur für eine ansprechende Optik, sondern erfüllen auch wichtige funktionale Aufgaben.

1. Visuelle Anziehungskraft: Bilder ziehen die Aufmerksamkeit der Nutzer*innen schnell auf sich und erhöhen das Interesse an den Inhalten. Menschen nehmen visuelle Informationen deutlich schneller auf als reinen Text.
2. Veranschaulichung von Inhalten: Bilder können komplexe Sachverhalte verständlich machen und unterstützen somit die Kommunikation der Botschaft.
3. Emotionalisierung: Bilder wecken Emotionen und schaffen eine Verbindung. Dies kann die Nutzererfahrung verbessern und die Bindung an die Webseite stärken. Der Wiedererkennungswert der TU-Webseiten und ihre Zugehörigkeit zur TU-Markenidentität wird durch die Hintergrundillustrationen der Bilder hergestellt.
4. Strukturierung und Lesefreundlichkeit: Durch Bilder lässt sich der Text auflockern, was die Lesbarkeit verbessert und die Verweildauer auf der Seite erhöhen kann. Reine "Textwüsten" sollten vermieden werden.
5. Suchmaschinenoptimierung (SEO): Richtig eingesetzte Bilder mit passenden Dateinamen und Alt-Texten tragen zur besseren Auffindbarkeit der Webseite bei.

1. Rechte und Lizenzen: Es dürfen nur Bilder verwendet werden, für die die notwendigen Nutzungsrechte vorliegen - also das Einverständnis des Fotografen/der Fotografin und der abgebildeten Personen. Denken Sie, wenn notwendig, an die Nennung der Bildquelle bzw. das Copyright.
2. Optimale Dateigröße und Format: Bilder sollten komprimiert sein, um die Ladezeiten der Webseite nicht unnötig zu verlängern. Gleichzeitig sollten die Bilder groß genug und von ausreichend guter Qualität sein, um scharf dargestellt zu werden. Für das TUHH-TYPO3-System gilt eine Uploadgrenze von max. 2 MB Dateigröße. Für Bilder ist dies jedoch sehr groß bzw. zu groß. Wir empfehlen, Bilder auf 860px Breite zuzuschneiden. Bei vollflächigen Titelbildern ist eine max. Bildbreite von ca. 2190px empfehlenswert. Zum Zuschneiden von Bildern steht an der TU das Bildbearbeitungsprogramm Gimp zur Verfügung. Auch Online-Editoren wie resizepixel können genutzt werden. Gängige Formate sind JPEG für Fotos und PNG für Grafiken mit Transparenz.
3. Responsive Darstellung: Bilder müssen auf verschiedenen Endgeräten (Desktop, Tablet, Smartphone) gut aussehen und passend skaliert werden. Das Webdesign der TUHH ist automatisch responsiv gestaltet, d.h. von technischer Seite aus müssen Sie nichts tun. In manchen Inhaltselementen ändert sich jedoch der angezeigte Bildausschnitt je nach Endgerät/Bildschirmgröße. Optimieren Sie Bilddarstellungen also nicht nur für Ihren eigenen Bildschirm, sondern prüfen Sie immer auch, wie die Darstellung auf größeren/kleineren/mobilen Geräten aussieht.
4. Barrierefreiheit: Alt-Texte sind verpflichtend und sollten aussagekräftig sein, damit Screenreader den Bildinhalt für sehbehinderte Nutzer beschreiben können. Mehr erfahren Sie in unserer Anleitung zur Barrierefreiheit.
5. Passender Einsatz: Bilder sollten inhaltlich relevant sein und den Text unterstützen. Überflüssige oder rein dekorative Bilder können die Nutzer eher ablenken, ebenso zu viele Bilder bei zu wenig Text. Bilder sollten zudem nicht als Navigationskacheln eingesetzt werden.
6. Bildbeschreibung und Kontext: Ergänzende Bildunterschriften können dem Nutzer helfen, den Zusammenhang besser zu verstehen.
7. Bildillustration: Die Bilder werden im TU-Webdesign standardmäßig mit eine grafischen Illustration hinterlegt. Das System wählt diese automatisch anhand der Maße des hochgeladenen Bildes (Quer- oder Hochformat). Sie können die Illustration händisch anpassen oder ganz entfernen - letzteres ist empfehlenswert bei Grafiken, Logos oder PNGs mit transparentem Hintergrund.

1. Die TU hält ein Fotoarchiv für Mitarbeiternde vor. Wenn Sie Zugriff auf dieses Archiv wünschen, melden Sie sich bei bei uns unter webmaster[at]tuhh.de oder bei der Pressestelle.
2. Sie können auch Stockfotobörsen nutzen. Neben kostenpflichtigen Anbieter wie Shutterstock oder iStock gibt es kostenlose Seiten wie Unplash oder Pixabay. Achten Sie sorgfältig auf die Nutzungsbedingungen und die notwendige Copyrightangabe!
3. Natürlich können Sie auch selbst aufgenomme Bilder verwenden. Achten Sie dabei auf das Einverständis evtl. abgebildeter Personen und lassen Sie sich dieses schriftlich geben.

Wie Sie Bilder bzw. Dateien generell hochladen, erfahren Sie in unserer Anleitung zum Dateiupload und in unserer Anleitung zum Inhaltselement Bilder.

• Ganz klassisch binden Sie Bilder mit dem Inhaltselement Nur Bilder an. Damit können Sie auch ein Image Grid oder einen Bilderslider (Bildergalerie) erstellen oder zwei Bilder nebeneinander setzen..
• Bild in Kombination mit Text kann das Inhaltselement Text+Bild umsetzen.
• Für Startseiten/Einstiegsseiten mit großen Bildern bietet sich der Headerslider an.
• Der Single Teaser teasert - wie der Name schon sagt - weitere Infos an. Bis zu zwei quadatrische Bilder können hier eingesetzt werden.
• News bzw. Newsslider: Zu Ihren Neuigkeiten gehören auch passende Bilder.
• Der Slider des Inhaltselements Landing Page Hero bildet quadratische Bilder ab.
• Die Logoliste eignet sich zur Darstellung vieler Logos, z.B. von Kooperationspartner.
• Das Element Kontaktpersonen bzw. die Plugins Staff Table und Assistant Info ziehen sich die Mitarbeitenden-Fotos aus der Kontaktdatenbank. In TYPO3 können die einzelnen Bilder und ihre Darstellungweise nicht beeinflusst werden, nur das generelle Layout der Plugins kann gewählt werden.

Es kann vorkommen, dass Sie ein Bild im Frontend Ihrer Webseite sehen, dieses aber nicht im entsprechenden Inhaltselement in TYPO3 finden. Oder dass ein Bild plötzlich verschwindet, nachdem Sie ein Element im Backend bearbeitet haben. Dies liegt daran, dass Bilder bis TYPO3 Version 7 (an der TUHH bis Ende 2021 im Einsatz) direkt im Rich Text Editor eingebunden werden konnten. Seit dem Update auf TYPO3 Version 10 ist dies technisch nicht mehr möglich. Bilder, die früher direkt im Rich Text Editor eingefügt wurden, sind im Frontend noch sichtbar, im Backend aber nicht mehr und sobald Sie das Inhaltselement mit dem Bild einmal bearbeiten, verschwindet das Bild. Bitte arbeiten Sie betroffene Inhaltselemente entsprechend um und fügen Sie das Bild (welches ja noch in Ihrem Fileupload liegen müsste) erneut im Tab Images/Bilder hinzu wie in der Anleitung zu Text+Bild beschrieben.