Porträt von mir (Dmitry Dugarev) - eines jungen Mannes mit Brille, der lächelt und eine Jeansjacke trägt. Er steht vor einem städtischen Hintergrund während der Dämmerung, die Lichter der Stadt sind im Hintergrund verschwommen zu sehen.

Dmitry Dugarev

Website-Entwickler aus Frankfurt am Main

Bilder Optimierung: Kompletter Leitfaden für Top-Ranking 2024

Erfahre, wie Du Deine Bilder für Performance, SEO und Barrierefreiheit optimieren kannst, um die Google Bildersuche zu rocken und BFSG-konform zu bleiben.

Dabei zeige ich Dir die besten Praktiken, wie Du Alt-Texte und Bild-URLs korrekt implementierst, indem Du einfache und beschreibende Dateinamen und Alt-Attribute verwendest.

Das Bild zeigt eine Grafik zur Bilder-Optimierung mit dem Text "Geheime SEO Strategie für bis zu 30% mehr Besucher!". Links ist ein unscharfes, verpixeltes Bild zu sehen, das durch einen grünen Pfeil auf ein scharfes, farbiges Bild rechts verweist. Der Titel "Bilder Optimierung" steht oben in großer roter Schrift. Bild-Grafik ist entwickelt von rawpixel.com / Freepik

Inhalts­verzeichnis

Kurz und knackig

Einleitung

Bilder… ein spannendes Thema, das oft viel zu einseitig dargestellt wird. Willst Du Bilder auf Deiner Website haben, ohne dass sie ewig lädt?

Keine Sorge, ich zeige Dir, wie man Bilder komprimieren kann. Wusstest Du aber, dass Google bei der Bildersuche die Bilder mit der besten Qualität bevorzugt?

„Aber ich kann doch keine 4k-Bilder auf meiner Website haben, dann ist die Dateigröße ja über 100 Megabyte …“

Doch!

Was, wenn ich Dir sage, dass Du dank semantischem HTML Deine Bilder so gestalten kannst, dass Suchmaschinen die leckerste High-Resolution Version sieht, ohne dass Deine Besucher lange warten müssen?

Und nein, ich rede nicht von „Lazy Loading“!

Das ist einer der Tipps, die Du heute lernst: Wie Du Deine Bilder optimal für Performance gestaltest.

Aber bevor wir da loslegen, zeige ich Dir vorerst, welche Möglichkeiten es überhaupt in HTML gibt ein Bild hinzuzufügen.

Denn eine SEO Strategie, die oft übersehen wird, ist die Nutzung von semantischem HTML.

Überraschung! Es gibt nicht nur <img>-Tag für Bilder.

Aber keine Sorge, ich berichte Dir von allen, damit Du auch die Unterschiede merkst und immer die richtige Methode einsetzt.

Die Wahl des richtigen Tags kann Deine SEO positiv beeinflussen, weil die Suchmaschinen dann besser die Rolle des Bildes nachvollziehen können.

Denn abgesehen von dem Einfluss auf die Conversion-Rate, hast Du mit jedem Bild die Chance, bei der Google-Bildersuche aufzutauchen.

Warum ist das wichtig? Laut Moz erfolgen 26,79 % aller Suchanfragen über Google Images. Mit Bildern erhöhst Du also Deine Reichweite und bekommst mehr Traffic.

Ein Beispiel: Mein Artikel über semantisches HTML ist auf Platz 40+ bei normalen Suchergebnissen. Aber das Titelbild des Artikels ist auf Platz 6 bei Google Images.

Das Bild zeigt eine Google-Bildersuche nach dem Begriff "semantik html". Im Vordergrund hebt ein roter Pfeil ein Suchergebnis hervor, das auf dem sechsten Platz liegt. Dieses Ergebnis stammt von Dmitry Dugarev und vergleicht HTML mit und ohne Semantik. Der darüberstehende Text erklärt, warum Google Bildersuche wichtig ist: Ein Artikel über HTML-Semantik ist in der normalen Suche auf Rang 40, erhält aber dank des sechsten Platzes in der Bildersuche dennoch Besucher. Der Screenshot ist von der Website musnuss.de und trägt den Copyright-Hinweis von Dmitry Dugarev.

Willkommen im Reich der SEO (Search Engine Optimization – Suchmaschinenoptimierung).

Hier erfährst Du alles über die Suchmaschinenoptimierung Deiner Bilder: Rankingfaktoren, Keywords-Möglichkeiten, Meta Daten und mehr. Alles für Top SEO.

Aber pass auf, Optimierung der Bilder ist nur ein Aspekt der sogenannten technischen SEO. Falls Du über alle Teile davon wissen möchtest, schaue mal in meinem Leitfaden zur technischen SEO vorbei.

Zudem gebe ich Dir Tipps zur barrierefreien Gestaltung Deiner Bilder. Zum Beispiel, wie Du alt Tag richtig ausfüllst.

Achtung: ab 2025 müssen alle Websites gemäß BFSG (Barriere­freiheits­stärkungs­gesetz) barrierefrei sein.

Und am Ende gibt es eine Liste, die Dir hilft, Deine Bilder zu prüfen und so effektiv wie möglich zu gestalten.

Also, genug geredet. Los geht’s in die Welt der Bilderoptimierung!

Kurzer Exkurs in die Welt von HTML

Okay, ich nehme an Du hast schon Ahnung, wie Du ein Bild auf Deine Website hinzufügen kannst. Ansonsten wärest Du ja nicht hier.

Wahrscheinlich nutzt Du ein CMS (Content-Management-System) wie WordPress und für Dich ist alles in ein paar Klicks erledigt.

Doch bist Du hier mit dem Wunsch gekommen, Deine Bilder optimal zu gestalten. Dafür erzähle ich Dir vorerst, wie das technisch gesehen geht und was dabei passiert.

Also, stell Dir mal vor, die Regierung hat ein deutschlandweites Verbot für CMS ausgerollt. Was machst Du nun mit Deinem Wunsch, ein hübsches Bildchen hochzuladen?

Alle Websites im Internet sind im Prinzip ein Haufen von HTML-Tags. Im HTML Living Standard von WHATWG gibt es nämlich über 150 davon.

Das Bild zeigt ein Beispiel eines HTML-Codes in einem dunklen Texteditor. Der Code beinhaltet semantische HTML-Tags und beschreibt das Profil eines Website-Entwicklers namens Dmitry Dugarev. Der Abschnitt enthält Tags wie <header>, <div>, <figure>, <span>, <img decoding=

Jedes HTML-Tag hat seine besondere Rolle und ist für eine bestimmte Situation gedacht. Also musst Du einfach das richtige HTML-Tag wählen, das für Deine Situation passt.

Das Bild zeigt einen Flussdiagramm, der den Algorithmus zur Auswahl eines HTML-Tags darstellt. Das Diagramm enthält Entscheidungsbäume mit Fragen wie "Is the text block accurate & relevant?" und "Does the text block have grammatical mistakes?", die zu verschiedenen HTML-Tags wie <u>, <b>, <em>, <strong>, und anderen führen. Der Titel des Diagramms lautet "Ausschnitt aus meinem Algorithmus zur Auswahl eines HTML-Tags".

Aber wann und wie werden die Tags ausgelesen und wie wird ihre Bedeutung interpretiert?

Jedes Mal, wenn jemand eine Webseite aufruft, fordert der Benutzeragent das HTML-Dokument vom Server an und analysiert den Code.

💡 Benutzeragent (User Agent) — Das ist eine Software, die im Namen des Benutzers handelt. Sie interpretiert Informationen aus dem Netzwerk und stellt sie dem Benutzer grafisch dar.

Ein Benutzeragent kann ein Webbrowser sein, der Webseiten anfordert, verarbeitet und anzeigt (z. B. Chrome, Firefox, Safari), ein E-Mail-Client, der E-Mails liest, oder ein Suchroboter, der das Internet durchsucht, um Webseiten zu indizieren.

Dabei wandelt der Benutzeragent den HTML-Code in einen strukturierten DOM-Baum um.

💡 DOM (Document Object Model) Baum — Das ist eine Programmierschnittstelle für Webdokumente. Sie stellt die Struktur des Dokuments in Form eines hierarchischen Baums dar, wobei jeder Knoten ein Objekt ist, das einen Teil des Dokuments repräsentiert.

Dies ist ein Modell, das verwendet wird, um strukturierte Dokumente in Form einer Objektstruktur darzustellen, sodass Programme, einschließlich Webbrowser, dynamisch auf den Inhalt, die Struktur und den Stil von Webseiten zugreifen und diese ändern können.

In diesem Baum wird jedes HTML-Tag in ein Objekt umgewandelt, mit eigenen Eigenschaften und Methoden.

Das Bild zeigt die Struktur einer Website in Form eines hierarchischen DOM-Baums. Es illustriert, wie verschiedene HTML-Elemente wie <head>, <body>, <title>, <a>, <h1>, <p>, und <figure> miteinander verbunden sind, um die Struktur der Website darzustellen.

Dadurch kann der Browser die Seite so anzeigen, wie sie gedacht ist.

Aber nicht nur das HTML-Tag alleine spielt eine Rolle, sondern auch seine Attribute.

Ein HTMLAttribut ist eine Zusatzinformation, die einem HTML-Tag angehängt wird.

Quelle: Hubspot

Alle relevanten Attribute und Tags sollten berücksichtigt werden, damit die Elemente auf Deiner Website sowohl für die Nutzer als auch für die Suchmaschinen verständlicher werden.

Also, jetzt haben wir die Grundlagen von HTML wiederholt.

Doch wie sieht es genau im Kontext der Bilder aus?

Best Practices für die Nutzung des <img>-Tags und seiner wichtigsten Attribute

Wahrscheinlich die am meisten verbreitete Variante, ein Bild auf einer Website anzuzeigen, ist die Verwendung des <img>-Tags.

Im Abschnitt 4.8.3 des HTML Living Standards ist die Rolle dieses Elementes auch ganz einfach definiert:

„Ein <img>-Element repräsentiert ein Bild.“

Quelle: HTML Living Standard, Abschnitt 4.8.3

Außerdem hat das <img>-Tag im HTML verschiedene Attribute.

Hier ist, wie ein typischer `<img>`-Tag aussieht:

Das Bild zeigt die Struktur des <img decoding=

Zwei der wichtigsten Attribute aus der Sicht der Suchmaschinenoptimierung (SEO) und Barrierefreiheit sind dabei alt und title.

Mit dem src-Attribut kannst Du Suchmaschinen die allerbeste Version Deines Bildes füttern, damit es in Google Images platziert wird.

Und mit dem srcset-Attribut kannst Du sicherstellen, dass Deine Nutzer je nach Bildschirmgröße das passendste Bild erhalten, um die Performance auf der Spitze zu halten.

Aber keine Sorge, ich erkläre Dir alles Schritt für Schritt.

Wofür braucht man das `alt`-Attribut und was gehört da rein?

alt im Namen des Attributs steht für “Alternative” und bedeutet eine alternative Bildbeschreibung des Bildes.

Diese erscheint, falls das eigentliche Bild fehlt. Zum Beispiel, wenn beim Laden des Bildes ein Fehler aufgetreten ist.

Das Bild zeigt eine HTML-Seite, auf der der alt-Text eines nicht geladenen Bildes sichtbar ist. Ein roter Pfeil weist auf die Textbeschreibung hin, die erscheint, wenn das Bild nicht geladen wird.

Im Abschnitt 4.3.8 des HTML Living Standards steht, dass das alt-Attribut ein alternativer Text ist, der das Bild beschreibt, aber kein Zusatz dazu ist.

Beim Schreiben des alt-Attributs denke ich immer so:

„Was würde ich in diesem Abschnitt schreiben, wenn es kein Bild gäbe?“

Beim Beantworten dieser Frage beschreibe ich nicht nur das, was direkt auf dem Bild zu sehen ist, sondern auch das, was mir das Bild sagen würde.

Also, was das Bild zum Text beiträgt.

Zum Beispiel, wenn Du einen Graphen zeigst, willst Du nicht nur beschreiben, dass da eine Kurve ist, die sich nach oben entwickelt, sondern auch sagen, was diese Tendenz eigentlich bedeutet.

Das würde ein Nutzer verstehen, der das Bild wirklich sehen würde. Doch jetzt gehen wir davon aus, dass er das nicht tut, und wir müssen ihm helfen.

Dies bietet auch einen großen Spielraum für SEO:

So kann der alternative Text im Allgemeinen geschrieben werden, indem man überlegt, was man geschrieben hätte, wenn man das Bild nicht hätte einfügen können.

Ein Korollar dazu ist, dass der Wert des alt-Attributs niemals Text enthalten sollte, der als Bildunterschrift, Titel oder Legende des Bildes betrachtet werden könnte.

Es soll Ersatztext enthalten, der von den Nutzern anstelle des Bildes verwendet werden kann; es ist nicht dazu gedacht, das Bild zu ergänzen. Das title-Attribut kann für ergänzende Informationen verwendet werden.

Quelle: HTML Living Standard, 4.8.4.4 Requirements for providing text to act as an alternative for images

Achtung: das Dasein oder Fehlen des alt-Attributs wird unterschiedlich interpretiert!

Hier sind vier Hinweise, die Du berücksichtigen musst:

  1. Wenn das alt-Attribut im <img>-Tag fehlt, stellt dies einen groben Verstoß gegen den HTML Living Standard dar. Jedes Bild muss ein alt-Attribut haben [1, 8].
  2. Wenn das alt-Attribut vorhanden, aber nicht ausgefüllt ist <img alt>, ist dies gleichbedeutend mit einem leeren String, was uns zum dritten Fall verweist [7, 8].
  3. Wenn das alt-Attribut als leerer String angegeben ist <img alt=””>, dann wird dieses Bild als dekorativ betrachtet (also wird das Bild von Suchmaschine einfach ignoriert, denn dekorative Bilder beeinflussen den Inhalt nicht).
  4. Wenn das alt-Attribut ausgefüllt ist <img alt=”Hello, World!”>, dann ist dieses Bild wichtig und wird von Suchmaschine als Inhalt berücksichtigt [4, 8].

Also, achte einfach darauf, dass Du die alternative Beschreibung immer ausgefüllt hast. Dann haben Deine Bilder eine bessere Chance darauf, bei Google angezeigt zu werden.

Falls Du aber wirklich nicht willst, dass das Bild von Google ausgelesen wird, ist es besser, dieses Element als Hintergrundbild mit CSS neu zu gestalten.

Nimm einfach ein HTML-Tag wie <span> oder <div> und füge eine CSS-Klasse hinzu:

HTML
<div class="dekoratives-bild"/> 

Und innerhalb dieser CSS-Klasse kannst Du Dein Bild in background-image erscheinen lassen:

CSS
background-image: url('./bilder/dein-dekoratives-bild.jpg') 

Laut W3C, stellst Du so sicher, dass die Suchroboter dieses Bild in keinem Fall als etwas interpretieren, das sich auf den Inhalt bezieht.

Zeit für Tipps: So kannst Du die Alt-Beschreibung mit KI schreiben lassen

Falls Du gar nicht weißt, wie Du die Alt-Texte für Deine Bilder schreiben sollst, empfehle ich Dir, einfach die KI wie ChatGPT dafür zu nutzen.

Dort kannst Du Dein Bild hochladen und zum Beispiel mit dem folgenden Prompt eine initiale Alt-Beschreibung generieren lassen:

Shell
Schreibe mir eine diskriptive Alt-Beschreibung für das beigefügte Bild. Schreibe diese als Fließtext.

Dann bekommst Du ein solches Ergebnis zum Beispiel:

Das Bild zeigt die Struktur des HTML--Tags und erläutert die verschiedenen Attribute und deren Werte. Das Tag selbst ist in roter Schrift mit der Bezeichnung "" dargestellt. Drei Attribute sind angegeben: "src", "alt" und "title". Der Wert des "src"-Attributs ist "/src/assets/portrait-business.webp", das "alt"-Attribut enthält den Text "Ein Junger Mann in Brille mit Frankfurter Skyline am Hintergrund", und das "title"-Attribut hat den Wert "Porträt von Dmitry Dugarev". Das Bild ist in einem zweifarbigen Schema gestaltet, wobei der linke Teil in hellrosa und der rechte Teil in hellblau gehalten ist. Die Attribute sind auf der linken Seite des Bildes aufgelistet, während die Werte auf der rechten Seite angegeben sind. Am unteren Rand des Bildes sind die Quelle und der Urheber des Bildes angegeben: "https://musnuss.de/blog/semantisches-html/bilder-optimierung-tipps" und "© Dmitry Dugarev".

Und so kannst Du diese Beschreibung direkt in den alt-Attribut einsetzen.

Falls Du WordPress nutzt, achte einfach darauf, dass Du beim Hochladen der Bilder unbedingt das Feld „Alternative Text“ ausfüllst.

Das Bild zeigt das Medien-Upload-Interface von WordPress. Ein roter Pfeil weist auf das Feld 'Alt Text' in den Attachment-Details hin. Der Text erklärt, dass in WordPress alle Bilder automatisch mit alt-Text versehen werden, wenn das Feld 'Alt Text' ausgefüllt ist.

Dann bist Du auf der sicheren Seite.

Alt-Beschreibung und Barrierefreiheit

Wie bereits erwähnt, erscheint der Alt-Text eines Bildes dann, wenn dieses nicht gesehen werden kann.

Doch gibt es eine Bevölkerungsgruppe, die Deine Bilder unter keinen Umständen visuell wahrnehmen kann – Menschen mit Sehbehinderungen.

Also, pass auf: Die Alt-Texte werden essenziell, wenn Menschen mit Sehbehinderungen Deine Website besuchen.

Weil sie Deine Website einfach nicht sehen, nutzen sie Hilfsprogramme, die wie deren Augen agieren – die sogenannten Screenreader.

Die Screenreader versuchen, den Inhalt Deiner Website zu interpretieren und vorzulesen.

Mit der ausgefüllten Alt-Beschreibung stellst Du sicher, dass Deine Bilder von Screenreadern nicht einfach übersprungen werden.

Die Screenreader lesen die Alt-Beschreibung als Erstes vor, wenn der Nutzer ein Bild ausgewählt hat.

Unten siehst Du ein Beispiel mit dem VoiceOver in macOS.

Das Bild zeigt einen Screenshot eines Designsystems mit visuellem Inhalt und HTML-Code auf der rechten Seite. Ein roter Pfeil zeigt auf den alt-Text im HTML-Code, der von VoiceOver vorgelesen wird.

Im schwarzen Kasten unten rechts ist das angezeigt, was der Screenreader gerade vorliest.

Achtung: Gemäß BFSG sollen alle Websites bis 2025 barrierefrei sein!

Deswegen ist es in Deinem besten Interesse, Deine Website so barrierefrei wie möglich zu gestalten.

Lies hier mehr darüber, wie Du Deine Website barrierefrei machst.

Alt-Beschreibung und Bilder SEO

Aber weißt Du, wer noch ohne Augen die Websites versucht zu verstehen?

Richtig! Der Herr Google

Durch die Auswertung der Alt-Texte können Suchmaschinen Dein Bild besser einordnen und bei der Suche ausgeben.

Deswegen ist die Alt-Beschreibung eine riesige Chance für SEO.

Also, die Alt-Tags können gerne ein Keyword enthalten, oder sogar mehrere, falls das organisch passt.

So kannst Du Deine Ranking-Chancen verbessern. Denn es ist sehr wahrscheinlich, dass Deine Konkurrenten gar keine alternative Beschreibung haben.

Aus meiner Erfahrung kann das vorkommen, dass selbst die, die bisher keine SEO gemacht haben, durch Alt-Beschreibungen auf die Spitze der Suchergebnisse bei Google Images kommen.

Was ist das `title`-Attribut und wie es sich von `alt` unterscheidet

Das title-Attribut steht für (Überraschung!) den Titel Deines Bildes.

„Beschreibt der Titel eigentlich nicht ausreichend das Bild? Schreibe ich dann im alt-Attribut dasselbe, wie im title-Attribut?“

Stopp!

Laut dem HTML Living Standard sind title und alt nicht dasselbe und werden von Benutzeragenten für verschiedene Zwecke verwendet.

title erscheint im Tooltip des Bildes, während alt eine alternative Beschreibung des Bildes ist, als ob es nicht im Dokument vorhanden wäre.

Das alt-Attribut stellt keine beratende Information dar. Benutzeragenten dürfen den Inhalt des alt-Attributs nicht auf die gleiche Weise darstellen wie den Inhalt des title-Attributs.

Quelle: HTML Living Standard, 4.8.4.4 Requirements for providing text to act as an alternative for images

Also, pass auf: alt-Attribut enthält die Beschreibung des Inhalts des Bildes, während title-Attribut die ergänzende Information zum Bild enthalten kann.

Wie sieht das dann aus, was Du im title schreibst?

Schau mal hier:

Das Bild zeigt einen Screenshot eines HTML-Dokuments mit einem Bild. Ein roter Pfeil zeigt auf den Tooltip, der den Text aus dem title-Attribut anzeigt, wenn man mit der Maus über das Bild fährt.

Jeder Besucher kann den Titel der Bilder sehen, wenn er über das Bild mit der Maus fährt.

Mit dem Titel hast Du die Möglichkeit, dem Nutzer zusätzliche Informationen zu geben, damit er besser versteht, worum es geht.

Außerdem hören Menschen mit Sehbehinderungen, die ein Bild sehen, den Inhalt des title-Attributs nach der alternativen Beschreibung.

Das Bild zeigt einen Screenshot eines Designsystems und den zugehörigen HTML-Code. Ein roter Pfeil zeigt auf das title-Attribut im HTML-Code, das von Screenreadern nach dem alt-Text vorgelesen wird.

So verbesserst Du die Nutzererfahrung aller Deiner Besucher, indem Du zusätzlichen Kontext gibst.

Und ja, Du kannst dort auch Deine schicken Keywords integrieren. So kann auch Google ganz genau verstehen, worum es in Deinem Bild geht.

Verbesserung der Performance und SEO mit dem `srcset`-Attribut

srcset-Attribut…

Jetzt wird es spannend. Es gibt nämlich ein altes Dilemma:

Google mag Bilder in höchster Qualität und mit IPTC-Meta Daten (dazu später mehr) im .jpg-Format. Doch solche Bilder wiegen deutlich mehr, was die Performance negativ beeinflusst…

Was ist denn wichtiger..? SEO oder Performance?

Mit dem srcset-Attribut kannst Du beide Seiten berücksichtigen. Dort kannst Du für verschiedene Bildschirmgrößen ein entsprechendes Bild eingeben.

Diese Bilder dürfen komprimiert und in modernen Formaten wie .webp oder .avif sein, da sie dem Nutzer angezeigt werden.

Das Bild, das Du im src-Attribut angegeben hast, wird hingegen von Google ausgelesen.

Adaptive Bilder im <img>-Tag mit srcset werden wie folgt angegeben:

HTML
<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="Eine Aquarellillustration einer Maine-Coon-Katze, die gemütlich vor einem Kamin schläft"
>

Genau funktioniert es so:

  1. Zuerst bestimmt der Browser die tatsächliche Medienabfrage. Angenommen, die Breite des Bildschirms des Geräts beträgt 480px, dann ist das tatsächliche (max-width: 480px). Das heißt, die Bildgröße 440px wird ausgewählt;
  2. Dann wird das am besten geeignete Bild aus dem srcset-Array ausgewählt, das der gewählten Größe entspricht. In diesem Fall ist es das Bild maine-coon-nap-480w.jpg. Dieses Bild wird geladen.

So machst Du Deine Bilder adaptiv. Websites mit adaptivem Design sind für die Nutzer bequemer, da sie auf den unterschiedlichsten Geräten angezeigt werden können.

Außerdem verbessert die Anpassungsfähigkeit die Gesamtleistung, da sie mit den Bildgrößen und -formaten zusammenhängt.

Und laut Google, leistung bedeutet eine Verbesserung der Konversionsraten um bis zu 33 % durch die Verbesserung der Benutzererfahrung und durch die Erhöhung der Seitenpositionen in der Suche.

Und das Beste dabei ist, dass wenn Du WordPress nutzt, das automatisch für Dich erledigt wird.

Du musst nur in den Einstellungen sicherstellen, dass die adaptiven Größen auch für Deine Website passen:

Das Bild zeigt die Einstellungen für Bildgrößen in WordPress. Es hebt die Optionen für mittlere und große Bildgrößen hervor, die in den srcset-Attributen der Bilder verwendet werden. Die Einstellungen werden im Menü unter 'Settings' und 'Media' konfiguriert.

Dann werden Deine Bilder automatisch zugeschnitten und im srcset-Attribut platziert und Deine Bilder werden adaptiv.

Achte einfach bei der Bildbearbeitung darauf, dass Dein Bild die bestmögliche Qualität hat.

Meine Bilder sind zum Beispiel alle in 2K-Qualität.

Mehr Kontext für extra SEO mit `<figure>`-Tag.

Jetzt weißt Du, wie es technisch aussieht, ein Bild optimal auf die Website einzusetzen.

Und wie Du mit der alt-Beschreibung und mit dem Titel den Suchmaschinen und Deinen Nutzern zusätzliches Kontext geben kannst, damit sie Deine Bilder noch besser verstehen.

Aber was, wenn Du noch deutlicher die kontextuelle Verbindung des Bildes mit dem Haupttext zeigen willst?

Weißt Du, wie in wissenschaftlichen Arbeiten, wo auf eine Abbildung im Text verwiesen wird? So wie Du es in Abbildung 1 sehen kannst. 😉

Das Bild zeigt eine wissenschaftliche Abbildung (Figure 2) mit drei Teilbildern. Das erste Teilbild zeigt ein Foto eines Tanks, das zweite eine schematische 3D-Darstellung des Tanks und das dritte eine Netzdarstellung des Simulationsgebiets. Der begleitende Text im Dokument verweist auf die Abbildung und beschreibt die räumlichen Dimensionen und die Meshing-Methode.
Abbildung 1: Beispiel eines Verweises auf Abbildung in einem wissenschaftlichen Paper.

Kann man dasselbe im Web machen?

So, mit schicker, Bildbeschriftung und allem Drum und Dran?

Ja, das geht!

Das <figure>-Tag ist super, um Illustrationen, Diagramme, Grafiken, Fotos und ähnliche Inhalte in Deine Webseite einzubauen und sicherzustellen, dass sie gut zum Text passen.

Dadurch wird nicht nur Deine Seite übersichtlicher, sondern auch zugänglicher für verschiedene Benutzer und Suchmaschinen.

Meistens benutzt man den <figure>-Tag zusammen mit <figcaption>, um eine Bildunterschrift oder Beschreibung hinzuzufügen.

Das hilft sowohl Deinen Besuchern als auch Suchmaschinen, den Kontext und die Bedeutung der Bilder besser zu verstehen.

Wenn Du <figure> und <figcaption> richtig einsetzt, machst Du Deine Webseite nicht nur semantisch klarer, sondern boostest auch noch Deine SEO durch zusätzliche Kontextualisierung.

Dafür musst Du einfach das <img> innerhalb von <figure> platzieren:

Das Bild zeigt eine HTML-Seite mit zwei Darstellungen: links eine Website mit HTML5, rechts ohne HTML5. Ein blauer und ein roter Pfeil weisen auf den HTML-Code hin, der das <figure>- und <figcaption>-Tag nutzt.

Vergiss nur nicht, im Haupttext auf die Figur zu verweisen, wie Du es in wissenschaftlichen Arbeiten machen würdest.

Ansonsten könnte Google die Verbindung nicht finden und Dein Bild als separate Entität betrachten. Das würde Deiner SEO mehr schaden als helfen.

Wichtig: die Screenreader lesen den Inhalt von <figcaption> als Erstes vor:

Das Bild zeigt zwei Ansichten einer HTML-Seite: links ein Vergleich von Websites mit und ohne HTML5 und rechts der HTML-Code. Ein roter Pfeil zeigt auf eine <figcaption>-Markierung im Code, die von Screenreadern zuerst vorgelesen wird.

Deswegen achte darauf, dass Du den Text in <figcaption> so schreibst, dass er Nutzer mit Sehbehinderungen motiviert, weiter auf das Bild zu klicken, um mehr zu erfahren.

Ein Code-Beispiel gefällig? Schau Dir das hier an:

HTML
<figure>
    <img
        src="/cat_chart.jpeg"
        alt="Im Januar 2023 gibt es einen großen Anstieg beim Kauf von Hauskatzen in Haushalten der Russischen Föderation. Nach diesem Datum ist jedoch ein starker Rückgang der Nachfrage zu beobachten. Das ist seltsam, denn in der gesamten Geschichte hat Russland Katzen immer geliebt."
        title="Diagramm der Anzahl der in der Russischen Föderation gekauften Hauskatzen nach Jahren">
    <figcaption>
        In diesem Bild zeigt die blaue Linie die Anzahl der in der Russischen Föderation gekauften Katzen. Daraus lässt sich schließen, dass Katzen ein wesentlicher Bestandteil der russischen Kultur sind.
    </figcaption>
</figure>

Beachte, dass das <figcaption>-Tag die Beschreibung des gesamten Inhalts von <figure> darstellt. Laut HTML Living Standard kann es eine Legende oder eine Unterschrift für den gesamten Inhalt sein.

Das heißt, wenn Du mehrere Bilder innerhalb von <figure> hast, bezieht sich die Beschreibung aus <figcaption> auf alle Bilder.

Hier ein weiteres Beispiel:

HTML
<figure>
    <img
        src="/image1.jpeg"
        alt="Im Mittelpunkt der Komposition des Gemäldes steht ein nachdenkliches Mädchen, das den Kopf gesenkt und auf einem Stein am Wasser sitzt. Ihr zerzaustes, ungebundenes rotes Haar, ihre einfache Kleidung und ihre groben Füße betonen das harte Schicksal des Kindes. Traurigkeit und Hoffnungslosigkeit spiegeln sich in ihren dunklen Augen wider, Einsamkeit und Resignation in ihrem Aussehen. Aber der Autor zeigt, dass nicht alles hoffnungslos ist, indem er Schwalben - ein Volkssymbol der Hoffnung - über dem Kopf des Mädchens darstellt. Gleichzeitig unterstreichen die Vögel die Wehrlosigkeit der Heldin, sie fürchten sie nicht und versuchen nicht zu fliehen."
        title="Aljonuschka (Gemälde von Wasnezow)">
    <img
        src="/image2.jpeg"
        alt="Ärmliche alte Leute, ein Mann und eine Frau, gezwungen, ihre frühere Wohnung zu verlassen, wandern über das Eis der Newa zu ihrem neuen Wohnort. Ihre Gesichter spiegeln Gefühle der Verwirrung und des Unverständnisses wider."
        title="Von Wohnung zu Wohnung (Gemälde von Wasnezow)">
    <figcaption>
        In Wasnezows Werk sind verschiedene Genres klar vertreten, die Stadien einer sehr interessanten Entwicklung darstellen: von der Genremalerei zur Märchenwelt, von der Staffeleimalerei zur Monumentalmalerei, von der Bodenständigkeit der Wanderer zur Vorläufer des Jugendstils. In der frühen Phase von Wasnezows Arbeiten überwogen Genremotive, zum Beispiel in den Gemälden „Von Wohnung zu Wohnung“ (1876), „Militärtelegramm“ (1878), „Buchladen“ (1876), „Jahrmarkt in Paris“ (1877).
    </figcaption>
</figure>

Jetzt weißt Du, wie Du den <figure>-Tag und <figcaption> optimal nutzen kannst, um Deine Bilder sinnvoll zu integrieren und Deine SEO zu verbessern.

In WordPress werden alle Bilder automatisch mit <figcaption> versehen, wenn Du das Feld 'Caption' ausgefüllt hast.

Das Bild zeigt das Medien-Upload-Interface von WordPress. Ein roter Pfeil weist auf das Feld 'Caption' in den Attachment-Details hin. Der Text erklärt, dass in WordPress alle Bilder automatisch mit dem <figcaption>-Tag versehen werden, wenn das Feld 'Caption' ausgefüllt ist.

Jedes Bildmaterial, das Du in WordPress auf Deine Seiten hinzufügst, erscheint als ein <img> innerhalb eines <figure> gegebenenfalls mit <figcaption>.

Aber noch mal: Vergiss nicht aus dem Haupttext auf die Bilder zu verweisen!

Ansonsten versteht Google nicht, wozu ist hier überhaupt ein Bild.

Sauber!

<aside>-Tag für Dekontextualisierung der Bilder

Im vorherigen Abschnitt habe ich mehrmals angemerkt, dass Du auf ein Bild im <figure>-Tag unbedingt verweisen musst.

Doch was, wenn Dein Bild nur am Rande etwas mit dem Hauptinhalt zu tun hat? Das musst Du auch lieber genau kennzeichnen, damit Google nicht verwirrt wird.

Im Abschnitt 4.4.12 von HTML Living Standard steht Folgendes dazu:

Für Inhalte, die nur am Rande mit dem Haupttext zu tun haben oder einem anderen Zweck als dem umgebenden Fluss dienen, sollte das <aside>-Element verwendet werden (und kann selbst ein <figure>-Element umschließen).

Zum Beispiel wäre ein hervorgehobenes Zitat, das Inhalte aus einem Artikel wiederholt, eher in einem <aside> als in einem <figure> geeignet, da es nicht Teil des eigentlichen Inhalts ist, sondern eine Wiederholung des Inhalts zu dem Zweck, Leser zu gewinnen oder wichtige Themen hervorzuheben.

Quelle: Abschnitt 4.4.12 von HTML Living Standard

Also, mache einfach das <aside>-Tag um das <figure>-Tag herum, um den Suchmaschinen klar die Rolle des Bildes zu kommunizieren.

Das ist ein Teil des semantischen HTML und unterstützt Google beim Verstehen Deiner Website. Das hilft wiederum Deiner SEO.

Erfahre mehr darüber, wie semantisches HTML Deiner SEO hilft.

Okay, aber wie machst Du das bei WordPress?

Wenn Du Dein Bild auswählst, drücke auf die drei Punkte oben rechts und wähle "Als HTML bearbeiten".

Das Bild zeigt ein Diagramm, das den Informationsfluss von einer Anwendung über einen Accessibility-Baum und assistive Technologien zu einem Benutzer darstellt. Daneben wird das Kontextmenü in WordPress angezeigt, mit einem hervorgehobenen Menüpunkt 'Edit as HTML', der es ermöglicht, den HTML-Code zu bearbeiten.

Dann kannst Du da das <aside>-Tag oben hinzufügen. Und vergiss nicht das Tag unten mit </aside> zu schließen.

Das Bild zeigt den HTML-Code eines Interface-Elements in WordPress. Der Code ist in einem -Tag eingebettet und enthält ein -Element mit einem Bild (-Tag) und einer Bildunterschrift (-Tag). Der Code beschreibt den Informationsfluss von einer Anwendung über einen Accessibility-Baum und assistive Technologien zu einem Benutzer.

Somit ist es erledigt und Dein Bild ist nun perfekt für Google gekennzeichnet.

So machst Du aus Deinem Bild ein Leckerli für Google Bildersuche

Und wenn wir schon beim Thema Google sind, gebe ich Dir ein paar Tipps dazu, wie Du Deine Bilder für Search Engine richtig attraktiv machst.

Optimiertes Bildmaterial ist entscheidend für eine bessere Sichtbarkeit und eine verbesserte Nutzererfahrung.

Strukturierte Daten und Bilder

Und zwar hast Du bestimmt schon mal über strukturierte Daten gehört. Sie helfen dabei, Deine Inhalte klar und präzise darzustellen, sodass Suchmaschinen diese besser interpretieren können.

Du könntest so etwa strukturierte Daten verwenden, um anzugeben, dass eine bestimmte Zahl auf Deiner Seite das Veröffentlichungsdatum eines Artikels ist oder ein Textabschnitt eine Produktbewertung darstellt.

Mit Bildern funktioniert das besonders gut. Denn Suchmaschinen können Bilder nicht so einfach „lesen“ wie Text.

Durch das Hinzufügen von strukturierten Daten kannst Du den Suchmaschinen wichtige Detail liefern, wie z.B. den Titel, die Beschreibung, den Urheber und das Datum der Erstellung.

Diese zusätzlichen Informationen können dazu beitragen, dass Deine Bilder in den Suchergebnissen besser platziert werden und mehr Traffic auf Deine Webseite bringen.

Hier ist ein Beispiel, wie Du strukturierte Daten für ein Bild manuell im JSON-LD-Format hinzufügen kannst. Dies könntest Du in den HTML-Code Deiner Seite für jedes Bild einfügen:

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "ImageObject",
  "contentUrl": "https://www.deinewebsite.com/bild.jpg",
  "creator": {
    "@type": "Person",
    "name": "Dein Name"
  },
  "datePublished": "2024-06-16",
  "description": "Eine detaillierte Beschreibung des Bildes.",
  "name": "Titel des Bildes",
  "license": "https://creativecommons.org/licenses/by/4.0/"
}
</script>

Ich empfehle Dir folgende Felder immer auszufüllen:

  • contentUrl: Stelle sicher, dass Du die vollständige URL des Bildes angibst.
  • creator: Gib den Namen des Urhebers des Bildes an. Das kann Dein eigener Name sein oder der Name des Fotografen.
  • datePublished: Das Datum, an dem das Bild veröffentlicht wurde.
  • description: Eine kurze, aber präzise Beschreibung des Bildes. Das hilft nicht nur den Suchmaschinen, sondern auch den Benutzern, die das Bild sehen.
  • name: Der Titel des Bildes. Wähle etwas Aussagekräftiges und Relevantes.
  • license: Wenn Dein Bild unter einer bestimmten Lizenz steht, gib die Lizenz-URL an. Das zeigt, wie andere das Bild verwenden dürfen.

Wenn Du WordPress verwendest, kenne ich leider keine Möglichkeit, die strukturierten Daten für jedes Bild hinzuzufügen. Doch es gibt eine Alternative für Dich. Und zwar die IPTC Meta Daten.

IPTC Meta Daten und warum ist es wichtig

IPTC-Meta Daten (International Press Telecommunications Council) sind standardisierte Informationen, die direkt in Dateien eingebettet werden können.

Diese Meta Daten enthalten wichtige Details wie den Titel, die Beschreibung, den Urheber und viele weitere Informationen über das Bild. Genauso wie die strukturierten Daten.

Sie bleiben aber immer mit dem Bild da.

Das heißt, wenn jemand Dein Bild auf seiner Website verwendet, ohne Dich zu fragen, wird das Bild von seiner Website durch Suchmaschinen weiterhin mit Dir assoziiert.

Du wirst auch zum Beispiel als Autor gezeigt:

Das Bild zeigt ein Beispiel von Google Images, in dem die IPTC-Metadaten eines Bildes angezeigt werden. Es enthält Informationen über den Ersteller und das Copyright des Bildes. Ein roter Rahmen hebt diese Informationen hervor.

IPTC-Meta Daten helfen zudem dabei, Deine Bilder besser auffindbar zu machen.

Wenn Du diese Meta Daten sorgfältig ausfüllst, können Suchmaschinen wie Suchmaschinen Deine Bilder besser indexieren und relevanter in den Suchergebnissen anzeigen.

Hier sind die wichtigsten IPTC Meta Daten, die ich immer ausfülle:

  • Titel (Title): Gib Deinem Bild einen aussagekräftigen Titel. Dies hilft Suchmaschinen und Benutzern, das Bild zu identifizieren.
  • Beschreibung (Description): Schreibe eine detaillierte Beschreibung des Bildes. Erkläre, was auf dem Bild zu sehen ist und warum es relevant ist.
  • Urheber (Creator): Trage Deinen Namen oder den Namen des Fotografen ein.
  • Copyright-Informationen (Copyright Notice): Füge eine Copyright-Notiz hinzu, um die Urheberrechte zu schützen.
  • Schlüsselwörter (Keywords): Verwende relevante Schlüsselwörter, die den Inhalt des Bildes beschreiben. Dies kann die Auffindbarkeit in der Suche erhöhen.

Google empfiehlt sie übrigens auch.

Wenn Du gerne prüfen möchtest, welche IPTC Meta Daten Dein Bild schon hat, dann kannst Du es gerne mit dem kostenlosen Tool exiftool machen.

Das Bild zeigt ein Konsolenfenster, in dem das Tool exiftool verwendet wird, um die IPTC-Metadaten einer Bilddatei zu überprüfen. Die Ausgabe enthält Informationen wie Dateiname, Dateityp, Auflösung, Copyright und andere Metadaten.

Nutze dafür das folgende Kommando:

Bash
exiftool -all [PFAD ZU DEINEM BILD]

Mit diesem Tool kannst Du auch den Inhalt der einzelnen Felder beliebig ändern. Zu Beispiel hier ändere ich den Inhalt des Feldes "Creator":

Das Bild zeigt drei Konsolenfenster, in denen das Tool exiftool verwendet wird, um IPTC-Metadaten einer Bilddatei zu ändern. Die Fenster zeigen die ursprünglichen Metadaten, den Befehl zur Änderung und die aktualisierten Metadaten. Rote Pfeile heben die geänderten Bereiche hervor.

Nutze dafür einfach das folgende Kommando:

Bash
exiftool -[NAME DES TAGS]="[NEUER WERT]" [PFAD ZU DEINEM BILD]

Alternativ kannst Du theexifer.net nutzen, um die IPTC-Meta Daten anzuschauen und zu ändern. Allerdings ist diese Methode zwar bequemer, aber nicht kostenlos.

Das Bild zeigt die Benutzeroberfläche der Website theexifer.net, auf der eine Datei hochgeladen wird, um IPTC-Metadaten anzuzeigen. Ein roter Pfeil zeigt auf ein Augensymbol, das zur Vorschau der IPTC-Daten verwendet wird.

Wenn Du WordPress verwendest, kannst Du sicherstellen, dass die IPTC-Meta Daten Deiner Bilder beim Hochladen erhalten bleiben:

  1. Installiere ein Plugin wie „Media Library Assistant“, das IPTC-Metadaten unterstützt.
  2. Aktiviere das Plugin und gehe zu den Einstellungen, um die IPTC-Unterstützung zu konfigurieren.
  3. Lade Deine Bilder hoch: Beim Hochladen in die Medienbibliothek werden die IPTC-Metadaten automatisch importiert.
  4. Überprüfe die Metadaten: Stelle sicher, dass alle wichtigen Felder korrekt ausgefüllt sind und bei Bedarf angepasst werden können.

Hinweis zur Platzierung der Bilder

In seinen Empfehlungen weist Google ausdrücklich darauf hin:

Google extrahiert Informationen über das Thema des Bildes aus anderem Inhalt auf der Seite, einschließlich Bildüberschriften und Bildunterschriften. Platzieren Sie Bilder nach Möglichkeit in der Nähe des zugehörigen Textes und auf thematisch verwandten Seiten.

Quelle: Best Practices für die Suchmaschinenoptimierung für Google Bilder | Google Search Central

Deswegen zur Platzierung: Deine Bilder müssen nur da sein, wo sich auch anderer verwandter Textinhalt befindet. Beispiel:

HTML
<html>
	<head>
		<title>Katzen - lustige Wesen</title>
	</head>
	<body>
		<section>
			<h2>Katzen - wie beruhigen sie?</h2>
			<p>Katzen sind die besten Freunde des Menschen. Durch ihr Verhalten und Aussehen machen sie den Menschen glücklich und beruhigen ihn dadurch, wie es auf dem Diagramm unten zu sehen ist.</p>
			<figure>
				<img
					src="/cat_chart.jpeg"
					alt="Im Januar 2023 gab es einen großen Anstieg
						beim Kauf von Hauskatzen in deutschen Haushalten.
						Nach diesem Datum ist jedoch ein starker Rückgang der Nachfrage zu beobachten.
						Das ist seltsam, denn in der gesamten Geschichte hat Deutschland Katzen immer geliebt.
					"
					title="Diagramm der Anzahl der in Deutschland gekauften Hauskatzen nach Jahren">
				<figcaption>
					Auf Grundlage des Diagramms ist klar, dass die Beliebtheit von Katzen zunimmt.
					Könnte das daran liegen, dass sie beruhigen?
				</figcaption>
			</figure>
		</section>
	</body>
</html>

Achte also beim Einfügen von Bildern immer darauf, dass sie in der Nähe von dem relevanten Content platziert sind, damit Google sie richtig einordnen kann.

Hinweis zur Benennung der Bilddateien

In seinen Empfehlungen weist Google ausdrücklich darauf hin:

Der Dateiname kann nahezu die gleiche Funktion wie Überschriften und Bildunterschriften erfüllen. Dateinamen sollten kurz und informativ sein (z. B. mein-neues-schwarzes-kätzchen.jpg ist besser als IMG00023.JPG). Vermeiden Sie nach Möglichkeit standardisierte und nichtssagende Dateinamen wie bild1.jpg, pic.gif, 1.jpg.

Quelle: Best Practices für die Suchmaschinenoptimierung für Google Bilder | Google Search Central

Das heißt, alle Dateinamen sollten beschreiben, was direkt auf dem Bild zu sehen ist.

Wenn die Dateinamen nicht aus lateinischen Zeichen bestehen, müssen sie gemäß den URL-Codierungsregeln mit Prozentzeichen verwendet werden.

Zum Beispiel für кот.jpeg: %D0%BA%D0%BE%D1%82.jpeg

Wichtiger Hinweis zum Bildinhalt

Google erkennt das, was auf dem Bild ist.

Daher musst Du berücksichtigen, dass, wenn Google in Deinen Bildern etwas Schockierendes oder Erotisches erkennt, besondere Indexierungs- und Anzeigeregeln auf Deine Website angewendet werden oder diese möglicherweise ganz verboten wird.

Hier ist eine Liste besonderer Themen von Google, für die spezielle Regeln gelten können:

  • Werbung;
  • Gefährliche Inhalte;
  • Betrug;
  • Belästigung;
  • Anstiftung zum Hass;
  • Gefälschte Medieninhalte;
  • Medizinische Inhalte;
  • Produkte mit eingeschränktem Verkehr;
  • Sexuelle Inhalte;
  • Gewalttätiger, extremistischer Inhalt;
  • Szenen von Gewalt und Grausamkeit;
  • Grobe und obszöne Sprache.

Um zu überprüfen, wie Google Ihre Bilder sieht, kannst Du das neuronale Netzwerk SafeSearch verwenden. Mehr dazu hier.

Beispiel einer perfekten Bildgestaltung

Ein ideales Bild enthält die gesamte empfohlene Menge an Meta Daten und ist wie folgt gestaltet:

HTML
<html>
	<head>
		<title>Katzen - lustige Wesen</title>
	</head>
	<body>
		<section>
			<h2>Katzen - wie beruhigen sie?</h2>
			<p>Katzen sind die besten Freunde des Menschen. Durch ihr Verhalten und Aussehen machen sie den Menschen glücklich und beruhigen ihn dadurch. Das ist sehr deutlich auf dem Diagramm unten zu sehen</p>
			<figure>
				<img
					srcset="cat_chart-320w.jpg 320w, cat_chart-480w.jpg 480w, cat_chart-800w.jpg 800w"
				  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
					src="/cat_chart-800w.jpeg"
					alt="Im Januar 2023 gibt es einen großen Anstieg
						beim Kauf von Hauskatzen in Haushalten der Russischen Föderation.
						Nach diesem Datum ist jedoch ein starker Rückgang der Nachfrage zu beobachten.
						Das ist seltsam, denn in der gesamten Geschichte hat Russland Katzen immer geliebt.
					"
					title="Diagramm der Anzahl der in der Russischen Föderation gekauften Hauskatzen nach Jahren">
				<figcaption>
					Auf Grundlage des Diagramms ist klar, dass die Beliebtheit von Katzen zunimmt.
					Könnte das daran liegen, dass sie beruhigen?
				</figcaption>
			</figure>
		</section>
	</body>
</html>

Das Bild im <img>-Tag hat eine alt-Beschreibung, einen Titel und ist außerdem durch die Anwendung des srcset-Attributs adaptiv.

Außerdem befindet sich das Bild im <figure>-Tag und enthält eine <figcaption> für mehr Kontextualisierung und Verbesserung der SEO.

Damit die Suchmaschinen das Bild dem Content genau zuordnen können, befindet es sich in der Nähe des relevanten Titels und der Absätze der Sektion.

Außerdem wird aus dem Haupttext genau auf die Abbildung verwiesen. Das stellt sicher, dass die Suchmaschinen das Bild richtig zuordnen.

Checkliste zur perfekten Bildoptimierung

Jetzt weißt Du: optimierte Bilder sind mega wichtig für Deine Website. Sie sorgen nicht nur dafür, dass alles schneller lädt und besser aussieht, sondern bringen Dich auch weiter nach oben bei Google Images.

Wenn Du HTML-Tags wie <img>, <figure> und <figcaption> richtig benutzt und die Alt-Texte sowie title-Attribute sorgfältig einfügst, verstehen Suchmaschinen und Besucher Deine Bilder viel besser.

Strukturierte Daten und IPTC-Meta Daten geben Deinen Bildern noch mehr Schub, indem sie wichtige Infos liefern und die Auffindbarkeit verbessern.

Mit der richtigen Bildoptimierung verkürzt Du die Ladezeiten und verbesserst die gesamte Benutzererfahrung.

Am Ende führt das zu mehr Reichweite, mehr Traffic und einer barrierefreien Website.

Hier ist noch mal die Zusammenfassung aller besprochenen Punkte in Form einer Checkliste:

So, jetzt bist Du bestens gerüstet, um Deine Bilder für die Suche zu optimieren.

Also, leg los und mach Deine Bilder fit für’s Web!

Beste Grüße
Dmitry Dugarev

P.S.: Falls Du bei der Optimierung Deiner Bilder Unterstützung brauchst, oder allgemein noch Fragen hast, buche Dir gerne einen Termin bei mir. Beratung ist bei mir immer kostenlos.

Alternativ bin ich auch über Mail erreichbar: support@musnuss.de

Bonus #1: Unterstützung unterschiedlicher Dateiformate mit dem `<picture>`-Tag

Wenn Du Dein Bild in mehreren Formaten zur Verfügung stellen möchtest, um sicherzustellen, dass Dein Bild in jedem Browser angezeigt wird, kannst Du das mit dem Tag <picture> machen:

HTML
<picture>
  <source type="image/avif" srcset="pyramid.avif">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="Ein Ölgemälde der Großen Pyramide aus den 1800er Jahren">
</picture>
<picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank trägt einen Anzug und eine Brille." id="a">
</picture>

Beim Scannen berücksichtigt Google nur das <img>-Tag, während der Browser das Bild auswählen kann, das er am besten unterstützt.

Das heißt, wenn jemand die Website im Internet Explorer öffnet, lädt der Browser das .png-Bild und nicht das neue Format, was nur in modernen Browsers unterstützt wird.

Der Nachteil dieser Methode besteht aber darin, laut Chrome for Developers, dass dabei mehr Tags verwendet werden und das DOM-Baum dadurch wächst.

Das kann die Performance Deiner Website etwas verringern.

Bonus #2: Das beste Tool zur Komprimierung der Bilder

Ein nützliches Tool zur Komprimierung von Bildern ist Squoosh (siehe Abbildung unten).

Das ist eine Webanwendung, die es Dir ermöglicht, die Dateigröße Deiner Bilder signifikant zu reduzieren, ohne dabei erhebliche Qualitätseinbußen in Kauf nehmen zu müssen.

Das Bild zeigt eine Benutzeroberfläche für ein Bild-Optimierungstool, vermutlich Squoosh, mit der Funktionalität, Bildgröße und Qualität zu bearbeiten, um die Dateigröße zu reduzieren. Das Bild ist dreigeteilt: Links: Hier wird eine Webseite in der mobilen Ansicht dargestellt, die gleiche wie im vorherigen Screenshot, mit Informationen über einen Dienstleister, der sich auf die Erstellung von responsiven SEO-Websites spezialisiert. Ein Button bietet "1:1 Website Beratung buchen" an, und ein Profilbild mit einer Bewertung ist sichtbar. Mitte: Das DevTools-Fenster zeigt die Element-Inspektion dieser Webseite. Es ist in HTML-Code gegliedert, der die Struktur der Seite zeigt. Mehrere Reiter sind im DevTools-Fenster sichtbar, darunter "Console" und "Rendering". Rechts: Ein Teil des Bildschirms zeigt die Benutzeroberfläche des Squoosh-Tools. Es bietet Optionen zur Bildoptimierung an, darunter die Anpassung von Methode, Auflösung, Farbprofil und Qualität des Bildes. Die aktuelle Dateigröße vor und nach der Optimierung wird unten angezeigt. Der Benutzer kann die Qualität des Bildes durch Regler einstellen, was sich direkt auf die Größe der Datei auswirkt. Dieses Bild demonstriert, wie eine Kombination aus Webentwicklung und Bildoptimierungswerkzeugen in einer Entwicklerumgebung verwendet wird, um die Leistung und Effizienz von Webseiten zu verbessern.

Wie Du siehst, konnte ich die Dateigröße um 86 % verringern. Fühl Dich frei, mit den Einstellungen dort zu spielen, um das beste Ergebnis zu bekommen.

Häufig gestellte Fragen

Warum sind Bilder für SEO wichtig?

Bilder tragen zur Nutzererfahrung bei und können zusätzlichen Traffic über die Google-Bildersuche generieren.

Was ist der Alt-Text und warum ist er wichtig?

Der Alt-Text beschreibt den Inhalt eines Bildes und ist wichtig für die Barrierefreiheit und Suchmaschinenoptimierung.

Wie kann ich die Ladezeit meiner Bilder verbessern?

Nutze das srcset-Attribut und das <picture>-Tag, um unterschiedliche Bildgrößen und -formate bereitzustellen.

Was sind strukturierte Daten?

Strukturierte Daten sind ein standardisierter Weg, um zusätzliche Informationen über Inhalte bereitzustellen, die Suchmaschinen helfen, diese besser zu verstehen.

Warum sollte ich IPTC-Metadaten verwenden?

IPTC-Metadaten helfen Suchmaschinen, wichtige Informationen über Deine Bilder zu erfassen und verbessern deren Auffindbarkeit und Schutz vor Missbrauch.

Quellen

  1. <img>-Tag | HTML Living Standard
  2. Empfehlungen zur Suchmaschinenoptimierung von Bildern bei Google
  3. Suchmaschinenoptimierung für Google Bilder | Search Central Lightning Talks
  4. Allgemeine Richtlinien zur Verwendung des alt-Attributs
  5. Detailliertes Handbuch zur Verwendung des alt-Attributs
  6. <figcaption>-Tag | HTML Living Standard 
  7. Über die Bedeutung von Attributen in HTML
  8. Zusätzliche Informationen zur Verwendung von alt vom W3C
  9. Wie Bild-Metadaten in Google Bilder verwendet werden
  10. Vermeiden Sie eine übermäßige DOM-Größe
  11. IPTC-Standard
  12. Richtlinien für Inhalte in der Google-Suche
  13. Richtlinien für Spam in der Google-Suche
  14. Richtlinien für die Arbeit mit dem sicheren Suchen
  15. Warum Geschwindigkeit wichtig ist
  16. Adaptive Bilder – HTML Living Standard
  17. Adaptive Bilder – Mozilla

Hinterlasse Deine E-Mailerhalte einen Termin + Bonus dazu 🎁

Es ist Zeit, durchzustarten und Deine Website auf das nächste Level zu heben. Hier ist, was wir während der kostenlosen Website Beratung angehen:

Hinterlasse Deine E-Mail und mach den ersten Schritt, um Deine Website zum Magnet für Suchende zu machen!

Gebe Deine E-Mail-Adresse im Format max.mustermann@mail.de ein. Gebe Deine Branche ein, damit ich mich besser auf unser Gespräch vorbereiten kann. Klicke hier, um Deine Terminanfrage zu senden und den Bonus zu erhalten.

P.S.: Bist Du noch am Überlegen? Dann hier ist ein kleiner Anreiz für Dich:

Wenn du die Terminanfrage stellst, und wir uns tatsächlich treffen, bekommst Du:

  • BONUS: Checkliste mit 55 Tipps für perfekte SEO-Blogbeiträge für B2B 2024 - Ein E-Book mit den besten SEO-Praktiken für Blogbeiträge, die 2024 relevant sind.

Ich hoffe das reicht. Ich freue mich auf unser Gespräch und bin gespannt, was wir gemeinsam erreichen können!

Meine Unterschrift, die aus einem durchgestrichenen Buchstaben D besteht, der in kyrilischer Schreibschrift geschrieben ist

Beste Grüße
Dmitry Dugarev