Bilder im Content-Bereich

Bilder können auf zwei verschiedene Arten mit der Text/Bild-Komponente eingefügt werden.

Bilder im Teaser

Bilder in einem  Teaser stehen immer über dem Teasertitel. Teaser-Komponente

Bild über dem Seitentitel

Das Bild wird im Intro-Bereich definiert.

Bild im Lead-Bereich einer Übersichts-Seite

Das Bild wird im Intro-Bereich definiert.

Bild in der Linkliste einer Übersichts-Seite

Das Bild steht unterhalb des Titels der Linkliste. Linkliste-Komponente

Hintergrundbild im Seitenkopf (key visual)

Ein Hintergrundbilder im Seitenkopf kann nur das ZI-Support-Team einfügen. Erstellen Sie eine Supportanfrage und legen Sie das gewünschte, unbearbeitete Bild bei.

Abhängig vom Einsatzbereich gelten folgende maximalen Bildbreiten (die Bildhöhe ist beliebig):

Content Inhaltsseite dreispaltig	460 px
Content Inhaltsseite zweispaltig	700 px
Content Inhaltsseite einspaltig	900 px
Teaser (fix)	200 px
Bild über dem Seitentitel einer dreispaltigen Seite (fix)	460 px
Bild im Leadbereich einer Übersichts-Seite (fix) ohne Text / mit Text	460 px / 220 px
Bild in einer Linkliste einer Übersichts-Seite (fix)	220 px

Hinweis:
Viele Bildschirme haben heute eine sehr hohe Auflösung (> 200 dpi). Damit können Text und Bilder schärfer dargestellt werden. Um dies optimal auszunützen, können Sie Bilder grösser platzieren, als efektiv angezeigt, z.B. in der doppelten Bildbreite: 920 px statt 460 px. Dadurch nimmt aber die Dateigrösse zu.

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

Die Abteilung Kommunikation unterhält eine Fotosammlung, v.a. von UZH-Gebäuden und Personen. Dort sind auch weitere Bildquellen aufgeführt.

UZH Fotosammlung und weitere Bildquellen

Bevor Bilder in Magnolias Asset-Verwaltung hochgeladen werden, sollten sie aufbereitet werden. Mindestens die Bildgrösse in Pixel sollte dem Verwendungszweck entsprechen, also nicht extrem viel grösser sein. Dies machen Sie am besten in einem Bildbearbeitungsprogramm.

Reduzieren Sie die Masse (Breite und Höhe) auf die benötigten Werte (siehe Kapitel «Bildgrössen» weiter oben). Beachten Sie auch den Hinweis auf die hochaufgelösten Monitore.

JPEG (Dateiendung .jpg): das verbreitetste Format, funktioniert auf allen Webbrowsern. Optimal für Bilder mit Farbverläufen, z.B. Fotos. Kann aber auch für alle Bilder verwendet werden, z.B. Grafiken.

GIF (Dateiendung .gif): altes Format, v.a. für Grafiken mit homogenen Flächen geeignet, z.B. Diagramme. Bekannt auch durch die GIF-Animation: mehrere Bilder können hintereinander abgespielt werden, ähnlich zu einem Zeichentrickfilm. Die GIF-Animation funktioniert aber nicht auf allen Webbrowsern.

PNG (Dateiendung .png): neueres Format, gedacht als Ersatz für JPEG. Weit verbreitet, funktoniert aber oft nicht auf älteren Webbrowsern. Es erlaubt Transparenz.