Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Bilder

Bildgrössen

Komponente Angezeigte Grösse 1 Empfohlene Grösse der Bilddatei 2 Empfohlenes Bildformat
Text/Bild-Komponente 840px Breite (max.) 1680px Breite 16:9 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 4:3 oder 16:9
Teaser 320px Breite 640px Breite 4:3, 16:9 oder 3:2
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 3    
Bildergalerie 575px Höhe 1150px Höhe frei
RSS-Slider (automatisch von News-Eintrag übernommen) 385px Breite   16:9 (fest)

1 Angezeigte Grösse: 

Dies ist die maximale Grösse bei einem grossem Bildschirm. Bei kleinem Bildschirm werden Bilder verkleinert dargestellt. Der angegebene Wert (meist die Breite) ist immer fest, ausser bei der Text/Bild-Komponente. Dort kann die Bildgrösse selbst gewählt werden. Die andere Grösse (meist die Höhe) ist immer flexibel, ausser beim RSS-Slider.

2 Empfohlene Grösse der Bilddatei*:

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

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, damit sie schnell geladen werden. 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 auch eine gute Bildqualität möglich.

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 (min. 60 / 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 (siehe entsprechender Abschnitt oben).

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

Weiterführende Informationen

Online-Bildbearbeitung

Kurs Bildbearbeitung

Einführung für «Affinity Photo»

Kurs «Bilder für den Webauftritt»

Wie komme ich zu Bildern?
Wie bearbeite ich Bilder?
Rechtliches (Copyright, etc.)