Bilder auf der Website: Was muss man beachten?

Dieser Leitfaden dient dazu Sie umfangreich zu informieren. Zu jedem Unterpunkt gibt es eine kurze Zusammenfassung am Schluss.

Dieser Leitfaden wird auch immer aktualisiert, sobald sich relevante Änderungen ergeben.

Ich empfehle dennoch allen, die sich mit dem Thema Website-Erstellung beschäftigen, den ganzen Beitrag durchzulesen.

Los geht’s!

Als Betreiber einer Website muss man vieles Wissen und auf vieles achten. Ein großer Bestandteil davon ist das Wissen, wie man Bilder auf der Website richtig einsetzt.

Haben Sie qualitative hochwertige Bilder, die zu Ihrem Unternehmen oder Branche passen, dann sind diese perfekt geeignet, um auf einer Website präsentiert zu werden. Doch beim Upload (=Hochladen) von Bildern muss man einiges beachten:

Inhalte

Qualitative Bilder

Gleich zum Start: Wenn Sie kein gutes Bildmaterial haben, dann verwenden Sie auch keines. Es macht keinen Sinn schlecht aufgelöste Bilder online zu stellen, nur damit man Fotos auf der Website hat.

Schlechte Bilder werfen einfach ein schlechtes Licht auf die Online Präsenz und sollten vermieden werden. Ist Ihr Logo beispielsweise in geringer Auflösung / schlechter Qualität online, sollten Sie Ihren Grafiker nach einem .png-Format oder .svg-Format fragen (Mehr dazu: 3. Bildformate)

Wo bekomme Ich gute Bilder her, wenn ich jetzt gerade keine Kamera bei der Hand habe?

Ganz einfach: Es gibt mehrere Internetseiten, die Ihnen kostenlose und kommerziell-verwendbare Bilder zur Verfügung stellen.

Hier eine Liste solcher Webseiten:

Seiten wie Shutterstock oder Stockphoto sind nicht kostenfreie Alternativen, bieten aber dafür sehr sehr hochqualitative Bilder und Videos.

Wenn Sie jetzt qualitatives Bildmaterial haben, ist nun wichtig auf die Bildgröße zu achten, bevor man es online stellt.

Zusammenfassung: Qualitative Bilder

Wenn Sie kein gutes Bildmaterial haben, verwenden Sie auch keines!

Finden Sie qualitative Bilder auf Seiten wie unsplash oder pexels.

Bildgröße

Je größer eine Bilddatei, desto länger dauert es, bis sie fertig geladen ist. Jeder Besucher Ihrer Website lädt automatisch alle Inhalte, die auf Ihrer Seite abgebildet sind. Das heißt Text, Styling, Bilder etc.

Ist die Startseite mit 10 Megabyte Bildern beladen, dauert es dementsprechend (je nach Internetverbindung) bis Ihre Seite geladen ist. Das kann auch dazuführen, dass Leute abspringen, weil die Ladezeit zu hoch ist.

Was kann ich gegen große Bilddateien machen?

Seiten wie TinyJPG oder iloveimg lassen Sie Bilder in wenigen Schritten komprimieren (=verkleinern). Dazu laden Sie einfach Ihre gewünschten Bilder dort hoch und laden die komprimierte Version wieder herunter. Diese Version können Sie dann online verwenden.

Als Nutzer von WordPress gibt es verschiedene Plug-Ins, die Ihre Bilder auch nach dem Upload auf den Server komprimieren.

Wichtig ist, dass trotz der Komprimierung der Bilder kein großer Qualitätsverlust zu sehen ist.

Ein guter Richtwert für Bilder wäre:
Auflösung bis 1000 x 1000 Pixel sollte unter 150 Kilobyte sein
Auflösung bis 2500 x 2500 Pixel sollte unter 300 Kilobyte

Bilder die größer als 2500 x 2500 Pixel sind sollten Sie derzeit nicht verwenden, weil der Großteil der Nutzer am mobilen Handy unterwegs ist. Auch wenn gerade sehr hochauflösende Bildschirme (4K, 8K) im Vormarsch sind, sollten Sie sich trotzdem auf die Masse konzentrieren.

Notiz: Wenn es in Zukunft 5G Netz gibt, ändert sich diese Ansicht eventuell.

Wieso ist die Ladezeit meiner Seite so wichtig?

Eine langsame Website ist für Besucher störend, da diese gerade auf der Suche nach einer Information oder Lösung sind und nicht wirklich warten wollen.

Dazu kommt noch, dass Google Sie bei einer hohen Ladezeit schlechter einstuft. Das bedeutet, Ihre Seite wird in Google schlechter gefunden und wird unwahrscheinlicher auf der 1. Seite der Google-Ergebnisse aufgelistet.

Anmerkung: Diese Frage erläutern wir außerdem ausführlich in unserem Blog-Artikel „Suchmaschinenoptimierung.“

Zusammenfassung: Bildgröße

Verwenden Sie möglichst kleine Bilddateien.

Die Ladezeit kann sich aufgrund großer Bilddateien erheblich verlangsamen.

Eine lange Ladezeit ist ein negativer Einfluss auf Ihr Google-Ranking und sehr nervig für die Besucher Ihrer Seite.

Bildformate

Folgende Bildformate eignen sich besonders gut für den Einsatz im Web:

.jpg, .jpeg

Das JPG-Fomat ist quasi das Standardformat für alle Bilder. Es hat eine gute Qualität und recht geringe Speichergröße bzw. kleinen Qualitätsverlust, wenn man die Speichergröße komprimiert.

Es eignet sich perfekt für alle möglichen Fotos wie beispielsweise Produkt- oder Mitarbeiterfotos. Je nach Anwendung kann hier aber auch ein PNG-Format besser geeignet sein (Siehe Vergleich unten).

.png

Das PNG-Format weist ebenfalls eine gute Qualität auf, hat aber den Vorteil, dass es transparente Hintergründe darstellen kann (Siehe Vergleich unten).

Es eignet sich perfekt für Logos, Formen oder Hintergrundelemente. Einfach Bilder, die sich dem Hintergrund anpassen können und keinen eigenen Hintergrund mitbringen (zum Beispiel weißer Hintergrund).

.svg

Das SVG-Format (scalable vector graphic) ist mit Abstand die beste Lösung für eine Website. Es ist eine unglaublich kleine Datei und unendlich skalierbar. Das heißt, egal wie sehr man heranzoomt, es verliert nicht an Qualität.

Also wieso sollte ich nicht nur SVG-Bilder verwenden?

Das Problem ist, dass es nicht für Kamerafotos oder Ähnliches verwendbar ist. Es handelt sich um Vektorgrafiken, die man nur mit dem Computer erstellen kann.

Es eignet sich perfekt für Logos, Formen, Icons oder Hintergrundelemente, da dieses Format sich immer dem Hintergrund und der geforderten Auflösung und Größe anpassen kann und nie an Qualität verliert.

Formatvergleich

Logo im JPG-Format

Logo im PNG-Format

Logo im SVG-Format

In diesem Vergleich sieht man gut die Unterschiede:

Das 1. Logo ist im JPG-Format und deswegen sieht man den weißen Hintergrund, der mit abgespeichert wurde.

Das 2. Logo ist im PNG-Format und hat einen transparenten Hintergrund. Deswegen sieht man den dunkelgrauen Hintergrund hinter dem Logo.

Das 3. Logo ist im SVG-Format und hat ebenfalls einen transparenten Hintergrund. Darüber hinaus ist es immer komplett scharf dargestellt, egal wie nah man heranzoomen würde. (STRG+).

Hochauflösende Graphiken sollen maximal 5KB groß sein? Klingt zu schön, um wahr zu sein!

Aber doch ist es möglich. SVGs waren auch schon vor 15 Jahren optimal für die Darstellung der vektorisierten Graphiken. Doch mangelnde Browser-Unterstützung machten das Darstellen dieser Graphiken nur mithilfe von diverser Plugins möglich. Da heutzutage HTML5-fähige Browser der Standard sind, kann man mühelos SVG-Dateien in den HTML-Code einbetten und in Browsern darstellen.

Matt, der Betreiber von SVG Backgrounds, hat kostenlos diverse Hintergründe zur Verfügung gestellt. SVG Backgrounds bietet 40 verschiedene Designs an, wobei man Farben und Schattierungen auch nach Belieben ändern kann. Man sollte SVG Backgrounds lediglich in irgendeiner Form anerkennen. Ich tue das gerade hier über diesen Blog-Eintrag, der nicht nur den Leser helfen, sondern auch SVG Backgrounds unterstützen soll.

Zusammenfassung: Bildformate

Die nützlichsten Bildformate im Online-Bereich sind .jpg, .png und .svg. Alle haben ihre Vor- und Nachteile.

Dateinamen und Alternativtexte

Bilder haben wie Sie sehen eine große Auswirkung auf die Suchmaschinenoptimierung (SEO). Deswegen empfiehlt es sich den Bildern aussagekräftige Dateinamen zu geben. Benennen Sie die Bilder schlagwortartig je nach Anwendungsgebiet. (Statt bild1.jpg -> laptop.jpg)

Dieser Name scheint dann in der Google-Suche eventuell auf und kann so neue Besucher auf Ihre Website leiten. Google listet außerdem diese Namen für die Google Bildersuche.

Ein Alternativtext sollte das Bild in Worten beschreiben. Alternativtexte sind nur für Suchmaschinen sichtbar und helfen Sehbehinderten bei der Identifizierung Ihrer Inhalte. Außerdem kommen Sie zum Einsatz, falls das Bild – aus welchem Grund auch immer – nicht laden sollte.

Zusammenfassung: Dateinamen und Alternativtexte

Dateinamen und Alt-Texte sind wichtig für die Suchmaschinen und sollten immer berücksichtigt werden.

Rechte für die Bildnutzung

Es ist unglaublich wichtig, dass Sie die Rechte für die Bilder besitzen, die Sie online stellen. Oder diese Bilder sollten zumindest lizenzfrei sein. Ist das nicht so, können Sie jederzeit vom Urheber abgemahnt werden und das kann schnell sehr viel Geld kosten.

Wichtig – Auch wenn Sie einen Webdesigner beauftragen: Stellen Sie sicher, dass Sie die Rechte für die Bilder haben oder teilen Sie es dem Webdesigner mit, dass Sie die Rechte nicht besitzen. Ein guter Webdesigner wird vergleichbare kommerziell-verwendbare Bilder verwenden und Sie somit vor einer Abmahnung bewahren.

Ich kann mir gut vorstellen, dass ein großer Teil der Webseiten im Internet Bilder von Google verwendet. Es ist der einfachste Weg ein Bild zu finden, indem man es schnell googelt. Doch hier die Frage:

Kann ich Bilder von Google verwenden?

Die Antwort lautet: Ja und Nein.

Nein, weil: Der Großteil der Bilder, die Google auflistet nicht für eine freie Nutzung vorgesehen oder lizenziert sind. Das bedeutet, man macht sich strafbar, wenn man ohne Einwilligung des Urhebers ein solches Bild verwendet.

Ja, weil: Es auf Google auch Bilder gibt, die lizenzfrei nutzbar sind. Diese findet man über die erweiterte Bildersuche auf Google. Ganz unten hat man die Möglichkeit nach Nutzungsrechte zu filtern. Hier wählt man einfach „Frei zu nutzen oder weiterzugeben (- auch für kommerzielle Zwecke)“.

Diese Bilder haben eine CC0-Lizenz.

CC0-Inhalte können ohne Nachfrage zu beliebigen Zwecken kopiert, veröffentlicht oder auf andere Weise verwendet werden. Anders als die regulären Creative-Commons-Lizenzen enthält CC0 keine weitere Bedingungen wie etwa eine Namensnennung.

Wo man lizenzfreie und kommerziell-verwendbare Bilder bekommt, wurde bereits ausführlich im 1. Unterpunkt beschrieben. Hier nochmals die Liste der empfohlenen Seiten: