Responsive Bilder: visuelles Marketingtool

Friedrich Siever

Als auf Webdesign spezialisierte Agentur verwenden wir häufig und gerne responsive Bilder und visuelle Elemente. Doch warum macht das Sinn?

Weil unser Gehirn so funktioniert!

Wenn wir Informationen ausschließlich hören, geraten diese sehr schnell in Vergessenheit. Nur ca. 10% von uns behalten solche akustischen Informationen drei Tage lang im Gedächtnis. Nehmen wir die Informationen jedoch gepaart mit einem Bild auf, so steigt die Quote auf 65%. Der Grund hierfür liegt daran, dass ca. 80% der Menschen zu den sogenannten visuellen Lerntypen gehören und daher sich deutlich besser etwas merken können, wenn Sie es sehen – real oder auch als gedankliche Vorstellung.

Was hat das nun mit Webdesign zu tun? Das Beispiel zeigt die positiven Auswirkungen von Visualisierungen und der Kombination von Texten und Bildern in der Kommunikation. Eine Erkenntnis, die im klassischen Marketing schon lange Anwendung findet. Schließlich sollen sich potentielle Kunden an einen selbst oder an die eigenen Produkte erinnern. Es lohnt sich also mehr Aufwand für die visuellen Inhalte der Webseite zu investieren. Ein Trend, der im Webdesign daher auch im Jahr 2018 ununterbrochen anhält.

Schnell und schön

Hinsichtlich visueller Elemente spielen Bilder nach wie vor eine herausragende Rolle im Webdesign. Damit die Bilder ihre Wirkung nicht verfehlen, müssen Sie sinnvoll auf allen Gerätegrößen ausgespielt werden. Das kann zum Beispiel auch bedeuten unterschiedliche Formate, Bilder oder bewusst gewählte Bildausschnitt je nach Displaygröße zu verwenden, um die Bildaussage optimal zu vermitteln. Hier stellen sich die ersten Anforderungen an das responsive Webdesign Ihrer Webseite. Auch spielt die möglichst hohe Auflösung eine wichtige Rolle. Das bedeutet aber nicht, dass Sie unreflektiert riesige Bilddateien ins Netz stellen sollten. Warum nicht? Weil das Ihre Seite massiv verlangsamt, Seitenbesucher ein schlechteres Benutzererlebnis haben oder sogar abspringen und Google daher Ihre Seite deutlich schlechter ranken wird.

Was nutzen die schönsten Bilder, wenn niemand sie findet. Die Lösung hierfür sind sogenannte responsive Bilder.

Lösung: srcset

Ohne hier zu tief ins technische Detail zu gehen. HTML5 ermöglicht es modernen Webseiten beides zu sein. Schnell und schön! Denn es gibt das srcset Attribut. Leider kommt es auf vielen Webseiten noch nicht zum Einsatz.

Über srcset ist es möglich SEO relevante Bilder in unterschiedlichen Größen (und Geschwindigkeiten) an unterschiedliche Geräte auszuspielen. Das heißt, die Displaygröße und Qualität des Gerätes erhalten eine besondere Berücksichtigung. Mehr Responsivität geht nicht. Und schließlich wird es Ihnen auch von Google gedankt. Das merken Sie dann auch im Google Speedtest.

Wie prüfe ich, ob mein Webdesign bereits responsive Bilder verwendet?

Zum Glück ist das recht einfach.

  • Besuchen Sie mit Chrome oder Firefox Ihre Webseite.
  • Bewegen Sie den Mauszeiger irgendwo auf den Inhalt und drücken Sie die rechte Maustaste.
  • Klicken Sie im Kontextmenü „Seitenquelltext anzeigen“.
  • Es öffnet sich ein neuer Browsertab, der Ihr HTML enthält.
  • Mit der Tastenkombination „STRG + F“ öffnet sich die Suchfunktion.
  • Geben Sie hier „srcset“ ein.

Erscheinen 0 Ergebnisse, verwendet Ihre Webseite das srcset-Attribut nicht.

Einrichtung von responsiven Bildern

Um responsive Bilder selbst in Ihre Webseite einbauen zu können, benötigen Sie HTML5 Kenntnisse und sollte zumindest wissen, wie man ein Bild in eine HTML Seite einbaut. Ein sehr gutes Tutorial finden Sie (leider nur in englischer Sprache) in den MDN web docs.
Betreiben Sie eine eigene WordPress Seite, benötigen Sie darüber hinaus für eine korrekte und hochwertige Implementierung grundlegende PHP Kenntnisse (sizes-Attribute). Ferner sollten Sie sich etwas mit Theme-Development auskennen.
Sollten Sie hierfür keine Zeit haben und professionelle Hilfe bei der Erstellung einer modernen und erfolgreichen Webseite benötigen, sprechen Sie uns gerne an.