Bilder

Anwendungen

Content-Bereich

Bilder im Content-Bereich platzieren Sie in der Text/Bild-Komponente

Teaser

Bilder im Teaser platzieren Sie in der Komponente Teaser

Seitenanfang

Bilder zu Beginn einer Seite platzieren Sie in der Komponente Intro

Linkliste

Bilder über einer Linkliste (Übersichtsseite) platzieren Sie in der Komponente Linkliste

Seitenkopf (Header)

Ein Bild im Seitenkopf wird platziert im Header

Bildergalerie und Slideshow

Mehrere Bilder können übersichtlich und attraktiv mit den Komponenten Bildergalerie oder Slideshow platziert werden. Die Bildergalerie ist aber nur auf einer «Inhaltsseite 1-spaltig» möglich.

Bildgrössen

Die Bildmasse werden durch die jeweiligen Spaltenbreiten bestimmt. Angegeben ist die Bildbreite, die Bildhöhe beliebig. Bei manchen Komponenten ist die Bildbreite unveränderlich (fest).

Komponente Bildbreite frei/fest
Text/Bild-Komponente Inhaltsseite 3-spaltig 460 px frei
Text/Bild-Komponente Inhaltsseite 2-spaltig 700 px frei
Text/Bild-Komponente Inhaltsseite 1-spaltig 940 px frei  
Teaser 200 px fest
Intro Inhaltsseite 3-spaltig 460 px fest
Intro Inhaltsseite 2-spaltig 700 px fest
Intro Inhaltsseite 1-spaltig 940 px fest
Intro Übersichts-Seite (ohne Text / mit Text) 460 px / 220 px fest
Linkliste 220 px fest

Tipps:

Wir empfehlen, Bilder etwa in der doppelten Bildbreite in Magnolia abzulegen. So werden sie auch auf hochauflösenden Bildschirmen optimal angezeigt.

Als universelle Bildgrösse empfehlen wir eine Breite von 1000 px. Dies reicht für alle üblichen Darstellungsgrössen auf UZH-Webseiten und ergibt eine Dateigrösse (im JPG-Format) zwischen etwa 100 und 200 KB.

Bildquellen

Die Abteilung Kommunikation führt eine «Bilddatenbank UZH». Sie finden dort auch weitere Bildquellen und Informationen:
Bilderservice

Bildbearbeitung

Vor dem Hochladen in Magnolia müssen Bilder bereits die benötigen Bildmasse (Breite x Höhe) haben. Legen Sie keine zu grossen Bilder in Magnolia ab, sonst verzögert sich die Anzeige der Webseite. Entscheidend ist die Dateigrösse. Diese sollte möglichst kleiner sein als 200 KB.

Eine kleine Bildgrösse erreichen Sie mit kleinen Bildmassen (Breite und Höhe) und der Kompression des Dateiformats (siehe nächster Abschnitt).

Bildgrösse und Dateiformat bearbeiten Sie am besten in einem Bildbearbeitungsprogramm.

Dateiformate

JPEG

JPEG (Joint Photographic Experts Group), oft auch jpg, ist das verbreitetste Dateiformat für Bilder im Web. Es funktioniert auf allen Webbrowsern und eignet sich für alle Arten von Bildern, wie Fotos oder Grafiken. Es bietet eine einstellbare Kompression, die die Dateigrösse sehr reduzieren kann. Bei zu starker Kompression treten aber sichtbare Bildfehler auf (Verpixelung, Unschärfe, Artefakte).

PNG

PNG (Portable Network Graphics) ist ein neueres Format. Es bietet eine verlustfreie Kompression, die Dateien sind aber deutlich grösser als bei JPEG. Ausserdem erlaubt PNG Transparenz, also durchsichtige Bildteile.

GIF

GIF (Graphics Interchange Format) war das erste Dateiformat für Bilder im Web. Es bietet eine verlustfreie Kompression und die Möglichkeit, mehrere Bilder als Animation (Film) abzuspielen. Es hat aber eine reduzierte Farbpalette und eignet sich daher eher für Grafiken.