Bilder

Bilder auf Webseiten sollten eine möglichst kleine Dateigrösse haben. Das beschleunigt dass Laden der Webseite. 

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

Verwenden Sie folgende Masse für alle Bilder. Damit erhalten Sie in allen Anzeigegrössen eine gute Qualität und eine akkzeptable Dateigrösse.

• Dateiformat: JPG
• Breite: 2000 px
• Qualität (Kompression): 60-80 (von 100)

Affinity-Vorgaben

Zur einfachen Grössenbearbeitung gibt es eine Vorgaben-Datei für das Bildbearbeitungsprogramm Affinity am Ende dieser Seite.

Grösse (angezeigt): 

• Maximale angezeigte Grösse eines Bildes. Bei kleinem Browserfenster werden Bilder verkleinert dargestellt.
• Das angegebene Mass (meist die Breite) ist bei allen Komponenten unveränderlich, ausser bei der Text/Bild-Komponente. Das andere Mass (meist die Höhe) ist immer flexibel, d.h. das Seitenverhältnis ist beliebig. Nur der RSS-Slider hat ein festes Seitenverhältnis.

Grösse (empfohlen):

Wir empfehlen, Bilder mit dem doppelten Mass 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.

JPG / JPEG (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 (Logos, Diagramme)
Etwas neueres Format als JPEG. Es bietet eine verlustfreie Kompression. Bei Fotos sind die Dateien aber deutlich grösser als bei JPEG, bei Grafiken meist kleiner. Ausserdem erlaubt PNG Transparenz, also durchsichtige Bildteile.

SVG (Scalable Vector Graphics)

Für Grafiken, z.B. Logos
Vektorbasiertes Grafikformat, darum nur für Grafiken, Schemas, Diagramme, Logos, etc. geeignet, aber nicht für Fotos. SVG-Grafiken können beliebieg skaliert werden ohne Qualitätsverlust.

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.

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".

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 oder Adobe Photoshop.

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