Responsive Images haben eine relative Breite und werden auf verschiedene Devices unterschiedlich aufbereitet.
Verschiedene Aspekte müssen berücksichtigt werden, um mit responsive Images zu gestalten.
Von der relativen Grösse, über das Device-Rendering zur Pixelauflösung über Aufbereitung sowie File-Typen muss vieles berücksichtigt werden.
Ein Überblick gibt es hier
Responsive Images W3school
Responsive Image Generator
Image File Types - Sitepoint.com
Bilder sollten, wenn immer in Prozent in ihrer Breite (Standard) oder Höhe definiert werden. Niemals beide Seiten mit Prozent versehen (dann verhaut es das Ratio).
Bilder sollten für die spezifische Ausdehnung pro Device gerendert werden, um Ladezeiten möglichst akkurat zu halten. Die meisten Site-Builder/CMS rendern Bilder automatisch auf die jeweiligen Viewport-Grössen herunter.
Bilder sollten für verschiedene Bildschirmauflösungen aufbereitet sein. Manuell wird dies mit den Endungen @2x und @3x gemacht.
Bilder sollten schnell laden. Ihre Grösse wird bei den meisten Web-Tools auf 2-10 MB beschränkt. Umso kleiner eine Datei umso schneller ist die Webseite.
Zuerst abklären, in welcher Art das gewünschte Bild gerendert wird. Gibt es ein CMS-Script oder Tool, welche das Resizing automatisch macht, oder müssen die Bilder manuell für die Programmierung aufbereitet werden. Welche Versionen und Auflösungen.
Der Designer muss vor allem die maximale Grösse definieren. In welcher Grösse und Qualität soll ein Bild auf dem neusten Hi-Resolution-Bildschirm haben. z. B. Ein 5K 27" Bildschirm hat eine Pixelauflösung von ca. 5120 x 2880 Pixel.
Ein Bild mit idealer Performance und adäquater Bildschirmauflösung ist um die 2500 Pixel (Maximale Breite oder Höhe). Ausser alle Facetten können vom CMS abgefangen und ideal gerendert werden.
Es gibt verschiedene Webformate für Bilder.
Ideal für Fotografien oder Grafiken mit komplexeren Bildmuster.
Früher ideal für Grafiken mit einfachen Formen. Maximal 256 Farben.
Können Animationen enthalten und ist populär bei Memes
Ist eine Weiterentwicklung des GIFs und erlaubt zusätzlich Transparenz.
PNG-8 (8Bit = 256 Farben)
PNG-24 (24Bit = 16.777216 Millionen Farben)
Sind Vektor basierte Bilder. Somit Vektorgrafiken bestmöglich mit SVG einbinden, da SVG extrem kleine Datenfiles erstellt.
SVG können ebenfalls Animation enthalten und per Code gezielt angesteuert und manipuliert werden.
Möchtest du Google Analytics mit anonymisierter IP-Adresse zulassen?
