Bilder im Onlineshop sind heutzutage nicht mehr wegzudenken und weit mehr als Platzhalter oder bloße „Aufhübschung“ Deines Shops. Ganz im Gegenteil. Es heißt ja bekanntlich „Das Auge isst mit“. Doch nicht nur das trifft zu: das Auge kauft nämlich auch mit. Anders gesagt sind Fotos und Bilder ausschlaggebend für den Erfolg Deines Online-Geschäfts. Aussagekräftige Bilder locken Kunden nicht nur in Deinen Shop, sie untermauern auch den Content und die Produkte, können die Stimmung des Betrachters in eine bestimmte Richtung lenken und für ein emotionales Einkaufserlebnis sorgen.
Potenzielle Kunden sollen sich in Deinem Shop also wohlfühlen und Spaß daran haben, Deine Seiten zu durchstöbern und Produkte in den Warenkorb zu legen. Deshalb haben wir in diesem Blogbeitrag für Dich wesentliche Aspekte zusammengetragen, die Du bei der Auswahl und Ausspielung der Bilder in Deinem Onlineshop beachten solltest. Das Ganze haben wir angereichert mit hilfreichen Online-Tools und einer Checkliste.
#1 Finde die passenden Fotos
Dir fehlen noch Fotos für Deinen Onlineshop? Und Du willst weder selbst fotografieren noch einen Fotografen engagieren oder für Bilder bezahlen? Dann sind Stockfotos ideal, die für die kostenlose, gewerbliche Nutzung ohne Namensnennung zulässig sind. Solche Bilder unterliegen meist der CC0-Lizenz. Es gibt eine Vielzahl an Websites, die solche Bilder zum Download anbieten. Wir stellen Dir unsere top 3 vor!
Kostenloses Bildmaterial für den kommerziellen Gebrauch
unsplash.com
Unsplash existiert seit 2013 und hat seitdem über eine Billion Downloads zu verzeichnen. Mit über eine Million Bildern ist die Auswahl entsprechend groß. Bilder findest Du am besten, indem Du englische Begriffe eingibst.
pixabay.com
Für die Bilder und Videos auf Pixabay gilt die Pixabay Lizenz. Die Verantwortlichen schreiben, dass eine sichere Verwendung auch für kommerzielle Zwecke gestattet ist. Die Quellenangabe ist dabei freiwillig. Praktisch: Die Seite und die Community sind deutsch, daher kannst Du Dich hier gut mit deutschen Begriffen auf die Suche begeben.
pexels.com
Auch hier gibt es viele Fotos und Videos für die kostenlose kommerzielle Nutzung zu entdecken. Praktisch: Du kannst Deine Suchergebnisse nach Farben oder Themen filtern und so noch einfacher finden, wonach Du suchst. Die Suche ist außerdem auf verschiedenen Sprachen verfügbar.
Achtung: Diese Aspekte solltest Du beachten
Trotz der oft großzügigen Lizenzen kannst Du Stockfotos nicht unbedacht einsetzen. Die meisten Stockfoto-Seiten erklären sehr übersichtlich und verständlich, was Du darfst und was nicht (vgl. Unsplash, Pexels und Pixabay). Es folgen einige Beispiele.
Abgebildete Personen: In vielen Fällen darf nicht suggeriert werden, dass die auf den Fotos abgebildeten Personen Dein Produkt empfehlen oder befürworten. Ein No-Go: Personen in einer beleidigenden Art oder in einem verwerflichen Kontext darstellen.
Verbreitung: Viele Stockfoto-Anbieter betonen, dass Du die Fotos nicht auf einer anderen Stockfoto-Seite teilen oder verkaufen darfst.
Markenrecht: Auf Fotos abgebildete Marken, Logos und Warenzeichen unterliegen womöglich dem Markenrecht. Je nach Kontext und Sichtbarkeit darfst Du sie ohne Freigabe des Rechteinhabers nicht einfach abbilden. Es könnte nämlich beispielsweise suggeriert werden, dass Du vom guten Ruf einer bekannten Marke profitieren willst oder mit der Marke in wirtschaftlicher Verbindung stehst. Du hast das perfekte Stockfoto gefunden, aber darauf ist ein Logo zu erkennen? In vielen Fällen reicht es bereits aus, wenn Du das Bild so bearbeitest, dass kein Logo mehr sichtbar ist.
Beispielbild vor und nach der Retusche. Das Markenlogo ist rechts nicht mehr zu sehen.
⚠️ Beachte: Da sich die Richtlinien der Lizenzierung ändern können, solltest Du die angegebenen Quellen vor der Benutzung noch einmal auf ihre Aktualität überprüfen.
#2 Vermeide lange Ladezeiten
Große, auffällige Bilder in hoher Auflösung sehen nicht nur schick aus, sondern fallen auch direkt ins Auge und fesseln Deine Kunden – oder verscheuchen sie, da sie die Ladezeiten mit ihrem hohen Bedarf an Speicherplatz verlangsamen. Das passende Stichwort dazu lautet: Performance. Im Durchschnitt sollte das Laden einer Website nicht länger als drei Sekunden dauern. Denn mit jeder Sekunde, die weiter verstreicht, steigt die Absprungrate. Schließlich kaufen User lieber Produkte in einem Onlineshop, der schneller lädt. Du wartest ja auch nicht gerne, oder?
Um die Ladezeiten zu reduzieren, solltest Du also Deine Bilder optimieren, indem Du die Dateigröße reduzierst. Dafür gibt es verschiedene kostenlose Online Tools, mit denen Du die Bild-Dateigröße um bis zu 70-80 % komprimieren kannst, ohne die Bildqualität sichtbar zu verschlechtern. Merke: Um eine gute Performance Deines Shops zu gewährleisten, sollten Deine Bilder in der Regel nicht größer als 200-300 KB sein.
Kostenlose Online Tools:
- compressor.io
- compressjpeg.com
- iloveimg.com
- sqoosh.app
- und viele mehr
#3 SEO: Erhöhe die Sichtbarkeit Deiner Shop-Bilder in Suchmaschinen
Auch im Rahmen der Search Engine Optimisation (SEO) sind optimierte Bilder wesentlich, um bei der Eingabe eines Schlagworts in die Suchleiste bei den Suchergebnissen angezeigt zu werden. Werden Deine Bilder in der Suchleiste angezeigt, so führen sie potenzielle Kunden in Deinen Shop.
Die Texte und Bilder in Deinem Shop pflegst Du vermutlich in der Administration über HTML-Codes ein. Dabei werden häufig folgende Attribute verwendet:
- „src“ (engl. Source, Quelle)
- „alt“ (engl. Alternative Text, Alternativ)
- „title“ (engl. Titel, Titel)
Optimiere Deine Bilder und die Sichtbarkeit dieser in den Suchmaschinen, indem Du sehr detaillierte und genaue Beschreibungen des Bildes im Alt-Text-Format formulierst, da es den Suchmaschinen den Bildinhalt vermittelt.
Beispiel zur Veranschaulichung
Deutlicher wird dies anhand eines Beispiels. Wir haben dazu ein Bild mit einer Eiswaffel herausgesucht und zeigen Dir positive sowie negative Beispiele in Bezug auf das Alt-Text-Format.
Unsere Beispiele beziehen sich auf dieses Foto. (Quelle: unsplash.com)
So besser nicht:
<img id="tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30" class="tinymce-editor-image tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30"src="https://www.shopware.com/media/image/71/fe/73/Eiskugeln.jpg"alt="Eiskugel"data-src="media/image/Eiskugeln.jpg" />
Die Beschreibung dieses Bildes mit „Eiskugeln“ ist zwar passend, aber nicht sehr beschreibend und liefert den Suchmaschinen zu wenig Content.
So ist es ideal:
<img id="tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30" class="tinymce-editor-image tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30"src="https://www.shopware.com/media/image/71/fe/73/Eiskugeln.jpg"alt="tropfende Eiskugeln im Waffelhoernchen in der Hand vor gelber Wand"data-src="media/image/Eiskugeln.jpg" />
Diese Beschreibung ist besser geeignet, da sie viel detaillierter und beschreibender ist. Bereits beim Lesen dieses Attributes kann sich der Leser das Bild im Kopf vorstellen.
Das solltest Du vermeiden:
<img id="tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30" class="tinymce-editor-image tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30"src="https://www.shopware.com/media/image/71/fe/73/Eiskugeln.jpg"alt="Eiskugel lecker Sommer gelbe Wand Eis"data-src="media/image/Eiskugeln.jpg" />
An der Stelle der Alt-Text-Beschreibung solltest Du es vermeiden, lediglich mit Schlagwörtern zu arbeiten.
<img id="tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30" class="tinymce-editor-image tinymce-editor-image-736ff3f9-91ae-4295-988e-6e8042352b30"src="https://www.shopware.com/media/image/71/fe/73/Eiskugeln.jpg"alt=""data-src="media/image/Eiskugeln.jpg" />
Und auch die Alt-Text-Beschreibung wegzulassen, ist für die Sichtbarkeit Deiner Bilder im Shop nicht empfehlenswert.
Neben der Alt-Text-Beschreibung ist außerdem der Dateiname bzw. Bild-Pfad von Bedeutung. Wähle dazu generische Begriffe, die das Produkt beschreiben, beispielsweise „heckenschere-akku-mx13.png“ anstelle von „DSCN1818.jpg“. Mehr zum Thema erfährst Du hier.
#4 Die passende Bildsprache ist der Schlüssel zum Erfolg
Die passende Bildsprache zu finden ist nicht leicht, für einen überzeugenden Online-Auftritt aber extrem wichtig. Die Bilder in Deinem Shop sollten zu Deiner Marke, Deinen Produkten und Deinen Werten passen, damit Du ein ganzheitliches und glaubwürdiges Image vermittelst. Hier lautet das passende Stichwort: Corporate Design beziehungsweise Corporate Identity.
Lege bei für die Bildrecherche einige Attribute fest, die zu Deiner Marke und Zielgruppe passen und sich in Deinen Bildern widerspiegeln sollen. Hier sind die unterschiedlichsten Vorschläge: urban, lässig, fröhlich, bunt, monochrom, edel, selbstbewusst, …
Du siehst also: die Bildsprache kann ganz unterschiedliche Richtungen bedienen. Wichtig ist hierbei, dass die Bildsprache, die Du wählst, einheitlich ist, damit es den Anschein erweckt, dass alles aus einem Guss kommt.
Tipp: Du benutzt Stockfotos und vermisst das gewisse Etwas? Mit ein wenig Bildbearbeitung kannst Du Deinen auserwählten Fotos einen individuellen Touch verleihen und für Wiedererkennbarkeit sorgen. Dazu kannst Du beispielsweise bestimmte Filter verwenden oder mit Kontrast, Sättigung und Helligkeit spielen.
#5 Platziere die Bilder mit Bedacht
Gestalte und platziere Bilder und Fotos anschaulich, auf Deine Zielgruppe zugeschnitten und inhaltlich passend an den richtigen Stellen in Deinem Shop. Bild-Aufmacher sollten Interesse wecken, ins Auge fallen und dazu anregen, sich genauer mit Deinen Produkten auseinanderzusetzen. Sorge dafür, dass die Text-/Bild-Kombination stimmt. Eine knackige Headline kann einem Bild einen ganz neuen Kontext oder witzigen Touch verleihen.
Hier ein Beispiel aus dem Onlineshop odernichtoderdoch für eine gelungene Text-/Bild-Kombination.
Fazit
Ein Bild ist nicht nur ein Bild. Es gibt bei der Auswahl der passenden Bilder einiges zu beachten. Und auch, wenn das perfekte Bild gefunden ist, hört die Arbeit nicht auf. Diese Checkliste hilft Dir dabei, an alles zu denken – und das jedes Mal, wenn Du ein neues Bild in Deinen Shop einbinden möchtest.
