Bilder im Web: Die gröbsten Fehler und passende Lösungen

Bilder gehören auf jede gute Website. Sie vermitteln Stimmung, Emotionen und lockern lange Texte auf. Sorgfältig ausgewählte Bilder stärken deine Marke und heben dich von der Masse ab.

Leider kann man gerade bei der Verwendung von Bildern einiges falsch machen.

Wie du die größten Stolperfallen souverän meisterst und wo du hochwertige Bilder im Web findest habe ich für dich recherchiert.

Urheberrecht – ein heikles Thema

Bilder, Grafiken und Fotos sind auf vielen Websites frei abrufbar. Allein die Google Bildersuche liefert unfassbar viele Bilder zu jedem beliebigen Thema. Frei zugänglich heißt aber nicht, dass du diese Bilder auch einfach so nutzen darfst.

Verwende für deine Website oder deinen Blog nur Bilder, die du selbst erstellt hast oder die vom Rechteinhaber freigegeben sind. Das sind Bilder, die entweder unter einer freien Lizenz stehen oder an denen du die entsprechenden Rechte gekauft hast.

Die Creative Commons Lizenzmodelle

Standard-Lizenzen, für den Umgang mit Urheberrechten, gibt es von der Organisation „Creative Commons“. Daran solltest du dich bei der Verwendung von fremden Bildern auf deiner Website orientieren.
Die Lizenzmodelle im Detail kannst du direkt auf creativecommons.org nachlesen. Für einen ersten Überblick reicht aber diese Zusammenfassung:

CC-0
Der Urheber verzichtet auf sämtlich Rechte. Diese Bilder dürfen vollkommen frei verwendet werden. (Public Domain)

CC-BY
Erlaubt die private und kommerzielle Nutzung. Der Urheber muss namentlich genannt werden.

CC-BY-SA „share alike“
Verlangt die Freigabe des eigenen Werks unter denselben Lizenzbedingungen, wie das Ursprungsbild.

CC-BY-ND „no derivatives“
Bilder unter dieser Lizenz sind frei verwendbar, dürfen aber nicht verändert werden.

CC-BY-NC „non commercial“
Untersagt die Nutzung für kommerzielle Zwecke.

Riesige Bilder bedeuten lange Ladezeiten

Bilder von professionellen Agenturen, Stockphoto-Anbietern oder kostenfreien Websites bekommst du meist in sehr hoher Auflösung und riesigen Dimensionen.

Eigentlich perfekt, aber eine hohe Auflösung benötigt auch viel Speicherkapazität und macht deine Website langsam. Das verärgert deine Besucher und wirkt sich negativ auf dein Suchmaschinen Ranking aus.

Die richtige Breite

Im ersten Schritt bringst du deine Bilder auf die richtige Breite. Dabei orientierst du dich an der Breite des Inhaltsbereichs deiner Website. Ist dein Inhaltsbereich 760px (Pixel) breit, schneidest du deine Bilder auf diese Breite zu.

Möchtest du die Bilder auch größer zur Verfügung stellen, empfehle ich eine Breite zwischen 800px bis 1400px.

Die optimale Dateigröße

Danach speicherst du dein Bild „für das Web“ ab. Als Richtwert solltest du auf eine Dateigröße < 200kb kommen. Ich verwende dafür Adobe Photoshop, aber auch gratis Tools zB. Gimp bieten dir diese Option.

Das korrekte Dateiformat

Für Bilder und Fotografien eignet sich das Dateiformat .jpg am besten. Damit erreichst du sehr kleine Dateigrößen bei guter Qualität.

Logos oder Grafiken speichere ich bevorzugt im .png-Format, womit auch transparente Bereiche möglich sind.

Gib deinen Bildern Namen (und Alternativtext)

Bei der Wahl eines Dateinamens hast du auf einem Windows Rechner sehr viele Freiheiten. Bis auf ein paar wenige Sonderzeichen, ist alles erlaubt. Leider führt das im Internet immer wieder zu Problemen und kryptischen Bezeichnungen.

Als Grundlage solltest du dich generell an folgende Regeln halten:

• Keine Umlaute (ä, ö, ü)
• Keine Sonderzeichen („“, &, !, ?, …)
• Keine Leerzeichen

Und auf Google darfst du auch nicht vergessen. Suchmaschinen haben nämlich ein großes Problem, sie können nicht erkennen, was auf Bildern gezeigt wird.

Zum Glück ist es aber ganz einfach, Google hier ein bisschen unter die Arme zu greifen.

Dateinamen für Suchmaschinen optimieren

Fotos von deiner Kamera oder Onlineportalen sind oft unter einer laufenden Nummer gespeichert. Das hat keinerlei Aussagekraft.

Optimal ist ein sprechender Dateiname, in dem am besten auch das Keyword deiner Webseite vorkommt.

ALT-tag angeben

Ursprünglich wurde der ALT-tag, die alternative Bildbeschreibung, entwickelt um die Barrierefreiheit zu erhöhen und Menschen mit Behinderung zu unterstützen. Der Alternativtext, sollte genau beschreiben, was auf dem Bild zu sehen ist.

Diese Beschreibung kannst du für die Suchmaschinenoptimierung nutzen und dort nochmal dein Keywort platzieren.

Klischeebilder, die niemand mehr sehen möchte

Du kennst sie sicher: die glückliche „Bilderbuch Familie“, das politisch korrekte Gruppenfoto am Besprechungstisch, die hübsche Call-Center Mitarbeiterin oder den Business Mann.

Alles Motive, die in vielen Branchen und auf unzähligen Webseiten verwendet werden.  Und genau das ist der Nachteil dieser Klischeebilder, sie sind überstrapaziert.

Damit deine Website sich von der Masse abhebt, solltest du Zeit in die Suche nach passenden Bildern investieren und dir vorab folgende Fragen stellen:

• Welche Bilder passen zu meiner Marke?
• Kann ich den Bildern eine persönliche Note geben?
• Möchte ich mit Fotos oder Grafiken arbeiten?
• Welche Motive verwenden alle anderen?

Meine liebsten Webseiten mit hochwertigen Bildern

Das war genug Theorie. Beschäftigen wir uns lieber mit der Frage, wo du hochwertige Bilder für deine Website findest.

Ich habe hier eine bunte Mischung an Websites mit wirklich tollen Bildern für dich. Dort schau ich selbst gern vorbei: Inspirierende Plattformen für lizenzfreie Bilder

---

Achtest du darauf die Bilder für deine Website zu optimieren? Fotografierst du selbst oder „kaufst“ du auch online und verrätst mir deine Lieblinsseite in den Kommentaren?

---

Lies weiter: