Bilder sind ein wichtiger Bestandteil jeder Website. Grafiken dienen der Auflockerung und Veranschaulichung. In diesem Beitrag lernst du, welche Fehler du im Umgang mit Bilder keinesfalls machen solltest und wie du deine Grafiken perfekt für das Web optimieren kannst.

Eine Website ist kein Buch. Aus diesem Grund solltest du auf langweiligen und langen Fließtext verzichten und vielmehr deine Inhalte optisch hervorheben und entsprechend Bilder und Fotos für deine Internetseite einbinden.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Heute beschäftigen wir uns also damit, wie du Bilder, Grafiken und Fotos zu deinem Vorteil nutzen kannst. Ein ansprechendes und gleichzeitig schnell ladendes Bild erzeugt ein positives User-Erlebnis bei deinem Besucher.

Das perfekte Bild für deine Website

Das perfekte Bild gibt es natürlich nicht. Aber es gibt einige wichtige Aspekte, die schlechte Bilder von guten und ansprechenden Bildern unterscheiden. Je hochwertiger deine Grafiken sind, umso wohler fühlen sich deine Besucher auf deiner Website. Hochwertige Grafiken erzeugen Vertrauen und das ist ein ganz wichtiger Faktor.

Ein wichtiger Aspekt ist auch die Ladezeit. Mit diesem Punkt werden wir uns etwas später noch genauer beschäftigen. Grundsätzlich dient ein Bild dazu, die Website aufzulockern. Dadurch kannst du bestimmte Sachverhalte besser erklären und die Grafiken entsprechend als Visualisierung nutzen. Daher empfiehlt es sich, eine schöne Kombination aus Text, Textelementen, Formatierungen und Bildern zu wählen.

Oft werde ich gefragt, wie breit oder wie hoch denn ein Bild für die Webseite sein soll. Diese Frage kann ich leider nicht beantworten, da dies doch sehr individuell ist. Es kommt ganz darauf an, wie breit deine Webseite ist, ob es ein Hochformat-Bild oder ein Querformat-Bild ist und wie es eingebunden werden soll.

Daher ist mein Rat an dich: Verkleinere das Bild vor dem Upload auf die Größe, in dir du es einbinden möchtest. Das spart Ladezeit und ist im Endeffekt der wichtigste Punkt, den es zu beachten gilt.

Warum du keine Stockfotos verwenden solltest

Viele Website-Betreiber verwenden sogenannte Stockfotos. Das sind Fotos, die du bei Anbietern wie Pixabay, Adobe Stock (früher Fotolia) oder auch weiteren Diensten kostenlos herunterladen oder auch kaufen kannst.

Bei diesen Portalen gibt es sehr ansprechende und meist hochprofessionelle Bilder, die natürlich sehr verlockend sind. Diese kannst du grundsätzlich natürlich auf deiner Website einsetzen. Der große Nachteil dabei ist allerdings folgender:

Diese Bilder sind unpersönlich und haben meist nichts mit dir, deiner Marke, deiner Firma und deinem Thema zu tun. Da diese Bilder jeder herunterladen, kaufen und verwenden kann, findest du diese auf vielen anderen Websites zu ganz unterschiedlichen Themen.

Und das ist ein großes Problem bezüglich Google. Da ein und dasselbe Bild auf einer Website zu Fahrradzubehör, Breitensport und Marathon zu finden ist, hat es keinerlei spezifische Bedeutung.

Richtiges Dateiformat für Bilder (WebP – JPG – PNG – GIF)

Vielleicht hast du dich schon gefragt, welches Dateiformat denn das Richtige für meine Website-Bilder ist. Grundsätzlich einmal gibt es 4 Dateiformate, die wir uns an dieser Stelle etwas genauer ansehen sollten:

• JPG: Grundsätzlich das beste Format.
• PNG: Für Grafiken mit transparentem Hintergrund.
• GIF: Für animierte Grafiken.
• WebP: Neues Format, das sehr kleine Dateigrößen hat.

Das quasi Standardformat ist JPG und wird entsprechend auch am meisten genutzt. Falls deine Grafik oder dein Bild einen transparenten Hintergrund hat, dann kannst du alternativ PNG verwenden. Du solltest dabei allerdings beachten, dass PNG eine deutlich größere Dateigröße und entsprechend längere Ladezeiten hat.

WebP ist ein sehr junges und neues Format, das eine sehr kleine Dateigröße hat. Für WordPress beispielsweise gibt es extra Plugins, die JPG Grafiken in das Format WebP umwandeln. Dadurch wird wertvolle Ladezeit eingespart. Du lädst die Grafik also wie bisher im JPG-Format hoch und WordPress übernimmt die Konvertierung zu WebP im Hintergrund automatisch für dich.

Dieses Plugin erkennt auch, ob der Browser deines Besuchers WebP-fähig ist und das Bild geladen werden kann. Wenn ja, wird das Bild in WebP ausgeliefert. Falls der Browser das neue Dateiformat nicht unterstützt, wird das Bild als JPG ausgeliefert. Einmal eingerichtet, funktioniert das automatisch.

Bilder für deine Website optimieren

Der wohl wichtigste Aspekt beim Optimieren von Bildern für deine Webseite besteht darin, eine möglichst kleine Dateigröße zu haben. Je kleiner die Datei, umso schneller wird das Bild und die Website geladen. Seit mehreren Jahren ist die Ladezeit deiner Webseite ein Rankingfaktor bei Google. Ein Bild nimmt verhältnismäßig viel Ladezeit in Anspruch, daher ist das besonders wichtig.

Wie etwas weiter oben schon erwähnt, solltest du ein Bild vor dem Upload auf die Größe verkleinern, in der du es auf deiner Website einbinden möchtest. Das ist der erste Schritt und damit verkleinerst du die Datei in der Regel schon sehr deutlich. Alleine dieser Schritt wird dir einiges an Ladezeit einsparen.

Der zweite Schritt besteht darin, dass du ein Bilder-Plugin verwendest. Dieses verkleinert jedes von dir hochgeladene Bild nochmals durch einen eigenen Algorithmus. Für WordPress gibt es dafür das geniale Plugin Imagify. Dieses Plugin verkleinert dein Bild nach dem Upload noch einmal um 30 bis zu 70%. Das ist natürlich eine absolut grandiose Zahl.

Das Plugin Imagify kümmert sich übrigens auch darum, dass deine Bilder im WebP Format ausgeliefert werden.

Link: WordPress Plugin Imagify

Bilder-SEO

SEO bedeutet umgangssprachlich übersetzt Suchmaschinenoptimierung. Bei Suchmaschinenoptimierung geht es darum, dass du mit deinen Keywords (Suchbegriffen) möglichst weit oben in der Google Suche gelistet wirst.

Bilder-SEO bedeutet entsprechend, dass du deine Bilder, Grafiken und Fotos für Google (also für Suchmaschinen) optimierst.

Neben der Ladezeitoptimierung gibt es drei Dinge, die du hier beachten solltest:

• Dateibezeichnung: Die Dateibezeichnung sollte die wichtigsten Keywords enthalten. Verwende hier bitte nur Kleinbuchstaben, keine Sonderzeichen und trenne einzelne Wörter mit dem Bindestrich.
• Title TAG: Beschreibe hier das Bild mit ein paar Wörtern. Auch hier sollten die wichtigsten Keywords verwendet werden.
• Alt-TAG: Der Alt-TAG kann gerne 1-2 Sätze lang sein, in dem du den Inhalt des Bildes beschreibst.

FAQ – Fragen und Antworten

Wie groß soll ein Bild für meine Website sein?

Es gibt nicht die perfekte Auflösung oder Größe für deine Bilder. Dazu ist jede Website und jede Darstellung zu individuell. Entscheidend ist, dass du das Bild vor dem Upload auf die Größe verkleinerst, in der du es einbinden möchtest. Das spart wertvolle Ladezeit.

Welches Bilderformat ist für das Web das richtige?

Die besten Dateiformate für deine Website sind JPG und WebP. JPG ist ein bekanntes Dateiformat, das die meisten verwenden. WebP ist ein noch sehr junges Dateiformat, das seinen Vorteil in kleinen Dateigrößen hat. Kürzere Ladezeiten sind die positive Folge. Für animierte Grafiken eignet sich das GIF-Format und für Grafiken mit transparentem Hintergrund solltest du PNG verwenden.

Was sind WebP-optimierte Grafiken?

WebP ist ein sehr neues Grafikformat, das sehr geringe Dateigröße hat. Je kleiner eine Grafikdatei ist, umso schneller wird die entsprechende Webseite geladen. Da die Ladezeit ein wichtiger SEO Rankingfaktor ist, ist das ein wichtiger Faktor. Für WordPress beispielsweise gibt es verschiedene Plugins, die aus deinen JPG Grafiken automatisch ein WebP optimiertes Bild erstellen. Ein sehr beliebtes Plugin dafür ist Imagify.

Wie kann man ein Bild für das Internet komprimieren?

Als Erstes solltest du dein Bild mit deinem Grafikprogramm verkleinern. Je kleiner die Dateigröße ist, umso besser ist das für die Ladezeit. Letztlich ist das immer ein Kompromiss zwischen Qualität und Ladezeit. Zusätzlich gibt es Online-Tools wie beispielsweise Imagify, die dein Bild durch einen klugen Algorithmus nochmals verkleinern.

Wo bekomme ich Fotos für meine Website?

Eine Möglichkeit besteht darin, sogenannte Stockfotos aus dem Internet zu beziehen. Der große Nachteil dabei ist allerdings, dass viele andere genau die gleichen Grafiken verwenden und diese natürlich nicht für den Vertrauensaufbau geeignet sind. Viel besser ist es, wenn du eigene Grafiken erstellst oder erstellen lässt. Je professioneller deine Grafiken, umso mehr Vertrauen und Aufmerksamkeit wirst du mit deiner Website generieren.

Wie kann ich meine Bilder für die Google-Bilder-Suche optimieren?

Bilder-SEO sollte immer Teil deiner Suchmaschinenoptimierung sein. Bei der Optimierung deiner Bilder kommt es hier nicht auf die grafische Optimierung, sondern auf folgende technische Aspekte an:

• Ladezeit: Die Dateigröße deiner Bilder sollte möglichst gering sein. Verkleinere das Bild vor dem Upload auf die gewünschte Größe.
• Dateibezeichnung: Die Dateibezeichnung deiner Bilder sollte die wichtigsten Keywords enthalten. Einzelne Wörter kannst du mit Bindestrich trennen. Verzichte auf Sonderzeichen und Umlaute.
• Title-TAG: Der Title-TAG ist, wie der Name schon sagt, der Titel des Bildes. Beschreibe hier in ein paar Worten das Bild. Auch hier sollten deine wichtigsten Keywords enthalten sein.
• ALT-TAG: Der ALT-TAG ist der alternative Text. Du kannst hier entweder dasselbe wie beim Title-TAG verwenden oder eine etwas längere Beschreibung. Empfehlenswert ist in kompletter Satz über das jeweilige Bild.