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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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. 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.