Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Webdesign » So wählst du die richtigen Fotos für Responsives Webdesign

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

Artikel weiterempfehlen

  • Aktualisiert am 6. Februar 2023
  • Ein Kommentar
  • Denis Potschien von Denis Potschien
Lesedauer: 5 Minuten

Inhaltsverzeichnis

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

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.

Lust auf mehr?

  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Oktober 2022

Was kostet eine Website?

Eine gut gestaltete und übersichtliche Internetpräsenz ist das digitale Aushängeschild deines Unternehmens. Ob Freelancer, Start-Up oder mittelständisches Unternehmen – an einer professionellen Onlinepräsenz führt heute kein Weg vorbei. Dabei steigt auch der Anspruch an rein privat genutzte Websites. Wir stellen in diesem Artikel die Kosten vor, die beim Erstellen einer Website zu beachten sind.
  • Webdesign

Eine Antwort

  1. Daniel (HAIDAon) sagt:
    14. August 2018 um 17:04 Uhr

    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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑