Denis Potschien 27. Juli 2018

Responsives Webdesign: So wählst du die richtigen Fotos für unterschiedliche Formate

Für dich als Webdesigner ist das mobile Internet eine Herausforderung. Websites müssen auf unterschiedlich großen Displays mit verschiedenen Seitenverhältnissen gut aussehen. Zu deinen Aufgaben gehört dabei auch die Auswahl geeigeneter Fotos für responsives Webdesign.

Diese müssen möglichst auf allen Geräten und in allen Auflösungen gut funktionieren. Unser heutiger Artikel soll sich daher gezielt dem Thema widmen, wie du die geeignetesten Fotos für responsives Webdesign auswählst.

Details – wenn weniger mehr ist

Auf klassischen Desktoprechnern oder Notebooks lassen sich Fotos in ordentlicher Auflösung darstellen. Das bedeutet, auch detailreiche Fotos können gut vom Auge erfasst werden. Auf Tablets oder gar Smartphones müssen diese Fotos oft stark verkleinert dargestellt werden. Hier können Details schon einmal verloren gehen oder so klein geraten, dass sie kaum noch zu erkennen sind. Wenn es sich dabei um unbedeutende Bilddetails handelt, ist das kein Problem. Wenn die Details jedoch wichtig für die Bildaussage sind, solltest du in jedem Fall darauf achten, dass solche Details auch auf kleinen Auflösungen sichtbar sind.

Als Standardbreite für Smartphones im Portrait-Modus haben sich 320 Pixel etabliert. Ist die maximale Bildbreite innerhalb eines responsiven Webdesigns so definiert, dass Bilder immer mit maximaler Bildschirmauflösung dargestellt werden, kannst du die 320 Pixel als Richtgröße anwenden und somit vorab testen, ob ein Foto in dieser Auflösung noch funktioniert.

Als Beispiel soll ein typisches Businessfoto einer Teambesprechung dienen. Folgende Fotos, die wir dem Stockfotoanbieter Bigstock entnommen haben, stellen eine solche Situation dar. Während beide Fotos in großen Auflösungen gut funktionieren, erkennt man bei kleinen Darstellungen schnell, dass das Foto mit den acht Personen weit weniger gut wirkt. Die Personen sind zu klein und die Gesichtsausdrücke kaum erkennbar.

Achte darauf, dass Gesichter immer so groß sind, dass Gesichtsausdrücke noch deutlich wahrnehmbar sind. Auch solltest du darauf achten, dass die Personen und vor allem die Köpfe einen Großteil des Bildes ausmachen.

bigstock_responsiv_team
Fotos mit klassischen Teambesprechungen

Das richtige Foto aus einer Serie wählen

Oft neigt man dazu, möglichst viel Inhalt, beziehungsweise Botschaft, auf einem Foto zu vermitteln. Hier sollte man immer abwägen, was nötig und was verzichtbar ist. Dabei hilft es, mehrere ähnliche Fotos zu vergleichen. Fotoplattformen, wie Bigstock, bieten zu jedem Foto in der Regel eine Reihe ähnlicher Motive an. Oftmals stammen sie aus einer Foto-Session. Das heißt, es sind mehrere Fotos einer Szenerie vorhanden.

bigstock_responsiv_praesentaion
Fotos einer Reihe mit unterschiedlichen inhaltlichen Schwerpunkten

Unser obiges Beispiel zeigt zwei Fotos einer Präsentation. Auch wenn das erste Foto wesentlich konkreter die Präsentation beschreibt, wird auch auf dem zweiten Foto schnell deutlich, was abgebildet ist. Durch den Verzicht auf Details, wie den Flipchart, den Tisch und die drei sitzenden Personen, rückt der Präsentierende ins Zentrum. Gerade auf kleinen Displays wirkt die Person deutlich präsenter.

bigstock_responsiv_aehnliche
Foto mit weiteren Vorschlägen aus derselben Fotoreihe

Natürlich muss immer qualifiziert entschieden werden, welche Details weggelassen werden können. Soll der Fokus gar nicht auf dem Präsentierende liegen, sondern etwa auf dem Publikum, darf der Blick auf die Zuhörer natürlich nicht wegfallen.

Fotos mit Schwerpunkt

Statt von Grunde auf Fotos zu suchen, die nicht zu detailliert sind und bei denen nur das Wichtige in Erscheinung tritt, kannst du auch einen anderen Ansatz verfolgen. Suche Fotos, die einen eindeutigen inhaltlichen Fokus besitzen.

Das folgende Beispiel zeigt vier Situationen mit Menschen, die telefonieren. Das Umfeld dieser Personen ist dabei zweitrangig. Die Fotos funktionieren auch, wenn das Umfeld weggelassen wird.

bigstock_responsiv_telefon
Fotos mit konkretem inhaltlichen Fokus

Im klassischen Desktopdesign lassen sich die Fotos samt Umfeld prima einsetzen. Für kleinere Auflösungen, bei denen die Person stärker ins Zentrum gerückt werden soll, bietet es sich an, das Umfeld auszublenden, wie ich es in der folgenden Ansicht vorbereitet habe.

bigstock_responsiv_telefon_fokus
Fotos auf ihren Schwerpunkt reduziert

JavaScript-Frameworks wie Focal Point ermöglichen es, einen inhaltlichen Schwerpunkt zu definieren. Bei kleineren Darstellungen wird das Foto auf diesen Schwerpunkt beschnitten. Das verzichtbare Umfeld fällt dabei weg. Auch hier musst du natürlich darauf achten, dass durch das Weglassen von Bildinhalten die beabsichtigte Aussage des Bildes noch erhalten bleibt. Soll etwa explizit eine Situation in einem Büro dargestellt werden, spielt beim vierten Beispielfoto das Umfeld eine große Rolle.

Hoch- oder Querformat: Wichtig bei formatfüllenden Fotos

Auch diese Frage solltest du dir bei der Auswahl geeigneter Fotos stellen: Wähle ich lieber Hoch- oder Querformat?

Pauschal lässt sich diese Frage indes nicht beantworten. Während Desktopmonitore und Notebooks immer im Querformat und auch Tablets meist querformatig genutzt werden, ist beim Smartphone eher das Hochformat gängig. Aber da die Geräterorientierung durchaus individuell gewählt wird, können wir keine allgemein gültige Aussage treffen.

Gehen wir davon aus, dass sich beim responsiven Webdesign auf Smartphones die Breite der Bilder immer an der Displaybreite orientiert, erhalten wir bei hochformatigen Bildern immer größere Darstellungen. Das ist von Vorteil, wenn Fotos ins Zentrum der Gestaltung gesetzt werden. Während hochformatige Fotos im Portrait-Modus durchaus Großteile des Displays ausfüllen können, führen sie im Landscape-Modus dazu, dass sie größer als das Display und somit nicht komplett sichtbar sind.

Hier musst du abwägen, was dir wichtiger ist. Die Suche von Bigstock erlaubt es etwa, ausschließlich hoch- oder querformatige Fotos auszugeben. So kannst du bereits bei der Suche das Format vorgeben.

bigstock_responsiv_stadt_querformat
Nur querformatige Fotos: Suchergebnis (Screenshot: Bigstock)

Suchst du nach Fotos für einen formatfüllenden Hintergrund, solltest du grundsätzlich auf Querformate setzen. Denn, abgesehen vom Smartphone, ist das Querformat die gebräuchlichere Geräteorientierung beziehungsweise Browsergröße. Allerdings solltest du berücksichtigen, dass auf Smartphones ein Großteil des Bildhintergrundes abgeschnitten werden wird.

bigstock_responsiv_hintergrund
Gut geeignete Fotos für Hintergründe

Das obige Beispiel zeigt zwei geeignete Fotos für formatfüllende Hintergründe, die auch responsiv funktionieren. Sie verzichten auf Details und konkrete inhaltliche Schwerpunkte.

bigstock_responsiv_hintergrund_fokus
Im Portrait-Modus dargestellter Hintergrund

Auch auf Smartphones im Portrait-Format verlieren sie nicht an Wirkung, obwohl etwa die Hälfte des Bildes aufgrund der unterschiedlichen Seitenverhältnisse verloren gehen wird.

Hochauflösende Displays berücksichtigen

Als letzten wichtigen Punkt bei der Auswahl perfekter Fotos für responsive Websites solltest du die Auflösung der Fotos berücksichtigen. Stockanbieter, wie Bigstock, stellen Fotos stets in verschiedenen Auflösungen zur Verfügung. Dabei ist schon die kleinste Auflösung für viele Zwecke ausreichend – gerade wenn es um Webdesign geht. Berücksichtigen solltest du jedoch, dass es zunehmend Displays und auch Desktopmonitore mit hoher Pixeldichte gibt. Diese können Fotos doppelt so scharf darstellen wie gewöhnliche Displays.

bigstock_responsiv_aufloesungen
Fotos in unterschiedlichen Auflösungen erhältlich (Screenshot: Bigstock)

Gerade auf diesen Displays wirken Fotos, die nicht in hoher Pixeldichte vorhanden sind, äußerst unscharf. Daher solltest du Fotos immer in einer ausreichenden Auflösung parat haben. Bereits auf Smartphones sollte die Breite eines Bildes nicht kleiner als 640 Pixel sein, um es in voller Breite im Portrait-Modus darstellen zu können. Dank HTML5 und den Möglichkeiten des „<picture>“-Elementes und des „srcset“-Attributes lassen sich alle möglichen Auflösungen und Pixeldichten berücksichtigen.

Kleiner Hinweis: Unsere Beispiele funktionieren natürlich auch mit anderen Fotoprovidern, etwa aus unserer Top 50 der kostenlosen Fotodienste. Wenn du nun aber Lust bekommen hast, Bigstock einmal selber auszuprobieren, so könntest du hier eine kostenlose Probewoche buchen.

Ein unverbindlicher Besuch bei Bigstock hilft, einen qualifizierten Eindruck zu gewinnen.

Klarstellung: Dieser Beitrag wurde von Bigstock gesponsort, was aber nur insoweit Einfluss hatte, als wir ausschließlich Bildbeispiele von dieser Plattform verwendet haben. Eine Einflussnahme in sonstiger, vor allem inhaltlicher Weise ist nicht erfolgt.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Super Artikel! Leider ist es manchen Kunden aber schwer zu vermitteln, dass man Bilder für die mobilen Homepage-Varianten dementsprechend optimieren sollte. Natürlich sollte man auf ein einheitliches Erscheinungsbild / Webdesign bei Desktop und Mobil achten, allerdings wirken manche Bildausschnitte auf einem kleinen Smartphone einfach nicht mehr so wie in der „großen“ Variante.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück