Beitrag 7: Bilder richtig einsetzen – einer der größten Hebel für schnelle und nachhaltige Websites

Bilder gehören zu den wichtigsten Gestaltungselementen einer Website.

Sie erzeugen Emotionen.

Sie vermitteln Produkte.

Sie erklären komplexe Sachverhalte.

Sie geben einer Website Persönlichkeit.

Gleichzeitig sind Bilder häufig einer der größten Verursacher von Datenvolumen.

Ein einziges unoptimiertes Foto kann mehrere Megabyte groß sein.

Wenn davon mehrere Bilder auf einer Startseite geladen werden, entsteht schnell eine enorme Datenmenge.

Deshalb sollte professionelle Bildoptimierung bereits im Webdesign beginnen.

Der erste Schritt ist die richtige Bildgröße.

Wenn ein Bild auf der Website maximal 1200 Pixel breit dargestellt wird, muss nicht unbedingt eine 6000 Pixel breite Datei ausgeliefert werden.

Responsive Images ermöglichen eine intelligente Auswahl.

Ein Smartphone kann eine kleinere Version erhalten.

Ein Desktop-Bildschirm eine größere.

Dadurch wird nur die tatsächlich benötigte Datenmenge übertragen.

Auch das Dateiformat spielt eine Rolle.

WebP ist mittlerweile weit verbreitet.

AVIF kann bei geeigneten Bildern noch bessere Kompression ermöglichen.

Aber das Dateiformat allein ist nicht entscheidend.

Ein schlecht gewähltes Originalbild bleibt auch in einem modernen Format unnötig groß.

Kompression muss daher sinnvoll eingesetzt werden.

Ein weiterer wichtiger Punkt ist Lazy Loading.

Bilder, die weit unterhalb des sichtbaren Bereichs liegen, müssen nicht zwangsläufig sofort geladen werden.

Sie können geladen werden, wenn sie tatsächlich in die Nähe des sichtbaren Bereichs kommen.

Das spart insbesondere auf langen Seiten Ressourcen.

Beim wichtigsten Bild einer Seite sollte dagegen genau geprüft werden, ob Lazy Loading sinnvoll ist.

Das zentrale Bild im sichtbaren Bereich kann für den ersten Eindruck und die wahrgenommene Ladegeschwindigkeit besonders wichtig sein.

Auch hier zeigt sich:

Performance ist keine Sammlung isolierter Tricks.

Es geht um Prioritäten.

Was braucht der Besucher zuerst?

Was kann später geladen werden?

Was muss überhaupt übertragen werden?

Das gleiche Prinzip gilt für dekorative Bilder.

Wenn ein Bild keine Information vermittelt und nur als Dekoration dient, sollte man überlegen, ob es tatsächlich notwendig ist.

Manchmal kann ein Gestaltungseffekt mit CSS umgesetzt werden.

Dann benötigt man keine zusätzliche Bilddatei.

Auch Hintergrundbilder sollten bewusst eingesetzt werden.

Ein großes Hintergrundbild, das auf allen Geräten geladen wird, kann erhebliche Datenmengen verursachen.

Responsive CSS kann helfen, passende Varianten auszuliefern.

Auch die Bildverwaltung im CMS ist entscheidend.

WordPress kann beispielsweise verschiedene Bildgrößen erzeugen.

Das ist grundsätzlich sinnvoll.

Allerdings sollte man wissen, welche Varianten tatsächlich benötigt werden.

Wer für jedes Bild zehn unterschiedliche Größen generiert, erzeugt unnötige Dateien.

Auch TYPO3 und Drupal bieten leistungsfähige Möglichkeiten zur Bildverarbeitung.

Professionelle Systeme sollten diese Möglichkeiten gezielt nutzen.

Ein gutes Bildkonzept ist daher nicht nur eine Frage der Gestaltung.

Es ist gleichzeitig eine Performance- und Nachhaltigkeitsstrategie.

Die beste Bilddatei ist nicht unbedingt die größte und schärfste Datei.

Die beste Bilddatei ist diejenige, die auf dem jeweiligen Gerät die gewünschte visuelle Qualität mit möglichst wenig Daten erreicht.

Das ist modernes Webdesign.

Hashtags

#Webdesign, #Bildoptimierung, #WebP, #AVIF, #WebsiteSpeed, #Webperformance, #WordPress, #TYPO3, #Drupal, #ResponsiveImages, #LazyLoading, #SEO, #NachhaltigesWebdesign, #GreenWeb, #FrontendDevelopment