Bilder und Icons

Bilder
Icons

Bilder

Formate und Dateigröße

Als Dateiformate für Bilder auf wien.gv.at werden nur die Formate JPG, PNG oder, in speziellen Fällen, GIF verwendet. Andere Formate (wie zum Beispiel bmp oder tiff) werden nicht verwendet. Animierte Bilder (Flash, animated GIFs und dergleichen) werden in aller Regel nicht eingesetzt.

Verwenden Sie in Ihrem Bildbearbeitungsprogramm die Funktion „Für Web Speichern“, sofern diese verfügbar ist.

Für die Darstellung von Bildern sollte stets das für den jeweiligen Einsatz-Zweck passende Format gewählt werden, zum Beispiel:

jpg dieses Format ist für die meisten Bilder/Fotos am besten geeignet.
png für Transparenzen (kann in bestimmten Fällen eine gute Alternative zu JPG sein. Anwendung vor allem bei Infografiken, Grafiken mit transparentem Hintergrund oder Logos.)
gif für Animationen

Bitte achten Sie auf einen guten Kompromiss zwischen Bildqualität und Dateigröße. Dafür müssen zumindest folgende Maßnahmen gesetzt werden:

Bilder sollten nur so groß sein, wie sie auch maximal angezeigt werden. Die Optimierung für Retina-Bildschirme erfolgt über die entsprechende Deklaration im srcset Attribut.
Bilder werden manuell oder automatisiert, beispielsweise durch ein Build-Script oder die Funktionalität in einem CMS, verlustfrei und/oder verlustbehaftet komprimiert.
Bilder werden nach Möglichkeit neben traditionellen auch in modernen Bildformaten ausgeliefert.

Beispiel: Das folgende Bild wird mit einer Maximalbreite von 400px dargestellt. Es wurde mit einer Breite von 400px als jpg mit einer Qualität von 80% abgespeichert und verlustfrei komprimiert. Zusätzlich wird es im avif-Format an unterstützende Browser ausgeliefert. Für Retina-Bildschirme wird eine Variante des Bildes mit doppelter Pixeldichte zu Verfügung gestellt.

<picture>
  <source type="image/avif" srcset="/images/alte-donau.avif 1x, /images/alte-donau2x.avif 2x" />
  <img src="/images/alte-donau.jpg" srcset="/images/alte-donau.jpg 1x, /images/alte-donau2x.jpg 2x" width="400" height="225">
</picture>

Dateigröße jpg 100% Qualität: 185 Kilobyte
Dateigröße jpg 80% Qualität: 34 Kilobyte
Dateigröße jpg 80% Qualität mit verlustfreier Komprimierung: 31 Kilobyte
Dateigröße avif: 20 Kilobyte

Weiterführende Links zur Bildkomprimierung

Seitenverhältnisse und Abmessungen

Standard-Bilder (im Fließtext und in Cards) sind im Querformat und haben ein Seitenverhältnis von 16:9.

Mindestgröße Bilder im Fließtext: 390px × 219px (Retina: 780px × 438px)
Hinweis: Bei den 390px handelt es sich um einen Mittelwert, der sicherstellen soll, dass Bilder auch auf mobilen Geräten zufriendstellend dargestellt werden.
Maximale Größe Bilder im Fließtext: 710px × 399px (Retina: 1420px × 798px)
Hinweis: Die 710px ergeben sich durch die Maximalbreite der Container (.wm-row) in denen sich Fließtext befinden sollte.
Bilder in Cards sind auch im Seitenverhältnis 16:9 und können 260px × 147px (kleine Cards), 350px × 197px (normale Cards) oder 530px × 298px (große Cards) breit sein (jeweils doppelte Breite für Retina).

Eine Ausnahme sind Bilder in der Stage. Diese müssen nicht im Seitenverhältnis 16:9 dargestellt werden, um die bestmögliche Darstellung bei der jeweiligen Viewport-Breite gewährleisten zu können.

Mindestgrößen Stage Mobil: 450px × 169px (Retina: 900px × 338px)
Mindestgrößen Stage Desktop: 1200px × 450px (Retina: 2400px × 900px)

Lazy-Loading

Bilder, die sich beim Laden der Seite im sichtbaren Bereich des Browsers befinden („above the fold“), sollten nicht lazy geladen werden, alle anderen Bilder schon.

Dafür muss dem <img> Element das Attribut und der Wert loading="lazy" gegeben und die src und srcset Attribute durch data-src beziehungsweise data-srcset ersetzt werden.

<picture>
  <source type="image/avif" data-srcset="/images/alte-donau.avif 1x, /images/alte-donau2x.avif 2x" />
  <img data-src="/images/alte-donau.jpg" data-srcset="/images/alte-donau.jpg 1x, /images/alte-donau2x.jpg 2x" loading="lazy" width="400" height="225">
</picture>

Icons

Für Icons wird das SVG-Dateiformat verwendet. Diese Art von Grafiken lässt sich im Gegensatz zu Pixelgrafiken (Rastergrafiken) verlustfrei skalieren, also in der Größe ändern.

Icon Sprite

Das Wiener Melange Theme verfügt über ein externes SVG Icon Sprite Sheet, das an beliebiger Stelle im HTML-Code referenziert werden kann.

Ist das Icon rein visuell-unterstützend und wird begleitend mit Text dargestellt, muss es aus dem Accessibility-Tree und der Fokusabfolge entfernt werden.

Standort
<svg class="wm-icon" width="28" height="28" aria-hidden="true" focusable="false">
  <use xlink:href="/assets/icons/svg/sprite.symbol.svg#pin"/>
</svg>

Steht das Icon für sich, muss ein Alternativtext mitgeliefert werden.

<svg class="wm-icon" width="28" height="28" aria-labelledby="standaort-title" role="img">
  <title id="standaort-title">Standort</title>
  <use xlink:href="/assets/icons/svg/sprite.symbol.svg#pin"/>
</svg>