25. Februar 2019 | Jennifer Weyers

Responsive Bilder & responsives Webdesign

Responsivität

Immer wieder taucht die Frage auf, was responsive Bilder sind und warum responsives Webdesign nicht automatisch responsive Bilder inkludiert. Sie haben auch schon Spagetti im Kopf vor lauter Responsivität? Dann freuen Sie sich auf die Auflösung der Fragen in diesem Artikel.

Bilder & responsives Webdesign

Die Stärke von responsiven Webdesign ist es, das Design einer Website so flexibel zu gestalten, dass es sich jeder Displaygröße optimal anpasst. Auf diese Weise wird sichergestellt:

  • dass die Designsprache sich wie ein roter Faden über alle Displays hinweg durchzieht,
  • alle Texte gut lesbar sind
  • alle Bilder und Grafikelemente gut sichtbar sind
  • alle Funktionalitäten funktionieren (z.B. weil die Menu-Punkte auch auf kleinen Displays gut anklickbar sind)
  • und so insgesamt ein sehr schöner Eindruck über die Website vermittelt werden kann

Selbstverständlich unabhängig davon, ob der Eindruck über ein Smartphone, IPad oder einen normalen PC-Bildschirm geweckt wird.

Eine Galerie, die z.B. auf kleinen mobilen Geräten einspaltig ist, kann verschieden mehrspaltig werden, je größer ein Display ist. Ein schönes Beispiel hierfür ist „Lafolia„. Am einfachsten ausprobieren und sehen kann man den Effekt, wenn man die Seite über ein größeres Display aufruft und den Browser mit der Maus schrittweise zusammenschiebt. Die Galerie wechselt in diesem Fall von drei- über zwei- zu einspaltig. Bei genauerer Betrachtung stellt man zudem fest, dass auch die Bildgrößen variieren und beim zusammenschieben der Seite zunächst kleiner werden, um ab der nächsten Spaltenstufe wieder größer ausgespielt zu werden.

Responsive Bilder

Wenn sich die Bilder aber sowieso schon verkleinern und vergrößern und je nach Display in unterschiedlicher Anzahl ausgespielt werden, was macht dann noch den Unterschied zu responsiven Bildern aus?

Der Unterschied liegt im Unsichtbaren.

Was sich bei responsiven Bildern ändert ist das ursprüngliche Format in dem jedes einzelne Bild je nach Displaygröße ausgespielt wird.

Nehmen wir z.B. eine Fotografie, die im Original 2000px in der Breite aufweist.

OHNE einem responsiven Bildkonzept und entsprechenden Bildzuschnitten würde das Bild im Rahmen eines responsiven Designs sowohl auf großen wie auch kleineren Geräten in diesem Original ausgespielt und hierfür je nach Displaygröße optisch verkleinert.

MIT einem responsiven Bildkonzept und den dazu passenden Bildzuschnitten würde die gleiche Fotografie, sich optisch gleich verhalten. Tatsächlich würde im Hintergrund aber je nach Display ein anderes Foto gewählt werden, so dass nicht nur optisch ein kleineres Bild angezeigt wird, sondern es auch tatsächlich kleiner ist – z.B. 600px breit.

Und das macht sich bei der Ladezeit bemerkbar.

Folgen

Neben der hochwertigen Darstellung der Inhalte spielen auch schnelle Ladezeiten heute eine wichtige Rolle für die Benutzerfreundlichkeit einer Website. Wird eine Seite zu langsam geladen, verlassen viele Besucher die Seite wieder bevor sie die Inhalte sehen konnten. Das ist schade. Nicht nur, weil Sie die Inhalte ja extra auf Ihre Website gestellt haben, damit sie gesehen werden, sondern auch, weil sich das in zwei weiteren Punkten bemerkbar machen kann: Ihrem Image und Ihrem Ranking in den Suchmaschinen.

Sind responsive Bilder dann immer relevant?

Trotzdem muss nicht jede Seite einer Website ein responsives Bildkonzept aufweisen. Wer nur ein Bild auf der Seite hat und die Bildgrößen auf der Seite von Anfang an begrenzt ist, wird kaum bis keine Nachteile haben. Die Ladezeit wird in dem Fall kaum ins Gewicht fallen.

Relevant werden responsive Bilder da, wo die oben beschriebenen Folgen stark eintreten können. Hierzu zählen z.B.:

  • Lange bis endlos lange Galerien
  • Mehrere Fotografien auf einer Seite, die auf großen Displays auch in großen Formaten ausgespielt werden

Auch wenn Sie wissen, dass Ihre Besucher verstärkt von unterwegs bzw. mobil auf Ihre Website zugreifen, sollte das Thema responsive Bilder auf jeden Fall besprochen werden. Die Entscheidung für oder gegen responsive Bilder ist dann je nach Design und Inhalten zu treffen.

Falls Sie unsicher sind oder weitere Fragen zu diesem Thema haben, nehmen Sie gerne mit mir Kontakt auf. Ich berate Sie gerne.

In Kontakt

Denken Sie über ein Projekt oder eine Partnerschaft nach?
Get in Touch

Leitfaden & Inspirationen

Für Ihre neue Webseite

Was wäre, wenn Sie nicht erst Stunden damit verbringen müssten, um die Essenz richtig guter Websites zu erforschen? Wenn Sie auf direktem Weg zum Ziel kommen würden, weil Sie wüssten worauf Sie bei Ihrer neuen Website zu achten haben?

Eine schöne Vorstellung?

Dann sichern Sie sich jetzt unseren praktischen Leitfaden mit den wichtigsten Aspekten, Tipps und Tricks. Einfach und verständlich erklärt. Für Entscheidungsträger und Projektverantwortliche als leichter Einstieg in die komplexe Materie moderner Websites.

So stellen Sie sicher, dass ihr Website-Projekt ein voller Erfolg wird.

Zum Download