Dr. Matthias Stephan · Zuletzt aktualisiert: 18. Februar 2023

Wie sie Bilder optimieren und damit die Webseiten Leistung verbessern scaled

Bildoptimierung wird schnell zu einem wesentlichen Bestandteil für den Betrieb einer erfolgreichen Website. Da jede Seite im Durchschnitt 21 % des Webseiten-Volumens ausmacht, ist die Bildoptimierung zur Leistungssteigerung wohl noch wichtiger als die Optimierung von Skripten und Schriftarten. Trotzdem wird es von vielen Website-Betreibern übersehen. Dabei könnten sie von vielen Vorteilen profitieren könnten, die eine Optimierung ihrer Bilder bietet.

Optimierte Bilder verbessern erheblich die Ladegeschwindigkeit einer Webseite. Folglich erhöht dies die Zufriedenheit der Benutzer und sort für ein verbessertes Suchmaschinenerlebnis, da Crawler bei der Indexierung schneller vorgehen können. Darüber hinaus kann die Verringerung des Gewichts einer Seite auch dazu führen, dass weniger Bandbreite verwendet wird, da weniger Speicherplatz für optimierte Bilder benötigt wird. Schließlich können Backups auch schneller erstellt werden, wenn die Bilddateigröße verringert wurde.

Bildoptimierung erklärt

Bildoptimierung ist der Prozess der Anpassung von Bildern für verbesserte Qualität, reduzierte Dateigröße und geeignete Anzeige auf allen Geräten. Je nach Anforderung des Benutzers kommen verschiedene Methoden wie z.B. Komprimierung und Lazy Loading zum Einsatz. Responsive Bilder sind Bilder, die für eine optimierte Anzeige an den Browser oder die Gerätespezifikationen des Benutzers angepasst sind. Alle diese Methoden ermöglichen eine effiziente Speicherung, Übertragung und geeignete Wiedergabe von Bildern über Geräte hinweg. Die Bildoptimierung ist unerlässlich, um die Leistung der Website zu verbessern.

Die Bildoptimierung reduziert die Dateigröße mithilfe von Plugins oder Skripts, um die Geschwindigkeit der Website zu verbessern. Um dies zu erreichen, kann sowohl verlustbehaftete als auch verlustfreie Komprimierung verwendet werden. Verlustbehaftete Reduzierungen wirken sich auf die Bildqualität aus, z. B. durch Verringern der Auflösung oder Eliminieren von Metadaten, während verlustfrei die Bildqualität bewahrt. Die PNG-Komprimierung ist eine Art der verlustfreien Komprimierung, die die Größe reduzieren kann, ohne die Qualität zu beeinträchtigen. Darüber hinaus können Tools verwendet werden, um das Aussehen des Bildes zu verbessern.

Bilddateiformate

Die Wahl des richtigen Dateiformats für Bilder kann bei der Website-Optimierung, Qualitätserhaltung und Reduzierung der Dateigröße helfen:

  • PNG eignet sich am besten für Bilder mit mehr Details, da es sich um ein verlustfreies Format handelt, d. h. bei der Komprimierung gehen keine Informationen verloren.
  • JPEG ist ideal für Fotos und Grafiken mit mehreren Farben. Es ist ein verlustbehaftetes Format, aber das Anpassen der Qualitätsstufe kann helfen, ein Gleichgewicht zwischen Qualität und Dateigröße zu wahren.
  • Für animierte Bilder ist GIF die beste Option, da es nur 256 Farben unterstützt und eine verlustfreie Komprimierung verwendet.
  • JPEG XR oder WebP sind ebenfalls möglich, die Browserunterstützung kann jedoch variieren.

Bei der Optimierung von Bildern für eine Website sollte der Zweck und die Komplexität berücksichtigt werden. JPEG eignet sich am besten für komplexe Bilder und PNG für einfache. Die Beachtung der Bildoptimierung ermöglicht eine bessere Leistung und ein verbessertes Benutzererlebnis.

Optimieren von Bildern: Verlustbehaftet vs. verlustfrei

Bildoptimierung ist der Prozess der Anpassung der Größe, Qualität und anderer Aspekte von Bildern, bevor es auf einer Webseite verwendet wird. Bei der Bildoptimierung unterscheidet man zwischen verlustbehaftet und verlustfrei. Bei der verlustbehafteten Optimierung handelt es sich, wie der Name schon sagt, um einen Filter, der bestimmte Informationen aus einem Bild entfernt. Die Dateigröße wird dadurch reduziert, aber auch die Bildqualität wird dabei beeinträchtigt. Bildbearbeitungsprogramme können verwendet werden, um die Qualitätseinstellungen anzupassen und den erforderlichen Komprimierungsgrad zu einzustellen.

Die verlustfreie Optimierung unterscheidet sich insofern, als sie die Bildqualität nicht verringert, aber dennoch zu einer Reduzierung der Bildgröße führt. Man sollte jedoch mit den Techniken experimentieren, um die perfekte Balance zwischen Komprimierung und Qualität zu finden. Je nach Bildbearbeitungsprogramm kann eine Funktion zum „Speichern des Bildes für das Web“ nützlich sein, da sie den Benutzern Zugriff auf eine optimale Bildkomprimierung bietet, während die Qualität weitgehend erhalten bleibt.

Die perfekte Balance für die Bildoptimierung finden

Die perfekte Balance fuer die Bildoptimierung finden scaled

Die Bildoptimierung spielt eine entscheidende Rolle bei der Sicherstellung schnell ladender Websites. Dazu müssen Sie die perfekte Balance zwischen Komprimierungsqualität und Dateigröße erreichen und gleichzeitig sicherstellen, dass Ihre Grafiken hochwertig und lebendig aussehen. Nehmen wir zur Veranschaulichung ein Beispiel für ein hochauflösendes JPEG, das in Photoshop erstellt wurde. Bei niedriger Komprimierung beträgt die Dateigröße unseres Bildes 609 KB. Dieses Bild wird eine hervorragende Qualität haben, aber das Laden dauert einige Zeit.

Was ist also die perfekte Balance? Es ist am besten, ein Gleichgewicht zwischen der Qualität und der Dateigröße des Bildes zu finden. Eine mittlere Komprimierungsrate hat den Vorteil, dass die resultierende Qualität gut aussieht und die Dateigröße für ein hochauflösendes Foto akzeptabel ist. Dies kann zu einer Bildgröße von etwa 151 KB führen, was fast 4x kleiner ist als das ursprüngliche Foto mit niedriger Komprimierung.

Wir können sehen, wie vorteilhaft das richtige Gleichgewicht zwischen Komprimierungsqualität und Dateigröße ist, da es uns ein Gleichgewicht zwischen einer akzeptablen Dateigröße und einer hohen visuellen Qualität bietet. Für einfachere Bilder wäre bei PNGs eine Dateigröße von weniger als 100 KB optimal. Zum Beispiel kann ein PNG nur mit einem Logo eine Dateigröße von 30 KB haben und dennoch kristallklar bleiben.

WordPress-Plugin-Tipp: Imsanity

Fachleute für digitale Bildgebung müssen darauf achten, Bilder zu skalieren, um ihre Seitenverhältnisse beizubehalten. Eine falsche Skalierung kann zu Bildverzerrungen und Pixelbildung führen, was zu einem körnigen und verschwommenen Aussehen führt. Mit WordPress 4.4 wurden responsive Bilder eingeführt, die Versionen in mehreren Größen generieren, wobei der Browser die für das Gerät am besten geeignete auswählt.

Um Bilder weiter zu optimieren, wird empfohlen, ein Gleichgewicht zwischen der Größe der Spalte/Div der Website und der Originalgröße zu finden. Das Plugin Imsanity kann verwendet werden, um die Größe zu regulieren, ein unverändertes Original zu erstellen und ein Limit festzulegen, um sicherzustellen, dass die Bilder in einem angemessenen Größenbereich liegen.

Was ist Bilder-SEO?

Bilder-SEO geht weit über die Optimierung von Ladezeiten und das Einfügen von Alternativtexten hinaus. Es befasst sich damit, wie Bilder in der Google-Suche erscheinen und wie sie für die organische Suche sichtbar sind. Bilder-SEO kann sich ganz praktisch auf das Ranking Ihrer Webseite auswirken, wenn die Bilder perfekt für die Sichtbarkeit in Suchmaschinen optimiert sind.

Als wichtigstes Kriterium gilt die Bildgröße und das Format. Größere Bilder brauchen länger zum Laden, was die Benutzererfahrung beeinträchtigen kann. Es wird empfohlen, JPEG- oder PNG-Dateitypen zu verwenden. Beschreibende Dateinamen tragen ebenfalls maßgeblich zu einem guten Bilder-SEO bei: Lange Dateinamen sollten aus Schlüsselwörtern bestehen, die beschreiben, was abgebildet ist. Am wichtigsten ist, dass der Alt-Text vorhanden ist. Dies ist die Textalternative zu Bildern, wenn sie nicht geladen werden. Zudem liefert es eine Beschreibung für Suchmaschinen-Crawler.

Berücksichtigen Sie auch den Inhalt, der das Bild umgibt; Die Bildunterschrift und der Kontext, in dem sich das Bild befindet, sind beide wichtig, um das Bild als Teil des organischen Suchpotenzials der Seite zu optimieren. Außerdem sollte jedes Bild einen Link zu einer relevanten Seite haben, die zusätzliche Informationen enthält. Stellen Sie zusammenfassend sicher, dass Ihre Bilder relevante Schlüsselwörter enthalten, eine überschaubare Größe haben und den richtigen Alt-Text haben.

Bild-SEO optimieren

Bild SEO optimieren

Die Optimierung der HTML-Attribute von Bildern ist ein wichtiger Teil der Suchmaschinenoptimierung. Es deckt die wesentlichen Faktoren wie das Bildtitelattribut, seine URL, ALT-Tag und Bildunterschriften ab, um sicherzustellen, dass sie SEO-freundlich sind. Die Verbesserung dieser SEO-bezogenen Attribute erhöht die Chancen einer Webseite, prominent in den SERPs zu erscheinen.

Titel, Dateiname und Alt-Attribut

Der effektivste Weg, um sicherzustellen, dass ein Bild von einer Suchmaschine gefunden werden kann und optimal funktioniert, ist die Verwendung der Attribute Titel, Dateiname und alternativer Text. Wenn ein Benutzer zum Beispiel nach einem Bild eines Sonnenuntergangs sucht, könnte er „Sonnenuntergang“ in seine Suchmaschine eingeben. Wenn der Suchmaschinen-Crawler die Website parst, sieht er sich den Titel, den Dateinamen und den alternativen Text an, um ein klares Verständnis dafür zu bekommen, was sich im Bild befindet.

Daher ist es wichtig, dass diese drei Attribute mit den Schlüsselwörtern gefüllt werden, die sich auf den Inhalt des Bildes beziehen. Der Dateiname könnte beispielsweise so lauten wie „Sonnenuntergang.jpg“ und der Alternativtext „Bild eines wunderschönen Sonnenuntergangs“. Hier sind die meisten Informationen zu finden und erhalten daher das größte Gewicht. Während das Titelattribut hilfreich ist, um die Benutzererfahrung beim Scrollen über ein Bild zu verbessern, hat es nicht so viel Gewicht wie der Dateiname und die Alt-Tags. Um sicherzustellen, dass ein Bild gefunden und richtig eingestuft wird, sollten alle drei Attribute so ausgefüllt werden, dass der Inhalt des Bildes genau hervorgehoben wird.

Figure und Figcaption Tag

Das HTML-Tag figure und das figcaption-Tag sind nützliche Tools zur Bildoptimierung. Das figure-Tag hilft bei der Bildpositionierung, während das figcaption-Tag zusätzlichen, informativen Text über das Bild bereitstellt. Wenn Sie beispielsweise ein Bild von einer Bergkette haben, verwenden Sie das Tag figure, um die Größe und Positionierung zu steuern, und verwenden Sie dann das Tag figcaption, um eine kurze Erklärung hinzuzufügen, z. B. „Sonnenuntergangsansicht der Rocky Mountains“.

Das figcaption-Tag wird hauptsächlich verwendet, um ein Bild zu beschreiben oder eine Bildunterschrift bereitzustellen. Beim figure-Tag kann das Bild über die Attribute src, alt und title gesetzt werden. Wenn eine Bildunterschrift benötigt wird, kann das figcaption-Tag verwendet werden, um eine Beschreibung bereitzustellen. Wenn Sie beispielsweise ein Bild von einem Laptop haben, verwenden Sie das figcaption-Tag, um eine Bildunterschrift wie „Laptop für Remote-Arbeit“ zu schreiben. Das figcaption-Tag hilft Website-Besuchern, ein Bild besser zu verstehen, wodurch es wahrscheinlicher wird, dass sie bleiben.

Die figcaption-Tags und die umgebenden Absätze sind zwei Elemente, die für die Optimierung berücksichtigt werden sollten. Das Platzieren relevanter Schlüsselwörter in der Bildunterschrift und den Absätzen kann Suchmaschinen helfen, zu definieren, wie die Bilder mit anderen Inhalten verbunden werden können. Dadurch sind sie in den Suchergebnissen leichter zu finden. Die Verwendung von Schlüsselwörtern betont, was das Bild ausdrückt, und erhöht die Chancen, korrekt indiziert und in den Ergebnissen der Bildsuchmaschine angezeigt zu werden.

Den Alt-Text perfekt formulieren

Alt-Text ist von grundlegender Bedeutung für die Optimierung von Bildern für das Crawlen und Ranking in Suchmaschinen. Beim Schreiben des perfekten Alt-Textes sind zwei Komponenten zu berücksichtigen – Inhalt und Funktion. Der Inhalt des Alt-Textes sollte genau darstellen, was das Bild ist, und mit dem Kontext verknüpft sein, in dem es erscheint. Für ein Stock-Foto einer lächelnden Frau, die einen Laptop hält, würde der Alt-Text beispielsweise so lauten wie „Eine Frau, die lächelt, während sie einen Laptop benutzt“. Es muss sichergestellt werden, dass der Inhalt anschaulich, relevant und leicht verständlich ist.

Darüber hinaus sollte der Alt-Text einem funktionalen Zweck dienen und dem Benutzer einen Mehrwert bieten. Dies könnte darin bestehen, den Zweck des Bildes zu identifizieren oder seine einzigartigen Eigenschaften zu beschreiben. Beispielsweise könnte der Alt-Text für ein Bild eines Diagramms, das die Verkaufszahlen anzeigt, lauten: „Ein Diagramm, das die Verkaufszahlen von Monat zu Monat darstellt“. Die logische Verbindung zwischen dem Inhalt und der Funktion des Bildes sollte durch den Kontext der Seite hergestellt werden, auf der es sich befindet. Dies sollte es Suchmaschinen-Crawlern ermöglichen, besser zu verstehen, was in dem gegebenen Bild dargestellt wird.

Die optimale Länge für Dateiname

Die Optimierung die Bilder für SEO ist für den Webauftritt unerlässlich. Bei der Bildoptimierung müssen Sie auch sorgfältig über den Dateinamen Ihres Bildes nachdenken. Eine kürzlich durchgeführte Studie hat hervorgehoben, dass Bilder mit der besten SEO-Leistung eine Dateinamenlänge von 12 Zeichen haben. Es wird daher empfohlen, Bilddateinamen zwischen 8 und 16 Zeichen lang zu halten. Diese Länge entspricht zwei oder drei zielgerichteten Schlüsselwörtern, wodurch Google das Bild besser verstehen kann. Keyword-Stuffing sollte dabei vermieden werden. Bilddateinamen lassen sich für SEO am besten optimieren, indem man auf deren Länge achtet und zwei bis drei relevante Keywords sinnvoll einbindet.

Das perfekte Bild finden

Das Erstellen des perfekten Bildes für ein Projekt kann schwierig sein. Es ist wichtig, Bilder von hoher Qualität und einer optimierten Größe zu verwenden. Die eigene Fotografie ist eine großartige Möglichkeit, um sicherzustellen, dass das verwendete Bild genau den visuellen Anforderungen des Projekts entspricht. Wenn das Fotografieren keine Option ist, verfügen zwei beliebte kostenlose Quellen für Stockfotos – UnSplash und Pixabay – über umfangreiche Sammlungen beeindruckender Bilder und Illustrationen, die für weniger technische Projekte geeignet sind. Canva bietet sogar eine beeindruckende Bibliothek mit benutzerdefinierten Illustrationen und Fotografien, um dabei zu helfen, genau die gewünschte Ästhetik für das Projekt zu erreichen.

Hinweis zum Urheberrecht

Hinweis zum Urheberrecht scaled

In Deutschland muss man auch beim Verwenden von Bildern aus Stock-Foto-Plattformen das Urheberrecht beachten. Beide Plattformen bieten zwar lizenzfreie Bilder an, aber das bedeutet nicht automatisch, dass diese Bilder gemeinfrei oder frei von Urheberrechten sind.

Wenn man z.B. Bilder von Unsplash oder Pixabay verwendet, muss man sich zunächst vergewissern, dass das Bild tatsächlich unter einer Creative-Commons-Lizenz oder einer ähnlichen Lizenz steht, die es erlaubt, das Bild zu verwenden. Man sollte die Lizenzbedingungen genau prüfen und sicherstellen, dass man die Bedingungen erfüllt, unter denen das Bild verwendet werden darf.

Bei den meisten Creative-Commons-Lizenzen ist es erforderlich, den Urheber des Bildes zu nennen und einen Link zur Lizenz anzugeben. Auch wenn eine Namensnennung nicht ausdrücklich gefordert wird, ist es oft eine gute Praxis, den Urheber trotzdem zu nennen.

Zudem ist das Recht am eigenen Bild in Deutschland ein wichtiges Persönlichkeitsrecht, das es verbietet, ohne Einwilligung der abgebildeten Person(en) Fotos oder Videos von ihnen zu veröffentlichen oder anderweitig zu verwenden. Das bedeutet, dass man das Bild einer Person nicht einfach so veröffentlichen oder verwenden darf, wenn diese Person nicht ausdrücklich ihre Einwilligung dazu gegeben hat.

In Deutschland gibt es spezifische Regelungen, die das Zitieren und die Verwendung von fremden Werken erlauben, jedoch sind die genauen Bedingungen und Grenzen komplex und können je nach Kontext variieren. In jedem Fall ist es empfehlenswert, sich über die jeweiligen Urheberrechtsbestimmungen zu informieren und gegebenenfalls rechtlichen Rat einzuholen, um keine Urheberrechtsverletzung zu begehen.

Bilder responsiv optimieren

Um Bilder richtig zu optimieren, werden Responsive-Bilder empfohlen, bei denen Sie die Größe ändern und sie vor dem Hochladen auf die gewünschte Größe für die jeweilige Seite komprimieren. Wenn Sie beispielsweise möchten, dass ein Bild auf einer Artikelseite mit 500 x 300 Pixel angezeigt wird, sollten Sie die Größe des Bilds ändern und auf die genauen Abmessungen komprimieren, bevor Sie es auf der Seite veröffentlichen. Dies ermöglicht schnellere Seitenladegeschwindigkeiten, eine verbesserte Benutzererfahrung und bessere SEO-Ergebnisse.

Wenn Sie WordPress verwenden, werden nach dem Hochladen mehrere Größen und responsive Bilder bereitgestellt. Nach dem Hochladen eines Bildes in WordPress können Ihnen beispielsweise Größen wie Miniaturansicht, Mittel, Groß und Voll angezeigt werden. Wenn Sie jedoch kein WordPress verwenden, müssen Sie die Größe der Bilder selbst mit GIMP, Sketch, Photoshop oder Illustrator ändern und komprimieren. Dies kann ein zeitaufwändiger Prozess sein, gewährleistet jedoch qualitativ hochwertige Bilder, die für die Anzeige und Verwendung auf der Website optimiert sind.

SEO und UX mit Image Lazy-Loading optimieren

Das Implementieren von Lazy-Loading-Bildern ist ein schneller Gewinn für SEOs, ebenso wie die Benutzererfahrung, die mit wenig Aufwand einhergeht. Lazy Loading von Bildern lässt sie erscheinen, sobald Benutzer zu dem Teil der Seite scrollen, der sie enthält. Diese Technik hindert Suchmaschinen-Crawler nicht daran, die Bilder zu indizieren. Es ist aber ein Performance-Gewinn, nicht alle Bilder zu laden, sondern nur die aktuell relevanten. Wenn Sie beispielsweise mehrere Bilder von Produkten auf einer E-Commerce-Website anzeigen, müssen nur die Bilder auf der aktuellen Seite geladen werden. Dadurch wird die Website schneller geladen und die Benutzererfahrung verbessert.

Für diejenigen, die WordPress verwenden, gibt es ein hervorragendes Plugin namens WP-Optimize, das das verzögerte Laden von Bildern automatisieren kann. Die neueste Version von WordPress implementiert nativ das verzögerte Laden von Bildern, sodass keine zusätzlichen Plugins verwendet werden müssen, um die Bildoptimierung sicherzustellen. Für diejenigen, die WordPress nicht verwenden, können die Richtlinien von Google erklären, wie Lazy Loading implementiert wird.

WordPress-Plugin-Tipp: Media Cleaner

Media Cleaner ist ein Plug-in, mit dem Sie Ihre Medienbibliothek optimieren und Speicherplatz freigeben können. Es verhält sich wie eine Suchmaschine, die alle Ihre Mediendateien durchsucht und dann diejenigen anzeigt, die nicht verwendet werden. Das Entfernen der ungenutzten ist einfach, nur ein paar Klicks entfernt.

Alle entfernten Dateien werden in den Papierkorb verschoben, anstatt vollständig gelöscht zu werden, sodass Sie sicherstellen können, dass danach keine Probleme mit der Funktion der Website auftreten. Wenn tatsächlich etwas schief geht, kann jede Datei innerhalb von Sekunden wiederhergestellt werden. Schließlich, wenn Sie sicher sind, dass Ihre Website störungsfrei ist, ist das Leeren des Papierkorbverzeichnisses der letzte Schritt. Bildoptimierung lässt sich mit diesem effektiven Tool ganz einfach erreichen.

Bilder mit Bild-Sitemaps propagieren

Bilder mit Bild Sitemaps propagieren scaled

Eine Bilder-Sitemap ist eine XML-Datei, die es Suchmaschinen-Crawlern erleichtert, auf der Webseite vorhandene Bilder zu entdecken, zu verstehen und zu indizieren. Bei einer großen Website besteht die Möglichkeit, dass Crawler den Inhalt aufgrund unzureichend optimierter interner Verlinkung übersehen. Dies kann durch den Einsatz von Sitemaps und Bilder-Sitemaps verhindert werden. Wenn Sie beispielsweise ein Bild auf eine Website hochladen, fügen Sie Bild-Sitemaps hinzu, um Suchmaschinen zu informieren, dass neue Inhalte zur Website hinzugefügt wurden.

Die Bild-Sitemap enthält verschiedene Attribute wie Bildtypen, Standort, URLs, Beschriftung und Titel. All diese Eigenschaften helfen Crawlern, die Bilder schnell zu identifizieren und geben einen Eindruck von ihrer Relevanz im Kontext der Website. Wenn eine Webseite beispielsweise eine Produkt-Seite hat, könnte die Bild-Sitemap den Namen des Produkts, seine Eigenschaften, einen Link zur Produktseite und das Bild selbst enthalten. Mit den Bildern verknüpfte Metadaten sollten ebenfalls vorhanden sein, die der Bilder-Sitemap hinzugefügt werden können. Zum Beispiel eine Bildunterschrift, die der Produktname, der Preis oder ein anderes relevantes Detail für das Bild sein könnte. Optimierte Bilder bieten eine höhere Crawling-Rate und bedeuten bessere Chancen, auf den Ergebnisseiten von Suchmaschinen angezeigt zu werden.

Verweise