Referat für Kommunikation

Je größer ein Bild, desto länger ist die Ladezeit bis zur kompletten Darstellung der Website. Damit Nutzer*innen schnell auf Ihre Webseite gelangen, sind kleinere Bilddateien deshalb ratsam. Auf den Roxen-Seiten der Universität Bielefeld gibt es jedoch eine Reihe an Bildern, die über 1 MB und zu groß für die reibungslose Nutzung im Internet sind. Das liegt zum einen daran, dass diese Bilder eine übermäßig hohe Auflösung aufweisen und zum anderen, dass das falsche Dateiformat gewählt wurde. Aber wie geht es richtig?

Am einfachsten können Sie die Ladezeit Ihrer Webseite verkürzen, indem Sie JPG-Bilder anstatt PNG-Bilder verwenden. Die Auflösung sollte 72dpi bzw. ppi betragen und die Farbtiefe 24bit. Bei den Bildmaßen kommt es auf den Verwendungszweck an:

• Kopfbereich (“Cover” Komponente): Bilder im Kopfbereich der Webseite, dem Header, sollten mindestens 1700px breit und 807px hoch sein.
• Fließtextbereich (“Text and Picture” Komponente): Im Fließtext sollten Bilder eine Mindestbreite von 800px und eine Mindesthöhe von 550px aufweisen.
• Teaser: Teaserbilder sollten optimalerweise 350px * 350px groß und generell quadratisch sein.
• Gallery: Für die Verwendung in Galerien ist eine Bildgröße von 1200px * 800px ausreichend.

So können Sie vorgehen, wenn Sie ein zu großes Bild verkleinern möchten:

Öffnen Sie das Bild auf Ihrem PC mit Paint. Oben in der Menüleiste ist der Punkt Größe ändern. Wenn Sie hierauf klicken, öffnet sich ein kleines Fenster (siehe Foto). Klicken Sie auf Pixel, um die passende Größe einzutragen. Das Beispiel-Bild der Universität hatte ursprünglich eine Größe von über 2 MB. Da wir es in der Komponente Text and Picture einfügen möchte, ist eine Größe von 800px * 550px ausreichend. Indem wir die Größe dementsprechend der Anforderungen des Verwendungszwecks anpassen, verkleinert sich die Dateigröße, aber die Qualität bleibt in der Ansicht erhalten. Die Breite und Höhe des Bildes sollten so klein wie möglich sein, ohne dabei die Mindestanforderungen zu unterschreiten. Wichtig: Setzen Sie einen Haken bei Seitenverhältnisse beibehalten, um diese nicht zu verändern. Zuletzt speichern wir das Bild als JPG. Das Ergebnis: Das Beispiel-Bild hat nun eine Größe von knapp 0,3 MB und die Webseite lädt schneller.

Tipp: Bestellen Sie Ihre Bilder in der Bilddatenbank der Universität Bielefeld. Für die Bestellung der Bilder können Sie diese Anleitung nutzen. Bei der Verwendung des Bildmaterials der Universität Bielefeld müssen Sie diese im Bildnachweis als Rechteinhaberin angeben. Wenn Sie Nachfragen zu den Bildgrößen haben, wenden Sie sich gern an die Webredaktion.