Nichts mehr verpassen?
Nichts mehr verpassen?
Was sind die Webdesign Trends 2024
Webdesign Trends 2024
Endlich: Blogartikel schreiben, die verkaufen
Nachschlagewerk: Webseiten erstellen, die verkaufen
Ich habe Urlaub vom: 31.07. bis 25.08. in der Zeit biete ich keine Strategie Sessions an.
Suche
Close this search box.
Suche
Close this search box.

Bilder und Grafiken auf deiner Homepage

Inhaltsverzeichnis

Bilder wirken in Nanosekunden. Bilder bleiben im Gedächtnis. Bilder vermitteln Emotionen. Emotionen beeinflussen Kaufentscheidungen. Kaufentscheidungen zu deinen Gunsten beeinflussen deinen Kontostand.

Eine Webseite ohne Bilder wird es sehr schwer haben, zu verkaufen.

Stolpersteine umgehen

Mit der richtigen Bildauswahl kannst du deine Webseite noch emotionaler gestalten. Dabei gibt es allerdings einiges zu beachten. Ich zeige dir, wie du die Bilder auf deiner Webseite noch weiter verbessern kannst. Denn gerade bei begrenztem Budget muss ich als Webdesigner oft mit dem arbeiten, was vorhanden ist.

Not macht bekanntlich erfinderisch. Hier sind meine besten Tipps & Tricks:

Urheberrecht

Wenn du ganz sicher sein willst, dass deine Bilder niemand anderem gehören, dann mach sie selbst. Aber bitte nur, wenn du auch fotografieren kannst.

Alternative: Lass sie von einem guten Fotografen machen. Ich habe einen kompletten Blogartikel darüber geschrieben, wie du gute Fotos von dir für deine Homepage bekommst.

Das ist die teuerste, aber definitiv auch die beste Variante. So kannst du dich, deine Produkte, Räumlichkeiten und Mitarbeiter im besten Licht präsentieren.

Wenn du deine Fotos mit Stimmungsbildern ergänzen möchtest, dann kannst du auf Stockfotos zurück greifen. Bei Adobe Stock bekommst du für ein paar Euro die Lizenz für die Bilder und die Sicherheit, dass auch in Zukunft niemand mehr auf dich zukommt, weil du unwissentlich das Urheberrecht verletzt hast.

Bildauswahl – Mobile First

Achte darauf, dass deine Bilder in allen Formaten einsetzbar und anzeigbar sind.

Ich sehe immer wieder Webseite, die am großen Bildschirm erstellt sind und mobil niemals funktionieren können.

Damit du verstehst, was ich meine, zeige ich es dir am Beispiel.

Ich habe zwei Fotos aus einer Serie ausgesucht. Wir schauen uns mal eine Bäckerin an. Bildquelle ist Depositphotos.

Ein Motiv ist gut geeignet und das andere nicht.

Ich zeige zu jedem Motiv mal die Verwendungsmöglichkeiten, dann siehst du, was ich meine.

Die meisten meiner Kunden erstellen ihre Webseite am Laptop. Der hat meistens ein Format von 3:4. Da sehen alle Motive gut aus. Da findet man immer einen Ausschnitt, der irgendwie passt.

Schwierig wird es bei 16:9. Denn wenn der Monitor der Kunden Kinoformat hat, dann fällt auf einmal die Stirn weg oder eben der komplette Brotkorb. So kann man dann entweder sein Gesicht zeigen ODER die Ware. Beides geht nicht so gut.
Was immer unterschätzt wird ist der Abstand zum Kunden. Man springt nicht beim ersten Kennenlernen direkt bei den Kunden in den Tanzbereich. Man lässt Ihnen die Möglichkeit, erst mal mit etwas Abstand zu schauen, ob man Ihnen sympathisch ist. Das ist essenziell. Die Distanz schätzen wir im direkten Kontakt immer richtig ein. Digital unterschätzen wir aber schnell, dass es den Kunden unangenehm ist, wenn wir ihnen zu schnell sehr nah kommen.

Auf dem Handy wird es dann oft schon richtig schwer einen passenden Bildausschnitt zu finden.
Durch die Tiefenschärfe verschwimmen die Brote im Hintergrund und das Croissant im Brotkorb ist gar nicht als solches zu erkennen. Unsere Bäckerin ist außerdem so nah am Kunden, dass sie ihn umarmen könnte. Würde im echten Leben keiner am ersten Termin machen. Und das aus gutem Grund. Das ist viel zu nah.

Achte also schon beim Fotografienbriefing darauf, dass du Motive brauchst, die mit viel Abstand gemacht sind und die noch Platz nach oben, unten, links und rechts haben. Dann kannst du den Bildausschnitt so wählen, wie du ihn brauchst. Und lass die Motive im Zweifel mit und ohne Tiefenschärfe fotografieren.

Farbkonzept

Auch in der Bildauswahl hast du bei Adobe Stock im Vergleich zu kostenlosen Bilddatenbanken wie Unsplash viele Vorteile. Du kannst zum Beispiel nach deinen Hex-Farben suchen und so direkt Bilder in deiner Farbfamilie aussuchen. So findest du schnell sehr individuelle Bilder, mit denen du dich von deinen Wettbewerbern abheben kannst.

Das gilt für deine Webseite und auch für Social Media.

Im besten Fall erkennt dein Betrachter dein Unternehmen schon im Vorbeiscrollen nur anhand deiner Farben.

50 Shades of Blue: Markenbildung extremes Branding mit Stern und Berg
www.instagram.com/sternundberg.de

Deine Farben und Schriften sorgen für einen Wiedererkennungswert. Was wir nicht kennen, das beunruhigt uns. Bekanntes gibt uns Sicherheit, es entsteht Vertrautheit und Nähe. Du kannst sie ein mal fest legen un din deinem Style Sheet eintragen. Das kannst du dann immer wieder nutzen, um deine Bilder auszuwählen.

Bilder und Grafiken auf deiner Homepage 9

Bildausschnitt

Es gibt keine Regel, die besagt, dass man immer das komplette Bild einsetzen und zeigen muss. Du darfst dich bewusst für einen Bildausschnitt entscheiden, wenn du dadurch eine bestimmte Wirkung erzielen kannst. Mit ungewöhnlichen Ausschnitten und Anschnitten von Details kannst du Aufmerksamkeit und Interesse wecken.

Bilder und Grafiken auf deiner Homepage 10

Ich zeige bewusst nicht den kompletten Mac und den ganzen Ordner.

Bildmontage

Kreativ, individuell. Und eine Möglichkeit, wenn die Bilder allein nicht genug wirken (oder die Qualität von Handyfotos nicht reicht, um die Bilder vollflächig zu zeigen). So kann man einen feinen Gesamteindruck erzeugen.

Farbfilter

Manchmal muss man mit dem arbeiten, was da ist: Wenn die Bilder nicht durchgehend in der Farbfamilie sind, kann es passieren, dass die Homepage schnell unruhig wirkt. In so einem Fall kann man mit einem Farbfilter arbeiten, um einen einheitlichen Look auf der Webseite zu erzeugen. Und Ruhe.

Antje Langnickel

Schwarz-Weiß

Wenn du deine Markenfarben ultimativ unterstützen möchtest, kannst du in deinen Fotos auch gleich komplett die Farbe streichen. Fast alle Bilder gewinnen in schwarz-weiß an Aussagekraft und auch unaufgeräumte Hintergründe können so gerettet werden.

So habe ich diese Social Media Grafik erstellt.

Bilder und Grafiken auf deiner Homepage 11

Freistellen

Wenn der Hintergrund arg unruhig ist oder du dein Portrait auf deiner Markenfarbe präsentieren willst, kann sich hier der Aufwand lohnen.

Auch für Stockfotos lohnt sich manchmal das Freistellen. Denn nicht immer ist das komplette Bild für dich brauchbar. Auch wenn hier die Hintergründe meist passen. Vielleicht sind sie ja im falschen Kontext.

Weg vom Rechteck

Weiche doch mal bewusst von Standards ab. Mit einem Sechseck oder einem Kreis kannst du Akzente setzen.

Illustrationen

Mit Illustrationen kannst du einen ganz eigenen, individuellen Stil umsetzen. Allerdings auch eher eine kostenintensive Lösung. Denn ein guter Illustrator arbeitet nicht umsonst.

Bleib am besten auch hier in deiner Farbfamilie.

Elternblog, Papablog mit Pflegekind

  

Bildgröße

Damit du die Bilder im Zweifel auch drucken kannst (Flyer, Poster, Rollups, etc.) bekommst du sie fast immer in einer riesigen Auflösung. Das bedeutet allerdings auch, dass die Ladezeiten gigantisch lang werden. Für mobile Nutzer deiner Webseite ist das eine Zumutung. Mach dir also die Mühe, die Bilder auf die richtige Größe zu verkleinern, bevor du sie auf deine Webseite hoch lädst.

Deine Bilder für Blogartikel sollten zwischen 600 und 1400 px breit sein. Im Inhaltsbereich für eine Slider auch mal breiter, das muss aber immer eine individuelle und bewusste Entscheidung sein.

Dateigröße

Die Bildgröße ist eine Stellschraube, die andere ist die Dateigröße. Denn man kann Bilder speziell für das Web komprimieren. Keins deiner Bilder für deine Homepage sollte mehr als 500 kb haben.

Du kannst dafür das Plugin EWWW Image Optimizer verwenden.

Dateiformat

Wenn deine Bilder oder Grafiken transparente Bereiche haben: PNG.

Fotos können deutlich kleiner (und ohne Qualitätsverlust) im JPG Format abgespeichert werden.

Bilder benennen

Die Dateinamen sind eine Waffe. Nutze sie!

Gib deinen Bildern Namen, die sie gut beschrieben und auch etwas mit dir, deiner Firma oder dem Produkt zu tun haben. Sprechende Namen können von Google auch ausgelesen werden.

ALT-Tag

Für Blinde Homepage-Nutzer kannst du deine Fotos im ALT-Tag beschreiben. So kannst du deine Homepage barrierefrei gestalten.

Der ALT-Tag wird auch für Pinterest als Beschreibung genutzt.

Du solltest genau beschreiben, was auf dem Bild zu sehen ist. Hier kannst du außerdem bewusst Keywords platzieren.


Praxistipps: WordPress Mediathek aufräumen

Wenn ich auf den Webseiten meiner Kunden arbeite, dann merke ich, dass es gar nicht so einfach zu sein scheint, in der Mediathek Ordnung zu halten. 

Das hat teilweise wirklich nichts damit zu tun, dass meine Kunden grundsätzlich unordentliche Menschen sind. 

Das liegt eher daran, dass WordPress es uns nicht sooo einfach macht, da Ordnung zu halten 👩🏻‍💻 

Ich verrate in der Podcast-Episode meine besten Tipps und Tricks. 


Bilder auf deiner Homepage

Fazit: Viele Bilder sind für deine Homepage verwendbar, auch wenn sie nicht vom Profifotografen sind. Achte einfach immer auf gute Qualität und Wiedererkennbarkeit.

 

Ich bin Mareike Schamberger: Die Frau hinter #TeamStreber.
Ich bin Webdesignerin, Autorin und Expertin für das strategische Verkaufen im Internet mit über 15 Jahren Berufserfahrung.
Wenn es darum geht, die DSGVO auf deiner Webseite alltagstauglich umzusetzen, bist du hier richtig! Statt aufzuzählen, was alles nicht geht, teste ich Tools und suche Lösungen, die in der Praxis funktionieren.
Ich liebe es, Webseiten zu erstellen, die verkaufen. Deshalb habe ich dazu auch ein Buch geschrieben.

Werbehinweis (Links mit Sternchen*)

Achtung: Affiliate-Link. Wenn du das verlinkte Produkt kaufst, bekomme ich eine Provision.  Für dich ändert sich nichts am Preis. Nur für’s Protokoll: Ich stelle hier nur Produkte vor, die sich für mich in der Praxis bewährt haben. 

Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um „Webseiten, die verkaufen“, Kundengewinnung, Verkaufsprozesse und Online-Marketing.
Als Willkommens-Geschenk erhältst du mein E-Book „10 Gesetze für Webseiten die verkaufen“. 

*Du kannst dich jederzeit mit einem Klick wieder abmelden.
Ich versende etwa 2-4 Mails im Monat. Ich analysiere meine Newsletter Kampagnen, um dir nur relevante Informationen zu senden, detaillierte Information in der Datenschutzerklärung.

Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um „Webseiten, die verkaufen“.

Als Willkommens-Geschenk erhältst du mein E-Book „10 Regeln für Webseiten die verkaufen“. 

Cookie Consent mit Real Cookie Banner