Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Bild

Bildgrößen/Formate

Allgemeines
  • Wir empfehlen eine Breite des Ausgangsbildes von 1920px im jeweiligen Verhältnis der Variante, um jede Darstellungsform abzudecken.
  • Bilder müssen manuell oder automatisiert fürs Web optimiert werden. Formate wie WEBP oder AVIF sind zu bevorzugen.
  • Dateigrößen müssen zusätzlich durch Komprimierung so klein wie möglich gehalten werden.
  • Bilder im Hochformat sind nur in berechtigten Ausnahmefällen vorgesehen, zum Beispiel Porträtfotos von Menschen in Visitenkarten, Zitaten und ähnlichen Fällen.
  • In Ausnahmefällen sind auch kleinere Formate möglich, zum Beispiel für App-Logos. Auch hier müssen Sie ein Seitenverhältnis von 16:9 einhalten und das Bild gegebenenfalls auf einen weißen Hintergrund setzen.

Bilder im Fließtext
  • Verhältnis 16:9
  • Maximale Darstellung 710px mal 399px

Bilder in Stage
  • Mobil
    • Verhältnis 1:1
    • Maximale Darstellung 520px mal 520px
  • Desktop
    • Verhältnis 8:3
    • Maximale Darstellung 1200px mal 450px

Bilder im Modal
  • Thumbnails
    • Verhältnis 1:1
    • Maximale Darstellung 44px mal 44px
  • Bild
    • Verhältnis 16:9 (auch Hochformat möglich)
    • Maximale Darstellung 1200px mal 675px

Bilder in Cards
  • Verhältnis 16:9 (auch Hochformat möglich)
  • Maximale Darstellung 1200px mal 675px
 Varianten

Bild

 Vorschau Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn Code 
<img src="/images/pattern/cards/ehk-schulbau-langobardenstrasse.webp" title="copyright: Stadt Wien - Kommunikation und Medien" width="530" height="298" alt="Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn">

Bild mit Beschreibung

Bildunterschrift: Eine Bildunterschrift (Bildtext) ist optional und richtet sich nach dem Kontext, in dem ein Bild verwendet wird. Der Bildtext ergänzt den Bildinhalt und enthält ergänzende Informationen, die dem Bild nicht zu entnehmen sind. Bildtexte dürfen maximal 150 Zeichen lang sein.

Vorschau
Luftbildaufnahme See und Wohngebäude in der Seestadt
Janis-Joplin-Promenade, Sonnenallee
 Code 
<figure>
  <img src="/images/pattern/cards/aspern-seestadt-von-oben.webp" loading="lazy" width="530" height="298" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt">
  <figcaption>Janis-Joplin-Promenade, Sonnenallee</figure>
</figure>

Bild mit Modal (Lightbox)

Das Vergrößerungssymbol (die Lupe) führt zu einer Vollansicht des Bildes. Vollansichten werden in einem Modal (Lightbox) angezeigt.

Vorschau Luftbildaufnahme See und Wohngebäude in der Seestadt Code 
<a href="/images/pattern/sonstige/1070/aspern-seestadt-von-oben.jpeg" data-modal="image">
  <img src="/images/pattern/cards/aspern-seestadt-von-oben.webp" width="530" height="298" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt">
</a>

Bilder Galerie

Bei mehreren Bildern öffnet sich immer ein Modal (Lightbox)

Einzelbild-Vorschau

 Vorschau Platz mit Brunnen Code 
<a href="/images/pattern/modal/modal1.jpg" data-modal="images">
  <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
</a>

<template id="images">
  <wm-carousel hideDots single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal2.jpg" width="530" height="298" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
    </div>
  </wm-carousel>
</template>

Rasterbild-Vorschau

 Vorschau Code 
<wm-gallery>
  <ul>
    <li>
      <a href="" data-modal="gallery-images">
        <img width="208" height="208" src="/images/pattern/cards/aspern-seestadt-von-oben.webp" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt" />
      </a>
    </li>
    <li>
      <a href="" data-modal="gallery-images" data-modal-pos="1">
        <img width="208" height="208" src="/images/pattern/cards/ehk-schulbau-langobardenstrasse.webp" alt="Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn" />
      </a>
    </li>
    <li>
      <a href="" data-modal="gallery-images" data-modal-pos="2">
        <img width="208" height="208" src="/images/pattern/cards/ehk-urbaner-platz.webp" alt="Schematische Darstellung Fläche mit Sitzmöglichkeiten umringt von Bäumen" />
      </a>
    </li>
  </ul>
</wm-gallery>

<template id="gallery-images">
  <wm-carousel hideDots single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/sonstige/1070/aspern-seestadt-von-oben.jpeg" width="530" height="298" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt">
    </div>
    <div class="image">
      <img data-src="/images/pattern/sonstige/1070/ehk-schulbau-langobardenstrasse.jpeg" width="530" height="298" alt="Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn">
    </div>
    <div class="image">
      <img data-src="/images/pattern/sonstige/1070/ehk-urbaner-platz.jpeg" width="530" height="298" alt="Schematische Darstellung Fläche mit Sitzmöglichkeiten umringt von Bäumen">
    </div>
  </wm-carousel>
</template>
Dev

Weitere Beispiele

Bild Lazy Loading

Beim Lazy Loading wird das Bild beim Seitenaufruf nicht sofort geladen, sondern erst, wenn der*die Nutzer*in in den sichtbaren Bereich des Bildes scrollt.

Vorschau Luftbildaufnahme See und Wohngebäude in der Seestadt Code 
<img src="/images/pattern/cards/aspern-seestadt-von-oben.webp" loading="lazy" width="530" height="298" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt">

Bild mit Quelle

Copyrights stehen am Ende der Seiten, sobald das title-Attribut des Bildes mit "copyright: " beginnt, siehe Footer dieser Seite.

Der Copyright-Block im Footer wird standardmäßig als Details dargestellt.

Vorschau Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn Code 
<img src="/images/pattern/cards/ehk-schulbau-langobardenstrasse.webp" title="copyright: Stadt Wien - Kommunikation und Medien" loading="lazy" width="530" height="298" alt="Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn">

Bild je nach Endgerät (responsive)

Je nach Bildschirmbreite ist das Bild in unterschiedlicher Größe zu sehen.

Vorschau Althanquartier Code 
<img src="/images/pattern/cards/althanquartier-aussen.webp" srcset="/images/pattern/cards/althanquartier-aussen.webp 525w, /images/pattern/cards/althanquartier-aussen_1140.webp 1140w" alt="Althanquartier" width="525">

Bild responsive mit Artdirection

Je nach Bildschirmbreite wird ein passender Bildausschnitt angezeigt.

Vorschau Code 
<picture>
  <source srcset="/images/pattern/stage/verkehr-stage-l.jpg" media="(min-width: 48em)">
  <img src="/images/pattern/stage/verkehr-stage-s.jpg" alt="">
</picture>

Bild in unterschiedlichen Dateiformaten

 Vorschau Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn Code 
<picture>
  <source type="image/webp" srcset="/images/pattern/cards/ehk-schulbau-langobardenstrasse.webp">
  <img width="390" height="219" src="/images/pattern/cards/ehk-schulbau-langobardenstrasse.jpg" alt="Visualisierung des neuen Schulgebäudes, davor Straße, Gehsteig, Menschen, Bäume, Straßenbahn" />
</picture>

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at