Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Bilder

Bildgrössen

Komponente Grösse (angezeigt) 1 Grösse (empfohlen) 2 Seitenverhältnis (empfohlen) 3
Text/Bild-Komponente 840px Breite (max.) 1680px Breite 16:9, 3:2 oder 4:3
Intro-Komponente (Bild und Slideshow) 840px Breite 1680px Breite 16:9 oder 3:2
Intro-Komponente auf Homepages und Subhomepages (Bild und Slideshow) 1240px Breite 2480px Breite 16:9 oder 3:2
Slideshow (im Content) 1240px Breite 2480px Breite 16:9, 3:2 oder 4:3
Linkliste 385px Breite 770px Breite 16:9, 3:2 oder 4:3
Teaser 320px Breite 640px Breite 16:9, 3:2 oder 4:3
Kontakt-Bild auf Personen-Seite 200px Breite 400px Breite 2:2.5 oder 2:3
Kontakt-Bild auf Team-Übersicht (automatisch von Personen-Seite übernommen) 100px Breite    
News-Übersicht (automatisch von News-Eintrag übernommen) 385px Breite 4    
Bildergalerie 575px Höhe 1150px Höhe frei
RSS-Slider (automatisch von News-Eintrag übernommen) 385px Breite   16:9 (fest)

1 Grösse (angezeigt)

Maximale angezeiogte Grösse eines Bildes. Bei kleinem Browserfenster werden Bilder verkleinert dargestellt. Der angegebene Wert (meist die Breite) ist immer fest, ausser bei der Text/Bild-Komponente. Dort kann eine kleinere Bildgrösse selbst gewählt werden. Die andere Grösse (meist die Höhe) ist immer flexibel, ausser beim RSS-Slider.

2 Grösse (empfohlen):

Wir empfehlen, Bilder mit dem doppelten Wert der angezeigten Grösse hochzuladen. Dadurch erscheinen sie auch auf hohauflösenden Monitoren in guter Qualität.

Seitenverhältnis:

Wir empfehlen, bei Bildern auf einer Website möglichst das gleiche Seitenverhältnis zu verwenden. Dies ergibt ein ruhigeres Erscheinungsbild.

3 News-Übersicht: Die Bilder werden momentan noch mit 200px Breite angezeigt (Juni 2023)

Dateigrösse

Bilder auf Webseiten sollten eine möglichst kleine Dateigrösse haben- Dies ermöglicht ein schnelles Laden der Webseite. Die Dateigrösse hängt von der Bildgrösse ab.

Wir empfehlen eine max. Dateigrösse von ca. 500 KB. Mit dem JPG-Format und entsprechender Komprimierung ist so eine gute Bildqualität möglich.

Dateiformate

JPEG / JPG

Joint Photographic Experts Group / Gut geeignet für Fotos
Das meistgenutzte 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 (min. 60 / 100). Der genaue Wert hängt vom jeweiligen Programm ab.

PNG

(Portable Network Graphics / Gut geeignet für Grafiken, z.B. Logos
Etwas neueres Format als JPEG. Es bietet eine verlustfreie Kompression, die Dateien sind aber deutlich grösser als bei JPEG. Ausserdem erlaubt PNG Transparenz, also durchsichtige Bildteile.

GIF

Graphics Interchange Format / Nicht empfohlen
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 (siehe entsprechender Abschnitt oben).

Bearbeiten und verkleinern Sie Bider auf Ihrem lokalen Computer, bevor Sie sie in Magnolia hochladen.

Einfache Bearbeitungen und Grössenänderungen können Sie mit den mitgelieferten Bildprogrammen auf Windows (Paint) und Mac (Vorschau) machen. Falls Sie oft Bildbeabeitungen durchführen, empfehlen wir professionelle Bildbearbeitungsprogramme, wie Affinity Photo oder Adobe Photoshop.

Bildquellen

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

Weiterführende Informationen

Online-Bildbearbeitung

Kurse für CMS-Autor:innen

CMS-Einführung, Bildbeschaffung, Bildbearbeitung, rechtliche Grundlagen, Barrierefreiheit  (Accessibility)