Verwendung
Das Design System unterscheidet zwischen Bildern mit einem inhaltlichen oder funktionalen Zweck (Icons, Symbole, Logos) sowie rein illustrativen, redaktionellen Bildern. Funktionale Bilder sind Bestandteil der Icon-Bibliothek, Illustrationen werden je nach Bedarf erstellt und eingebunden.
Unnötige illustrative Bilder sollen insbesondere innerhalb von Formular-Prozessen vermeiden werden, wenn diese nicht der Visualisierung der jeweiligen Aufgabe dienen.
Sämtliche Bilder und Icons orientieren sich immer am Bildkonzept und müssen zentral beschafft und lizensiert werden. Illustrationen und Halbton-Bilder (i.d.R Fotografien), insbesondere solche aus externen Quellen, die nicht der Anmutung der Illustrationen des Zolls entsprechen sind unerwünscht.
Flächige Illustrationen und Icons sind immer als skalierbare Vektorgrafiken angelegt, die unabhängig ihrer Dimensionen und anderen Parametern wie Bildschirmgrößen und -auflösungen eine optimale Darstellung bieten. Auf die Verwendung von sogenannten “Sprites”, in denen die Daten mehrerer Bilder oder Icons kombiniert werden, wird aus Gründen der Barrierefreiheit und der Performance verzichtet.
Aus offensichtlichen Gründen kann das Design System keine weiteren Regeln für Logos u.ä. externer Anbieter festlegen, diese müssen so übernommen werden wie sie von den jeweiligen Anbietern zur Verfügung gestellt werden.
Bildunterschriften
Für Illustrationen und Schaubilder, denen eine Bildunterschrift zugeordnet werden soll bietet sich die Kombination der hierfür vorgesehenen HTML-Elemente <figure> und <figcaption> an.
Text in Bildern
Eine freie Positionierung von HTML-Text-Elementen über Halbton-Bildern soll vermieden werden, da sich bei redaktionell frei bestimmbarer Textmenge diese Positionierungen nicht über alle Bildschirmgrößen garantieren lässt. Eine Ausnahme bilden hier großflächige Bilder im Header der Seiten: Wenn hier über Bilder ein Text platziert werden muss (vgl. „Zurück“-Navigation bei zoll.de), dann muss dieser Text in eine farblich hinterlegte Box gesetzt werden, da ansonsten die Kontraste zum beliebigen Hintergrund unkontrollierbar sind.
Wenn sich wesentlicher, nicht-zufälliger Text in Bildern befindet, so wird hier auf die Handreichung zum Umgang mit Alternativtexten verwiesen, die berücksichtigt werden muss.
Bildoptimierung
Aktuell werden die Dateiformate WebP, SVG, PNG und JPEG verwendet, für die es jeweils eigene Anforderungen für die Erstellung und insbesondere die Ladezeit-orientierte Optimierung gibt. Regeln und Hilfen zur korrekten Erstellung, Optimierung und Einbindung dieser Bilddaten entnehmen Sie bitte den jeweiligen Komponenten, in denen sie verwendet werden sollen.
Wegen der zu geringen Anzahl von Bilddaten wurde aus ökonomischen Gründen bewusst auf das Aufsetzen eines (teil-)automatisierten Prozesses zur serverseitigen Bildoptimierung verzichtet, diese werden zurzeit noch effizienter händisch bearbeitet.
Auf die Verwendung des veralteten GIF-Formats wird verzichtet; Animationen im GIF-Format sind aus Gründen der mangelnden Barrierefreiheit nicht erwünscht.
Bilder für Social Media und Suchmaschinen
Bei der Erstellung von Bildmaterialien für soziale Netzwerke oder Google SERP müssen die festgelegten Seitenverhältnisse für Open Graph Data beachtet werden. Weitere Informationen finden Sie im Abschnitt Suchmaschinen-Optimierung (SEO).
Do’s and Dont’s
So:
- Sparsam einsetzen, um den Prozess-orientierten Charakter der Anwendung zu unterstreichen.
- Einsetzen, wenn es der Orientierung dient.
So nicht:
- Fotografien, die nicht der Bildsprache des Zolls entsprechen
- Übergroße Bilder, die den wesentlichen Inhalt einer Seite aus dem Viewport verdrängen
- Wesentliche Inhalte eines Bildes oder einer Grafik auf transparentem Hintergrund