nachhaltiges webdesign jetzt
info

Bilder optimal einsetzen

Bilder sind nach Videos für den meisten Traffic im Internet verantwortlich. Sie nur an Orten einzusetzen, an denen sie nötig sind und sie danach zu optimieren, ist eine der größten Stellschrauben für nachhaltiges Webdesign.

negativen Fußabdruck minimieren
positiven Fußabdruck maximieren
sowohl als auch

Nur relevantes Bildmaterial verwenden

Wir benutzen Bildmaterial, um unsere Seiten anschaulich zu gestalten. Um Ihnen ein Gesicht zu geben. Um Textaussagen zu verstärken. Um Inhalte und Emotionen zu vermitteln, die sich durch Worte allein nie so direkt transportieren lassen.

Bei der geringen Aufmerksamkeitsspanne im Internet sind Bilder ideal geeignet, die Bindung der Besucher*innen an unsere Seiten zu erhöhen: Sie lockern auf, entwickeln Spannung und schaffen neue Fokuspunkte.

Es hat also gute Gründe, warum sie im Webdesign so häufig eingesetzt werden.

Bedenken wir allerdings die Datenlast von Bildern, die sich negativ auf Ladezeit, Ranking und Umwelt auswirken, wird klar: Wir dürfen sie nicht gedankenlos einsetzen.

Alternative Darstellungsformen erwägen.

Dass ein Bild mehr als tausend Worte sagt, ist wahr und nicht wahr. Denn in den meisten Fällen stehen sie nicht für sich allein, sondern sie unterstützen eine Textaussage.

Als Designer*innen stehen uns viele Möglichkeiten zur Verfügung, Textaussagen mit anderen Mitteln zu unterstützen: Typografische Variation, Dichte, Hierarchie, Farbe, um nur ein paar zu nennen. Keine Bilder zu verwenden wäre tatsächlich die umweltschonendste Methode.

Manchmal braucht es aber einfach grafische Darstellungen. Hier nach absteigender Datenlast geordnet:

Fotografien optimieren

Die Nützlichkeit detailreicher Fullscreen-Backgrounds sollten wir immer in Frage stellen. Denn hochauflösende Fotos sind nach Videos der größte Treiber von Datenvolumen auf Websites.

Die wichtigste Stellschraube bei allen Fotografien ist, die Dateigröße (Pixelanzahl) auf die tatsächliche Anzeigegröße anzupassen.

Für kleine Mobil-Bildschirme sollten wir auch kleinere Versionen der Bilder bereitstellen. Das funktioniert z.B. über das srcset-Attribut. (In CMS wie WordPress werden oft automatisch verschiedene Bildversionen gespeichert und entsprechend ausgewählt.)

Fotografien speichern wir am besten im modernen webp-Format, das noch datensparender ist als das jpg-Format. Alte Browser können mit dem Format allerdings nichts anfangen.

Aber auch jpg-Fotografien können wir datensparend komprimieren, indem wir die Bildqualität verringern: 70% sind bei reiner Bildschirmanzeige (keine Ausdrucke) meist vollkommen zufriedenstellend, oft reichen 50% aus und bei manchen Motiven kommen wir sogar mit 20% noch gut weg. Hier gilt es, zu testen und auszuprobieren. (Tools siehe Ressourcen)

Kommt es bei Fotografien nicht auf Farbtreue an, können wir außerdem mit Schwaz-Weiß- oder Duotone-Darstellung und Dithering (Farbreduktion mit Diffusionsraster) experimentieren. Denn weniger Farben bedeuten weniger Daten.

Unsere Bilder bekommen auf diese Weise allerdings eine andere Aussagekraft und erhalten stark grafische Qualitäten. Das lässt sich unter Umständen sehr geschickt nutzen, wenn wir für diese Methoden die Farbpalette der Seite heranziehen.

Pixelbasierte Grafiken optimieren

Desto weniger Farben dargestellt werden müssen, umso mehr lohnt sich das png-Format. Es zeigt in der 8-Bit-Variante maximal 256 Farben an und eignet sich so optimal für Grafiken. Flächige Bereiche werden viel farbtreuer dargestellt, als mit qualitätsreduzierten Bildern im jpg-Format. Die Datenersparnis ist zudem beachtlich.

  • Achtung ist bei Farbverläufen geboten: Die vielen unterschiedlichen Zwischentöne können mit 256 Farben nicht zufriedenstellend dargestellt werden.
  • Auch ist bei Texten Vorsicht angebracht: 2 Farben, eine für den Hintergrund und eine für den Text, sind nicht ausreichend. Ein paar zusätzliche Zwischentöne sind nötig, damit Kanten nicht verpixelt wirken.
  • Transparenzen sind ein weiterer Sonderfall: Hier müssen wir manchmal auf die datenintensivere 24-Bit-Version des png-Formats ausweichen, um feine Übergänge beizubehalten.

Warum dann überhaupt das png-Format nutzen? Weil wir auf diese Weise bildschirmfüllende, scharfe Grafiken für 20kb erhalten können.

Vektorbasierte Grafiken optimieren

Für einfache Grafiken ohne hohen Detailgrad, wie Icons und geometrische Darstellungen, ist das svg-Format bestens geeignet.

Durch die Verwendung von Vektoren lässt es sich zudem verlustfrei skalieren, wir müssen also meist nur eine einzige Version der Grafik bereitstellen.

Wenn wir sie nicht selbst erstellen, sollten wir den Code von svg-Dateien in jedem Fall kontrollieren. Da er wie html im Browser ausgeführt wird, können dort schadhafte Skripte enthalten sein.

Erstellen wir sie selbst oder optimieren wir bestehende svg-Dateien, können wir die Nachkommastellen der Pfade begrenzen. Meist reichen 2 Stellen mehr als aus.

Allerdings sollten wir auch Vektorgrafiken nie gedankenlos bevorzugen: Bei detailreichen Motiven, die wir sowieso nur klein darstellen möchten, ist ein optimiertes png die oftmals datensparendere Lösung.

Bildmaterial verzögert nachladen (Lazy Loading)

Nur Bilder zu laden, die tatsächlich auf dem Bildschirm unser Besucher*innen angezeigt werden, ist eine großartige Möglichkeit, Daten zu sparen.

Beim „Lazy Loading“ werden die Dateien erst geladen, wenn sie in den sichtbaren Bereich des Browserfensters gelangen, bzw. kurz davor. Das ist besonders häufig beim Scrollen der Fall.

Für alle modernen Browser ist die Anweisung denkbar einfach: loading=“lazy“ wird als Attribut in das img-Element als Attribut eingefügt, fertig. Kein Javascript nötig.

Falls diese Methode nicht in Frage kommt, existieren leichtgewichtige Skripte (oder PlugIns), die diese Aufgabe zuverlässig übernehmen.

Manche Seiten verzichten „above the fold“ schon komplett auf Bilder. Das ist der Bereich, der angezeigt wird, bevor man zu scrollen beginnt. Damit lässt sich zudem der „Layout Shift“ vermeiden. Also das Hin- und Herrutschen des Inhalts, wenn die Bilder fertig geladen sind.

Keine (Bilder-)Karusselle verwenden

Automatisch ablaufende Bilderkarusselle werden von der überwiegenden Mehrheit der Seitenbesucher*innen als störend empfunden. Sie sind ein wahrer UX-Albtraum: laufen zu schnell oder zu langsam ab, bringen ungefragte Bewegung, oft nicht intuitive Kontrollelemente und überfrachten mit Informationen.

Dagegen werden nicht automatisch ablaufende Bilderkarusselle von den meisten Seitenbesucher*innen schlicht übergangen oder nicht wahrgenommen. So bleiben Bilder und Inhalte, die auf Folgeseiten "verborgen" sind, in vielen Fällen reiner Datenballast und verlorene Informationen.

Wenn Bilder für die Aussage der Seite also tatsächlich wichtig sind, sollten sie immer sichtbar sein und nie in Karussellen verborgen.

Ressourcen

Habt ihr weitere außergewöhnliche Ressourcen (umfassend, tiefgreifend, klug, lustig) zu diesem Thema?
Vermisst ihr etwas? Oder hat euch der Inhalt sehr geholfen?

Dieses Projekt lebt von eurer Beteiligung. Schreibt mir gern eine Zeile an mail@gerritschuster.de