Worauf Sie bei den Bildern Ihrer Website achten sollten

Füße eines Mannes, der auf einen Felsen steht, und Kamera


Ein Gastbeitrag von Kerstin Paar

 

Jede Website lebt von ansprechenden Bildern. Sie sorgen nämlich dafür, dass die Besucherinnen und Besucher in den ersten Sekunden emotional gepackt werden und auf der Website bleiben. Daneben spielen die ersten Sätze und die Ladezeit der Website eine wichtige Rolle für die Verweildauer.

Ein modernes Webdesign transportiert die Informationen klar und übersichtlich nach außen, ohne laut zu werden. Wer auf einer Website landet und dort sofort mit aufblinkenden Effekten oder selbststartenden Videos attackiert wird, ist schnell wieder weg.

Emotional ansprechende und aussagekräftige Bilder ziehen hingegen die Besucherinnen und Besucher magisch in Ihre Website hinein. Sie beginnen zu lesen und scrollen langsam weiter – egal ob am PC, Tablet, Smartphone oder iPhone.

Tipps für die Bilder auf Ihrer Website

1. Bildqualität

Verwenden Sie richtig gute Bilder – entweder Sie fotografieren selbst oder schauen sich in Bilddatenbanken um. Bei Shutterstock oder Pixelio können Sie Aufnahmen kaufen. Die Bilder auf Pixabay, Pexels oder Unsplash sind kostenfrei, allerdings sollten Sie auch hier Nutzungsbedingungen der jeweiligen Datenbank beachten. Haben Sie vor allem im Auge, dass Sie nicht immer wissen, ob derjenige, der die Bilder hochgeladen hat, auch die Rechte an den Bildern hat.

 

Achten Sie bei Ihrer Auswahl auch darauf, dass keine Marke, keine markante Person und kein bekanntes Gebäude wie der Eifelturm bei Nacht, ein Kernkraftwerk, ein Flughafengelände oder Ähnliches abgebildet sind. Denn dabei könnten Urheber- oder Persönlichkeitsrechte oder Rechte am Bild berührt werden. Wählen Sie im Zweifelsfall lieber ein anderes Bild, zum Beispiel eine Landschaftsaufnahme.

 

Ich verwende vor allem für meine Blogbeiträge gern selbst gemachte Fotos. Falls das einmal nicht klappt, nehme ich ein Bild aus Pixabay und erwähne dies am Ende des Beitrags.

2. Dateigröße

Integrieren Sie auf Ihrer Website Bilder in möglichst niedriger Dateigröße. Sonst verzögert sich die Ladegeschwindigkeit der Seite unnötig, was wiederum für die Suchmaschinenoptimierung (SEO) schlecht ist.

 

Die Dateigröße zeigt an, wie „schwer“ ein Bild ist. Das „Gewicht“ wird in Megabyte (MB) oder leichter in Kilobyte (KB) angegeben. Die Bildgröße dagegen beschreibt Breite und Höhe des Bildes. Ein Bild, das den gesamten Bildschirm ausfüllt, benötigt je nach Design eine Breite von etwa 1900 Pixel und eine Höhe von etwa 700 Pixel, also 1900 × 700 px.

 

Direkt aus der Kamera kann die Bilddatei mehrere MB groß sein. Sinnvoll ist es daher, die Bilder auf den PC zu übertragen und dort zu bearbeiten, zum Beispiel mit dem kostenpflichtigen Programm Photoshop oder mit einer kostenfreien Software, etwa Gimp oder Pixlr.

 

Ein Bild mit den Maßen 1900 × 700 px hat eine optimale Dateigröße von etwa 200 bis 400 KB als PNG-Datei. Die Bildqualität sollte immer Priorität haben. Bei einer zu starken Komprimierung kann sie leiden, das Bild wird leicht pixelig.

 

Ich selbst nutze die genannten kostenfreien Möglichkeiten der Bildbearbeitung, bevorzuge für eine optimale Dateikomprimierung jedoch Photoshop.

3. Dateiformat

Für Blogbeitragsbilder, Vorschaubilder oder Titelbilder reicht das komprimierte JPG-Format meist aus. Die Bildgrößen orientieren sich am jeweiligen Design Ihrer Website.

 

Hintergrundbilder benötigen hingegen eine hohe Auflösung. Darum verwendet man das höherwertige Format PNG, mit dem sich zum Beispiel auch transparente Bilder gestalten lassen.

4. Dateiname

Versehen Sie jedes Bild mit einem aussagekräftigen Dateinamen. Das ist wichtig für SEO. Verwenden Sie anstelle von bild1.jpg ein Schlagwort aus der Bezeichnung des Navigationspunktes oder des Blogartikels. Bezeichnen Sie also beispielsweise das Bild auf der Seite mit Ihrem Webdesignangebot also passend mit „Webdesign“ (webdesign.jpg).

5. Alternativtext und Bildunterschrift

Vergessen Sie nicht, Alternativtexte einzufügen. Damit können auch Menschen mit einer Sehbehinderung die Bilder deuten und einordnen.

 

Einen Alternativtext fügt man in WordPress direkt zum Bild in die Mediathek ein. Er beschreibt den Bildkontext, sagt also aus, was man auf dem Bild sieht: zum Beispiel „farbige Luftballons auf blauem Hintergrund“ oder „bunte Luftballons steigen in den Himmel“. Google erkennt diese Texte, für die Website-Besucherinnen und -Besucher sind sie hingegen nicht sichtbar. Auch Baukastensysteme wie Jimdo bieten übrigens die Möglichkeit, Alternativtexte einzugeben.

 

Eine Unterschrift befindet sich direkt unter dem Bild, ist also im Unterschied zum Alternativtext sichtbar.

6. Bildanzeige

Die Bildanzeige kann interessant und abwechslungsreich gestaltet werden. Nutzen Sie für Ihre Website punktuell verschiedene Möglichkeiten, zum Beispiel auf WordPress die Bilderschau. Auch der Einsatz eines Sliders kann eine sinnvolle Sache sein. Ein Slider ist eine Bildabfolge von etwa drei oder mehreren Bildern, die horizontal auf dem Bildschirm vorbeiziehen. Auf der Startseite angebracht, vermittelt er einen interessanten ersten Eindruck vom Inhalt der Website.

 

Referenzbilder von Kundinnen bzw. Kunden können im Online-Shop als Galerie integriert werden. Sie laufen entweder von oben nach unten oder von rechts nach links über die Bildschirmseite.

Fazit

Es lohnt sich, wenn Sie sich bei der Bebilderung Ihrer Website bzw. Ihres Blogs Mühe geben. Qualitätvolle Bilder, die Emotionen ansprechen, erhöhen die Wahrscheinlichkeit, dass Menschen, die auf Ihrer Website gelandet sind, dort auch bleiben und sich weiter informieren. Und damit sind Sie auf dem Weg der Kundengewinnung einen wichtigen Schritt weiter!

Über die Autorin

Porträt von Kerstin Paar
© Evelyn van Kempen

Seit 2011 arbeitet Kerstin Paar im Social-Media-Marketing und erstellt WordPress-Websites. Sie unterstützt Selbstständige und Unternehmen dabei, online sichtbar zu werden, um mit ihren Herzensprojekten Kundinnen und Kunden zu gewinnen.

Kontaktmöglichkeit: info@kerstin-paar.de

Website: www.kerstin-paar.de

 

Abbildungsnachweis

Foto oben: Shutterstock.com: 181387787, Urheberrecht: e

verst.