So optimieren Sie Ihre Bilder fürs Web auch ohne Hilfe

21.10.2020 / Welche Tools können Unternehmen für die Bildoptimierung nutzen?

Bilder werden heutzutage gerne auf Webseiten verwendet, um den eigenen Content zu visualisieren und zu veranschaulichen. Allerdings wirft die Verwendung von Bildern auf Webseiten einige Fragen auf. Neben dem Anspruch an eine gute Bildqualität, ist auch die Bildgröße von Bedeutung. Darüber hinaus sollte man berücksichtigen, dass Bilder, wenn Sie optimal eingebunden werden, einen positiven Einfluss auf die Suchmaschinenoptimierung haben. 

Sie möchten ein Bild hochladen, aber wissen nicht genau wie Sie dieses abspeichern müssen, damit es eine positive Bedeutung für die Suchmaschinenoptimierung hat? Wir erklären Ihnen wie Sie in Zukunft nicht mehr an dieser Frage hängen bleiben.

Die richtige Bildgröße

Bilddaten können große Datenmengen verursachen, d.h. je kleiner Sie die Bilddatei abspeichern, umso schneller lädt Ihre Seite. Wenn das Laden einer Webseite zu lange dauert, klickt der Nutzer möglicherweise wieder zurück und ist somit auch von Ihrer Seite weg. Damit Ihre Bilddatei nicht zu viel Ladegeschwindigkeit beansprucht, sollten Sie die Bildgröße so wählen, dass sie nicht größer als die beabsichtigte Darstellungsgröße auf der Webseite ist.

Mythos Auflösung

Relevant ist hierbei wirklich nur die Bildgröße in Pixeln. Die Information zur Auflösung des Bildes, welche z. B. in Adobe Photoshop festgelegt werden kann, ist nicht von Belang. Der Grund liegt daran, dass ein Monitor bzw. Screen eine definierte, nicht änderbare Auflösung hat und sich daher die dargestellte Größe des Bildes nur nach der Pixelbreite und Pixelhöhe in Relation zur Auflösung des Monitors auswirkt. Die DPI-Information im Bild wird immer ignoriert, wenn es um die Anzeiege eines Bildes am Bildschirm geht.

Das richtige Dateiformat

Schauen Sie zuerst, um welche Art von Grafik es sich bei Ihrem Bild handelt. Man unterscheidet zwischen Pixelgrafiken, die sich aus Millionen Bildpunkten zusammensetzen und Vektorgrafiken, die aus mathematisch exakt beschriebenen Punkten, Linien und Kurven bestehen. Vektorgrafiken haben oft einen geringeren Speicherbedarf als Pixelformate, da nur Parameter und nicht jeder einzelne Farbpixel abgespeichert werden muss.

Den Unterschied zwischen einer Pixelgrafik und einer Vektorgrafik erkennen Sie dann, wenn Sie die Grafik stark vergrößern. Bei einer Vektorgrafik bildet sich eine trennscharfe Kante im Übergang zwischen den Farbflächen. Bei einer Pixelgrafik ist die Kante unscharf und es bilden sich „Treppchen“.

Zur Veranschaulichung des Unterschieds ist eine Infografik aufgeführt und erklärt. Zusätzlich finden Sie eine Erklärung der vier wichtigsten Dateiformate. Welches Format für Ihren Verwendungszweck sinnvoll ist, können Sie anhand dieser Informationen beurteilen.

JPG:

Das JPG ist wahrscheinlich das meistverbreitete und -verwendete Bildformat im Web und wurde zum Speichern von Fotografiken entwickelt. Es ist für Bilder mit fotorealistischen Motiven und Bildern mit vielen Details und vielen Farben geeignet, wenn mit geringem Datenvolumen abgespeichert werden soll. Das JPG kann bis zu 16 Mio. Farben anzeigen. Zudem ist eine hohe Komprimierung, bei geringer Datenmenge, möglich. Ein großer Vorteil des Formates ist, dass JPG mit allen Browsern und Text,- und Grafikprogrammen kompatibel ist und zusätzlich auch korrekt auf allen Computern, Tablets oder mobilen Geräten dargestellt wird. Ein Nachteil ist, dass bei einfarbigen Bildern, die verlustbehaftete Komprimierung sehr schnell sichtbar wird und auch jede weitere Bildkomprimierung die Bildqualität verschlechtert.

PNG:

Das Format PNG ist noch nicht so verbreitet wie das JPG und gehört damit eher zu den etwas jüngeren Bildformaten. Die Besonderheit ist, dass man Bilder in unterschiedlichen Farbtiefen speichern kann und dies dann die Dateigröße ausmacht. Es kann als 24 Bit abgespeichert werden (der Standard für fotorealistische Motive), sodass es über 16 Mio. Farben anzeigen kann. Es kann aber auch als 8 Bit abgespeichert werden, sodass hier nur bis 256 Farben angezeigt werden und damit dann auch eine kleinere Speicherkapazität in Anspruch genommen wird. Diese Version würden Sie also für Bilder mit wenigen Details und Farben wählen. Eine weiterere Besonderheit des PNGs ist, dass eine vielseitige Transparenz im Bild besteht, d.h., das Bild kann von ganz undurchsichtig bis vollständig durchsichtig abspeichert werden. Ein Nachteil ist, dass die Datengröße bei PNG-Dateien größer ist als bei JPG-Dateien, da die Komprimierung nicht verlustbehaftet ist.

GIF:

Das Format GIF ist inzwischen so gut wie überflüssig geworden, da es maximal 256 Farben darstellen kann und somit für fotorealistische Motive und detailreiche Bilder nicht geeignet ist. Bei Motiven mit geringen Farben, wie z.B. bei Logos, Icons oder auch Illustrationen wird es häufiger verwendet. Allerdings hat es auch eine vorteilhafte Eigenschaft gegenüber den anderen Dateiformaten. Bei dem GIF gibt es die Möglichkeit kurze Animationen abzuspielen, wobei mehrere einzelne Bilder nacheinander abgespielt werden.

SVG:

Das SVG-Format gehört zu den Vektorformaten. Hier ist keine Bildgröße mit Pixelmaßen vorhanden. Auch dieses Format hat einen Vorteil: da es aus mathematisch beschriebenen Punkten besteht, ist das Vektorformat auflösungsunabhängig und somit auch beliebig skalierbar. Daher wird es bei Motiven mit einfachem, grafischem Inhalt verwendet, wie z.B. bei Logos, Icons, Diagrammen oder auch Illustrationen. Ein Nachteil ist, dass die Dateigröße schnell wächst, wenn das dargestellte Element aus einer großen Anzahl kleiner Elemente besteht.

Infografik - Bilder für Web & Performance optimieren

Wichtig: Vermeiden Sie große Dateiformate wie z.B. TIFF-Dateien, da diese nicht fürs Web geeignet sind.

Tools oder Bearbeitungsprogramme für weitere Komprimierung

Wenn Sie die, für Sie, richtigen Bildmaße angelegt und gespeichert haben, ist Ihr Bild soweit einsatzbereit.

Mit einigen Online-Tools können Sie Ihr Bild allerdings noch weiter optimieren, denn diese können die Dateigröße weiter reduzieren. Achten Sie bei der Komprimierung allerdings dadrauf, dass der Qualitätsverlust nicht zu groß ist.

TinyPNG:

Bei TinyPNG können Sie PNG- und JPG-Dateien ohne Qualitätsverlust komprimieren. Bei PNG-Dateien mit Transparenz können aus 24 Bit sogar 8 Bit komprimiert werden, was die Dateigröße sehr stark reduziert.

Compressnow:

Bei Compressnow können sie die Komprimierungsstufe für JPG-, PNG-, und GIF-Dateien selber einstellen. Wenn Sie ein gewünschtes Bild hochladen, wird Ihnen dynamisch angezeigt, wie sich die Dateigröße bei unterschiedlichen Komprimierungsraten verändert und das Ergebnis wird Ihnen ebenfalls sofort dargestellt, welches Sie dann speichern können.

Optimizilla:

Bei Optimizilla können Sie 20 JPG,- oder PNG-Dateien auf einmal komprimieren. Die eingesparte Dateimenge wird Ihnen für jedes Bild deutlich angezeigt. Sie können jedoch auch noch feiner justieren und für jedes Bild die Komprimierung einzeln einstellen. Wenn Sie mit dem Ergebnis zufrieden sind, können Sie ganz einfach das ZIP-Archiv herunterladen.

Compressor:

Hiermit können Sie JPG,- PNG,- und GIF-Dateien komprimieren, wobei Sie über eine verlustfreie und eine verlustbehaftete Version verfügen und zwischen diesen Sie wählen können. Compressor überzeugt durch seine moderne und intuitive Bedienung.

Ein gutes Ranking in der Bildersuche bei Google

Für viele Webseiten bringt die Google Bildersuche ein hohes Traffic-Potenzial. Denn die Bildoptimierung (Bilder-SEO) beschäftigt sich mit dem Ziel, eine bessere Platzierung in der Suche zu erreichen und somit die Steigerung der Sichtbarkeit zu gewährleisten. Damit sollte sich die Anzahl interessierter Nutzer und möglicher Kunden erhöhen.

Wenn Bilder gut sichtbar in den Suchergebnissen sind, können Nutzer, die nach der Eingabe der Suchanfrage direkt zur Bildersuche (Google Verticals) wechseln, auf Ihr Bild, welches zu Ihrer Webseite linkt, klicken. Damit Sie hier zu gut optimierten Bildern gelangen, haben wir in der folgenden Auflistung verdeutlicht, was Sie beachten sollten.

1. Dateinamen mit passenden Keywords benennen

Wenn Sie Ihr Bild abspeichern, benötigen Sie dafür zuerst passende Keywords in Ihrem Dateinamen. Diese Keywords sollten das Bild und das Thema des Bildes prägnant zusammenfassen, aber dennoch so detailliert wie möglich beschreiben. Außerdem sollten Sie auf weitere Punkte acht geben: schreiben Sie Umlaute aus, trennen Sie die Wörter mit Bindestrichen und schreiben Sie alles klein, da es für die meisten Programme besser zu interpretieren ist und somit das Fehlerpotenzial beim Einbinden verringert wird.

2. Keywords in Bildunterschriften einfügen

Sie sollten auch in der Bildunterschrift Keywords verwenden. Hierbei sollte der umliegende Text berücksichtigt werden. Dieser wird von der Suchmaschine erkannt und ebenfalls zur Bewertung herangezogen. Der erste Textabsatz beim Bild und die nächste (Zwischen-) Überschrift sollten die entsprechenden Keywords enthalten.

3. Richtige Bildgröße, Dateigröße und -format anwenden

Wie Sie oben schon gelesen haben, hängt das ideale Dateiformat und die Bildgröße von dem Verwendungszweck Ihres Bildes ab. Beachten Sie, dass Ihr Bild auch beim mobilen Surfen und bei schlechtem Empfang des Nutzers laden sollte. Deshalb sollte die Dateigröße Ihres Bildes keine langen Wartezeiten verursachen.

Tipp: Im Content-Bereich sollte Ihre Dateigröße 200 KB nicht überschreiten!

4. Bilder wiederholt nutzen

Verwenden Sie, wenn möglich, das gleiche Bild öfter auf Ihrer Website, da es für Google eine höhere Wichtigkeit signalisiert. Selbstverständlich sollten Sie dieses Bild nur verwenden, wenn es in dem Kontext sinnvoll ist.

5. Beachten Sie „Title“- und „Alt-Attribut“

Wenn Sie Ihr Bild in eine Webseite einbinden, benennen Sie mit entsprechenden Keywords das "Alt-Attribut" und das "Title-Attribut". Um dies noch einmal kurz zu erklären: Das „Alt-Attribut“ wird auch als Alternativtext bezeichnet und bewirkt, dass sobald ein Bild auf der Webseite nicht dargestellt wird, dass der Alternativtext gezeigt wird. Somit profitiert nicht nur die Suchmaschine davon, sondern auch für Blinde und Nutzer mit abgeschalteter Grafikanzeige ist dies nützlich. Das „Title-Attribut“ beinhaltet Text mit zusätzlichen Informationen über das Bild. Er wird, wenn er denn bei Bildern gefüllt ist, angezeigt beim drüberfahren mit der Maus. Die Suchmaschine weiß also, mit welchem Thema sich Ihr Bild beschäftigt, bzw. was auf diesem Bild abgebildet wird.

6. Berücksichtigung des Bild-Alters

Wenn möglich, sollten Sie ein angemessenes „Alter“ des Bildes berücksichtigen. Im besten Fall verwenden Sie Bilder, die Google noch nicht kennt. Denn je jünger das Bild ist, umso origineller und interessanter ist es für die Suchmaschine. Hinweis: Google erkennt Bilder, die schon einmal im Web verwendet wurden und auch das Veröffentlichungsdatum. Deshalb sollten Sie bereits veröffentlichte Bilder nicht auf ihrer Webseite einpflegen.

7. Bilder-Sitemaps integrieren

Wenn möglich sollten Sie Ihre Bilder in eine XML-Sitemap integrieren, denn so kann die Suchmaschine Bilder erfassen, die sonst eventuell nicht erkannt werden. Die XML-Sitemap ist so eingerichtet, dass sie der Suchmaschine mitteilt, wo welches Bild zu finden ist. Sie sollten hierbei darauf achten, dass die Bilder erst ab einer bestimmten Größe aufgeführt werden.

8. Gefahr durch Hotlinks vermeiden

Es ist wünschenswert, wenn Ihr Bild von anderen Webseiten verlinkt wird, denn so wird Google ebenfalls eine starke Wichtigkeit signalisiert. ACHTUNG: Dies kann allerdings auch in die falsche Richtung gehen. Denn wenn Ihr Bild über einen Hotlink auf einer Domain angezeigt wird, könnte es sein, dass Ihr Suchergebnis in den Schatten gestellt wird, weil Ihre Domain noch nicht stark genug im Interner verankert ist.

9. URL und Ordnerstruktur

Jedes Bild auf Ihrer Website verfügt über eine eigene URL. Diese ergibt sich meistens automatisch aus den vergebenen Dateinamen und dem Pfad, der sich aus Ihrer Ordnerstruktur ergibt. Hierbei sollten Sie darauf achten, die Bilder im Ordner mit semantisch korrekten Bezeichnungen abzulegen und unnötige Zwischenverzeichnisse vermeiden.

10. Seitentitel

Wählen Sie einen aussagekräftigen Meta-Title (Element eines HTML-Dokuments – bildet den eindeutigen Titel der Seite ab) für Ihre Unterseite. Im besten Falle passt dieser auch noch zum Bild.

Sie haben Fragen oder benötigen Hilfe bei der Bildoptimierung für Suchmaschinen? Nehmen Sie gerne Kontakt auf. Wir freuen uns auf Ihre Anfrage!