Diese Sammlung von Informationen rund um die Verwendung von Bildern im Webbaukasten wird fortlaufend erweitert
Wir empfehlen die Verwendung von Bildern im Format 16:9. Sie können aber auch andere Formate wählen. Einige Bilder werden, je nach Verwendung und Endgerät, etwas unterschiedlich ausgegeben. Generell empfiehlt es sich, Hochformate möglichst zu vermeiden, da diese in den meisten Ausprägungen im Verhältnis viel größer ausgegeben werden als Bilder im Querformat und dadurch das Layout nicht mehr harmonisch wirkt.
Wenn das Motiv des Bildes informativen Charakter hat, sollte es mit etwas Abstand zu den Rändern positioniert werden, damit in den verschiedenen Ausgabegrößen alles Wichtige zu sehen ist. Bitte achten Sie auch auf die Mindestbreiten (siehe Tabelle).
Weitere Empfehlungen finden Sie in den Abschnitten zu den einzelnen Elementen.
| Verwendung | Mindestbreite |
|---|---|
| über 100% Breite | 1440px |
| im 2er Container | 960px |
| im 3er Container | 544px |
Format: SVG, PNG
Höhe: 115 px
Es gibt keine expliziten Größenvorgaben, sinnvoll sind Bilder im Querformat mit mind.1440px Breite.
Wenn eine möglichst exakte Ausgabe erreicht werden soll, empfehlen wir für die Hero-Bilder, das Bild mit 1440 x 617px anzulegen. Das Bildformat passt sich bei kleineren Endgeräten (Tablets, Smartphones mit Bildschirmbreite kleiner 1280px) leicht an, bleibt aber bei 100% Höhe.
Empfehlungen zu den Mindestbreiten s.o. in der Tabelle.
Standardmäßig wird das Bild oberhalb des Textes angezeigt, und zwar so, dass es den kompletten zur Verfügung stehenden Platz ausfüllt. Bei der Option, das Bild links oder rechts von Text umfließen zu lassen, füllt das Bild jeweils nur die Hälfte des zur Verfügung stehenden Platzes aus.
Dabei bleibt in allen Endgeräten das ursprüngliche Seitenverhältnis erhalten. Für die mobilen Ansichten sollten Sie aber bedenken, dass auf Tablets die Inhalte der 2er Container einspaltig und auf Smartphones die Inhalte der 3er-Container über die gesamte Breite ausgegeben werden.
Um es besser nachvollziehen zu können, können Sie folgende Testseite aufrufen und einfach die Breite Ihres Browserfensters verkleinern, um das mobile Verhalten zu simulieren:
Dieses Layout ist v.a. für das Erstellen von verlinkten Bildern in Kombination mit einem als Button dargestellten Link plus ggf. Kurztext gedacht (sogenannte "Kachel"-Optik/ "Call-to-action-Buttons"). Diese Elemente sollten Sie am besten nur in einem 50/50- oder einem 3-spaltigen Container bzw. im 70/30-Container in der rechten Spalte verwenden.
Die Bilder werden unabhängig vom Original automatisch in einem einheitlichen Seitenverhältnis 9/4 ausgegeben. Weicht das Originalformat davon ab, werden sie entsprechend bei der Ausgabe beschnitten. Beim Beschnitt wird immer vom Mittelpunkt des Ursprungsbildes ausgegangen.
Dieses Element ist eigentlich für die Einbindung von Videos gedacht, kann aber auch für Bilder verwendet werden; hier gelten dann für die Bildformate dieselben Vorgaben wie bei Text & Medien - Layout "Standard"
Videos werden immer im Format 16:9 ausgegeben; sind es im Original Hochformate, ist entsprechend links und rechts vom Video grauer Hintergrund zu sehen.
Für Galerien gibt es ein festes Format 16:9 - Mindestgröße 720px x 405 px
[weitere Infos folgen]
Anleitung Bilder-Upload in der Dateiliste
hilfe.evangelischer-webbaukasten.de...
Maxi MustermannDer Weg führt nach oben
MHAbb. 1
Sie können die Metadaten auch direkt vom Element aus bearbeiten: dazu im Reiter "Medien" am eingebunden Bild auf das Stiftsymbol klicken
A: Titel - dieser wird im Frontend als Tooltip angezeigt (probieren Sie es aus, indem Sie links in der Spalte mit dem Cursor über das große Bild fahren)
B: Beschreibung (optional) = Bildunterschrift - wird in den meisten Elementen unterhalb des Bildes angezeigt (Ausnahme: Hero-Bild)
C: Alternativer Text - dieser Text ist für menschliche Augen nicht zu sehen, steht aber im Quelltext, sodass er von Bots und Screenreadern gelesen und ausgewertet wird. Er ist extrem wichtig für die Barrierearmut und Suchmaschinenoptimierung - Seiten mit Bildern ohne alternativen Text werden z.B. abgestraft im Ranking von Suchmaschinen
Urheberrechtsnachweis/Copyright (rote Markierung):dieses Feld ist im Webbaukasten ein Pflichtfeld. Wenn es nicht ausgefüllt wurde, wird das Bild im Frontend nicht angezeigt, sondern durch einen Platzhalter ersetzt.
[Erläuterung folgt]