Image Markup and Ratios

Alle Einheiten des Styleguides basieren auf der Annahme, dass Bilder in stimmigen Größenverhältnissen verwendet werden. Deshalb ist es unerlässlich alle verwendeten Bilder anhand ihrer Ratios zu prüfen und gegebenenfalls an ein erlaubtes Bildformat anzupassen. Nur wenn alle Bilder im erlaubten Format sind, kann davon ausgegangen werden, dass die Seite sich in allen Bildschirmgrößen und Variationen korrekt verhält.

Zusätzlich zu den Bildgrößen muss immer überprüft werden ob bei Bildern mit Text Overlays, der Kontrast noch ausreichend hoch ist um die Barrierefreiheit zu erhalten. Hier ist eine hohe Eigenverantwortung und gründliche Selbstüberprüfung unerlässlich.

All units in the style guide are based on the assumption that images are used with coherent proportions. For this reason you should check all images used by there ratios and if necessary adapt them to a permissible image format. Only if all images are in the allowed format can you assume that the web page will behave correctly for all screen sizes and variations.

Besides checking the image sizes, it is important to always check whether the contrast in images with text overlays is high enough to ensure accessibility. A high level of personal responsibility and thorough self-checking are vital here.

Ratios

Hier sehen Sie die wichtigsten Bildratios im Überblick. Einige Sonderformate auf speziellen Seiten werden hier nicht beschrieben. Bitte beachten Sie auch, dass nicht jedes Modul auf allen Seitentypen erlaubt ist. Mehr Details finden Sie im Berlin.de Support Wiki.

Hinweis: Für die meisten Teaserformat im 4:3 Format empfiehlt sich eine Mindestgröße von 480 x 360 Pixel.

	Ratio
Teaser	4:3
Text/Bild Modul	4:3 und 3:4
Marketing-Teaser	4:3
Poster Teaser	4:5
Bildergalerie	Originalratio im 2:1 Container
Bühne	2:1
Map	4:3
Logogalerie	Originalratio im 1:1 Containergrid
Testimonial	4:3
FAQ	4:3 und 3:4
Artikelbild	2:1
Homepage Hero (Startseite, volle Breite)	3:1 (andere Formate nach Absprache möglich)

Default Markup

The default image markup contains .image__image, .image__caption and .image__copyright inside an .image container:

Image caption

@Image copyright

<div class="image">
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Image caption
        </p>
        <p class="image__copyright">
            @Image copyright
        </p>
</div>

Image With Overlay Markup

The .image__overlay container adds an overlay area to the image:

The .image--darken class on the .image container darkens the image (default):

Image Overlay

Image copyright

<div class="image image--darken"> 
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" class="image--darken" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay">                 <a href="#" class="title" data-mainlink="true">
                Image Overlay
                </a>
                <p class="image__copyright">
                Image copyright
                </p>        
        </div>
</div>

The .align--bottom class on the .image__overlay container change the position of the text and copyright:

Image Overlay (align bottom)

Image copyright

<div class="image image--darken"> 
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3_1200.jpg" class="image--darken" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay align--bottom">                 <a href="#" class="title" data-mainlink="true">
                Image Overlay (align bottom)
                </a>
                <p class="image__copyright">
                Image copyright
                </p>        
        </div>
</div>

Image forced into a 2:1 container (Articleimage)

.image.image--force-2x1

Caption