Bilder
Seiteninhalt
Anwendungen
Einzelne Bilder
In folgenden Komponenten kann jeweils ein Bild platziert werden:
Mehrere Bilder
In diesen beiden Komponenten lasen sich mehrere Bilder gleichzeitg platzieren
Personen-Fotos
Portraitfotos auf Personen- und Team-Seiten platzieren Sie im
Bildgrössen
Design-Update 2023
Anfang 2023 ändert sich das Web-Design sehr. Dies betrifft auch und v.a. die Bildgrössen. Der geplante Update-Termin ist Ende März 2023
Die maximalen Bildmasse werden durch die jeweiligen Spaltenbreiten bestimmt. Angegeben ist die Bildbreite, die Bildhöhe ist 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 | |
Personen-Seite (Kontakt) | 100 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 von ca. 200 KB (im JPG-Format).
Dateiformate
JPEG
Gut geeignet für Fotos
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 stark reduziert. Bei zu starker Kompression treten aber sichtbare Bildfehler auf (Verpixelung, Unschärfe, Artefakte).
Wir empfehlen eine "gute" Qualität: ca. 80 (von 100). Der genaue Wert hängt vom jeweiligen Programm ab.
PNG
Gut geeignet für Grafiken, z.B. Logos
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
Nicht empfohlen
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.
Farbraum
Der Farbraum von Bildern im Web muss immer RGB sein, ideal ist "sRGB". Die meisten Bilder, v.a. im JPEG-Format sind im RGB-Farbraum. Druckereien verwenden meist den CMYK-Farbraum (4-Farbdruck).
Den Farbraum eines Bildes sehen Sie in einem Bildbearbeitungsprogramm, oft aber auch im Standard-Bildanzeigeprogramm bei "Informationen".
Bildbearbeitung
Bilder, die im Asset-Bereich von Magnolia abgelegt werden, müssen bereits die richtigen Bildmasse haben. Entscheidend ist die Dateigrösse: möglichst kleiner als 300 KB. Sonst dauert der Seitenaufbau im Webbrowser lange.
Sie verkleinern ein Bild auf Ihrem lokalen Computer (bevor Sie es ins Magnolia hochladen). Auf dem Mac können Sie ein Bild einfach in der Vorschau öffnen, und dann über das Menu Werzeuge und den Befehl Grössenkorrektur anpassen. Auf Windows wird das wohl ebenfalls im Standard-Bild-Tool möglich sein. Sonst benützen Sie halt ein Bildbearbeitungsprogramm wie z.B. Adobe Photoshop oder Affinity Photo.
Möchten Sie ein bereits ins Magnolia hochgeladenes Bild nachträglich verändern, dann verändern Sie ebenfalls das lokale Original. Dieses laden Sie dann in denselben Asset-Container hoch (s. roter Pfeil im Bild), und publizieren letzteren nochmals.
Bildquellen
Die Abteilung Kommunikation führt eine «Bilddatenbank UZH». Sie finden dort auch weitere Bildquellen und Informationen:
Bilderservice