Ultimativer Leitfaden zur Bildoptimierung für SEO

Die Optimierung von Bildern ist ein entscheidender Schritt, um Deine Website schneller zu machen, bei Google besser sichtbar zu sein und ein angenehmes Nutzererlebnis zu bieten. Rankingwerk GmbH zeigt Dir, wie Du mit modernen Formaten wie WebP und AVIF, präzisen Alt-Texten und effektiver Komprimierung Deine SEO-Performance deutlich verbessern kannst.

Die wichtigsten Punkte im Überblick:

• Schnellere Ladezeiten: Durch Bildkomprimierung und moderne Formate wie WebP oder AVIF.
• SEO-Boost: Dateinamen, Alt-Texte und Metadaten machen Bilder für Google verständlich.
• Barrierefreiheit: Alt-Texte helfen Screenreadern, Bilder zu beschreiben.
• Responsive Bilder: Mit srcset und <picture> nur die nötigen Bildgrößen laden.
• Tools & Plugins: Automatisiere die Optimierung mit Tools wie TinyPNG, ShortPixel oder Smush.

Mit Rankingwerk GmbH sparst Du Zeit und Ressourcen, während wir dafür sorgen, dass Deine Website technisch und visuell überzeugt. Lass uns Deine Bilder fit für die Spitzenplätze bei Google machen!

Welche Bildformate eignen sich für Websites?

Die Wahl des passenden Bildformats ist entscheidend, um Ladezeiten zu verkürzen und Ihre Suchmaschinenplatzierung zu verbessern. Jedes Format hat besondere Eigenschaften, die je nach Einsatzzweck optimal genutzt werden können.

JPEG, PNG, WebP und SVG: Wann nutzen Sie welches Format?

JPEG ist ideal für Fotos und Bilder mit vielen Farben und Verläufen. Dieses Format verwendet verlustbehaftete Kompression, wodurch die Dateigröße reduziert wird, allerdings auf Kosten der Bilddetails. Transparenz wird nicht unterstützt.

PNG ist perfekt für Logos, Icons, Screenshots und Grafiken, die Transparenzen erfordern. Es nutzt verlustfreie Kompression, was jedes Pixel bewahrt, aber bei Fotos zu größeren Dateien führen kann. Für einfache Grafiken mit wenigen Farben empfiehlt sich PNG-8 anstelle von PNG-24, da dies bis zu 80 % Speicherplatz sparen kann.

SVG ist ein Vektorformat und basiert auf mathematischen Formeln anstelle von Pixeln. Dadurch bleibt es auf jedem Gerät gestochen scharf, egal ob Smartphone oder 4K-Bildschirm. SVG eignet sich hervorragend für Logos, Icons und Illustrationen und bietet kleine Dateigrößen sowie Anpassungsmöglichkeiten über CSS.

WebP kombiniert verlustbehaftete und verlustfreie Kompression und unterstützt Transparenz sowie Animationen. Mit über 97 % Browser-Unterstützung ist WebP seit 2026 ein Standardformat.

Neben diesen bekannten Formaten setzen sich moderne Alternativen wie WebP und AVIF immer weiter durch.

WebP und moderne Bildformate

Neuere Formate wie WebP und AVIF bieten klare Vorteile in Sachen Performance. WebP reduziert die Dateigröße im Vergleich zu JPEG um 25 % bis 34 %, ohne dass die Bildqualität merklich leidet. Bei verlustfreier Kompression sind WebP-Dateien sogar 26 % kleiner als PNGs. Dies sorgt für kürzere Ladezeiten, bessere Core Web Vitals und weniger Absprünge. Schon 100 Millisekunden weniger Ladezeit können die Conversion-Rate um bis zu 7 % steigern.

AVIF setzt noch einen drauf: Es komprimiert Bilder 20 % bis 50 % stärker als WebP, ohne sichtbare Qualitätseinbußen. Mit einer Browser-Unterstützung von rund 92 % Anfang 2026 wird AVIF zunehmend zur bevorzugten Wahl für hochwertige Fotografien. Das HTML-Element <picture> ermöglicht es, AVIF für kompatible Browser bereitzustellen und gleichzeitig WebP oder JPEG als Fallback zu nutzen.

Moderne CDNs und Content-Management-Systeme übernehmen die Auswahl des optimalen Formats automatisch basierend auf den Fähigkeiten des Browsers. So sparen Sie Zeit und stellen sicher, dass jeder Nutzer die beste Bildversion erhält.

Die Wahl des richtigen Bildformats ist ein zentraler Baustein für eine erfolgreiche Optimierungsstrategie. Sie verbessert nicht nur die Ladezeiten, sondern stärkt auch Ihre SEO-Performance nachhaltig.

sbb-itb-d7049ad

Wie helfen Dateinamen, Alt-Texte und Metadaten bei der Bildoptimierung?

Suchmaschinen nutzen textbasierte Informationen, um Bilder zu verstehen. Dateinamen, Alt-Texte und Metadaten liefern diese Details und machen gleichzeitig Ihre Website barrierefrei für Nutzer mit Sehbehinderungen. Zusammen mit der Wahl optimaler Bildformate und Komprimierung tragen sie entscheidend zur Verbesserung Ihrer SEO-Performance bei. Hier erfahren Sie, wie diese Elemente Ihre Bildoptimierung unterstützen können.

Wie schreiben Sie aussagekräftige Dateinamen?

Ein gut gewählter Dateiname wie „berliner-fernsehturm-alexanderplatz.jpg" oder „automodell-xy-2010.jpg" hilft Suchmaschinen, den Inhalt eines Bildes besser zu verstehen und stärkt den thematischen Zusammenhang. Dagegen bieten generische Namen wie „IMG_1234.jpg" oder „Foto_1_12_2010.jpg" kaum Mehrwert für die Suchmaschinenoptimierung.

Benennen Sie Ihre Bilder vor dem Hochladen um und verwenden Sie Bindestriche statt Unterstriche, da Suchmaschinen Bindestriche als Leerzeichen interpretieren. Der Dateiname sollte immer zum Kontext der Seite passen. Zum Beispiel: Ein Bild eines Autoinnenraums sollte „auto-innenraum-modell-x.jpg" heißen und neben einem entsprechenden Textabschnitt platziert werden. So entsteht eine klare URL-Struktur, die zusätzlich als Rankingfaktor wirkt.

Neben den Dateinamen spielt auch der Alt-Text eine wichtige Rolle für Barrierefreiheit und SEO.

Was macht guten Alt-Text für Barrierefreiheit und SEO aus?

Alt-Texte haben zwei Hauptaufgaben: Sie beschreiben Bilder für Screenreader und liefern Suchmaschinen wertvolle Kontextinformationen. Ein gut geschriebener Alt-Text verbessert nicht nur Ihr Ranking in der Google Bildersuche, sondern macht Ihre Website auch für sehbehinderte Nutzer zugänglicher.

Beschreiben Sie genau, was auf dem Bild zu sehen ist, anstatt nur Keywords aneinanderzureihen. Zum Beispiel: „Rote Laufschuhe auf Holzuntergrund mit Schnürsenkeln" bietet mehr Mehrwert als „Schuhe Laufschuhe Sport kaufen günstig". Vermeiden Sie dabei Füllwörter wie „Bild von" oder „Foto zeigt", da Screenreader bereits erkennen, dass es sich um ein Bild handelt.

Die ideale Länge eines Alt-Texts liegt bei 70 bis 100 Zeichen oder etwa 12 Wörtern. Jeder Alt-Text sollte einzigartig sein und nicht für mehrere Bilder auf einer Seite verwendet werden. Für rein dekorative Bilder können Sie ein leeres Alt-Attribut (alt="") nutzen, damit Screenreader diese überspringen.

Platzieren Sie Bilder in der Nähe von relevantem Text und ergänzen Sie sie mit Bildunterschriften, um den Zusammenhang weiter zu stärken. Die Kombination aus einem präzisen Dateinamen, einem gut formulierten Alt-Text und der passenden Positionierung sorgt für eine bessere SEO-Performance und ein zugänglicheres Nutzererlebnis.

Wie komprimieren und skalieren Sie Bilder richtig?

Bilder machen oft bis zu 60 % des Gewichts einer Website aus. Daher ist es entscheidend, sie effizient zu komprimieren und zu skalieren, um schnelle Ladezeiten und eine bessere SEO-Performance zu erreichen.

Wie komprimieren Sie Bilder effektiv?

Mit einer smarten verlustbehafteten Komprimierung können Sie die Dateigröße drastisch reduzieren – oft um bis zu 80 %. Dabei werden Farbinformationen entfernt, die für das menschliche Auge kaum wahrnehmbar sind. Für JPEG-Bilder empfiehlt sich ein Qualitätswert von 75–85, um die Dateigröße um 40–60 % zu senken. Entfernen Sie zusätzlich unnötige EXIF-Daten, um weitere 10–50 KB einzusparen.

Verwenden Sie Tools wie TinyPNG, Squoosh oder ImageOptim, um Bilder effizient zu optimieren. Hier ein Überblick über nützliche Tools:

Nach der Komprimierung ist es ebenso wichtig, die Bilder an die tatsächliche Anzeigegröße anzupassen.

Wie skalieren Sie Bilder auf die tatsächliche Anzeigegröße?

Neben der Komprimierung spielt die richtige Skalierung eine entscheidende Rolle. Sie spart Bandbreite und verbessert die Ladezeiten Ihrer Website.

Laden Sie keine Bilder in einer höheren Auflösung hoch, als tatsächlich benötigt wird. Passen Sie die Bilder vor dem Upload an die gewünschte Darstellungsbreite an, z. B. zwischen 320 und 1.280 Pixel. Überdimensionierte Bilder verschwenden Bandbreite und verlangsamen den Largest Contentful Paint (LCP), einen zentralen Faktor der Core Web Vitals.

Richten Sie sich bei der Dateigröße nach folgenden Richtwerten:

• Standardbilder: Unter 150 KB
• Große Hero-Bilder: Maximal 500 KB

Die DPI-Werte (Dots per Inch) spielen für die Webnutzung keine Rolle. Entscheidend sind allein die Pixelmaße. Nutzen Sie Tools wie Google PageSpeed Insights, um übergroße Bilder zu identifizieren und die Einsparpotenziale in Kilobyte zu ermitteln.

Mit einer präzisen Skalierung und Komprimierung erzielen Sie schnellere Ladezeiten, ein besseres Nutzererlebnis und ein höheres SEO-Ranking – ein klarer Vorteil für den Erfolg Ihrer Website.

Wie nutzen Sie responsive Bilder und Performance-Features?

Deine Website wird auf unterschiedlichsten Geräten dargestellt – vom kleinen Smartphone bis hin zum großen 4K-Monitor. Mit responsiven Bildern stellst Du sicher, dass jedes Gerät nur die Bilddateien lädt, die es tatsächlich benötigt. Das spart Bandbreite, reduziert Ladezeiten und verbessert die Core Web Vitals.

Wie setzen Sie srcset und <picture>-Tags für verschiedene Geräte ein?

Mit srcset kannst Du dem Browser verschiedene Bildversionen anbieten. Der Browser wählt dann automatisch die passende Datei aus – je nach Bildschirmgröße und Pixeldichte. Dabei helfen Breitenangaben wie 800w oder 1200w, um die Flexibilität zu maximieren. Das sizes-Attribut legt fest, bei welchen Breakpoints ein Bild in welcher Breite dargestellt werden soll, z. B. (max-width: 600px) 100vw für mobile Geräte.

Das <picture>-Element bietet Dir noch mehr Möglichkeiten. Damit kannst Du nicht nur moderne Bildformate wie WebP bereitstellen, sondern auch Art Direction nutzen, um für verschiedene Geräte optimierte Bildausschnitte auszuliefern. Während WebP-Dateien oft nur 30 KB groß sind, erreichen JPEGs etwa 45 KB und PNGs sogar 100 KB. Vergiss nicht, ein Standard-src-Attribut hinzuzufügen, damit auch ältere Browser ohne srcset ein Bild anzeigen können.

Hast Du die Bildauslieferung optimiert, kannst Du mit Lazy Loading und Browser-Caching weitere Vorteile für die Ladezeit herausholen.

Wie verbessern Lazy Loading und Browser-Caching die Performance?

Lazy Loading sorgt dafür, dass Bilder erst geladen werden, wenn sie in den sichtbaren Bereich scrollen. Bilder, die unterhalb der Falte liegen, sollten mit loading="lazy" versehen werden. Für kritische Bilder, die den Largest Contentful Paint (LCP) beeinflussen, empfiehlt sich fetchpriority="high".

Mit Browser-Caching speicherst Du bereits geladene Bilder lokal auf den Geräten der Nutzer. Bei einem erneuten Besuch oder bei der Navigation zwischen Seiten werden diese Bilder direkt aus dem lokalen Speicher geladen, ohne dass der Browser erneut den Server kontaktieren muss. Auf Deinem Server solltest Du deshalb lange Cache-Control-Header (z. B. ein Jahr) konfigurieren, da Bilddateien selten geändert werden. In Kombination mit srcset speichert der Browser so nur die tatsächlich benötigten Bildgrößen.

Vodafone konnte 2022 durch die Optimierung des LCP eine Umsatzsteigerung von 8 % sowie eine 15%ige Verbesserung der Visitor-to-Lead-Rate erzielen. Der LCP wurde dabei um 31 % verbessert[1].

Dieses Beispiel zeigt deutlich, wie wichtig die richtige Priorisierung und das gezielte Laden nicht-kritischer Inhalte für den Erfolg eines Unternehmens sind.

Wie helfen Image Sitemaps und strukturierte Daten bei der Indexierung?

Eine Image Sitemap ist eine spezielle XML-Datei, die Suchmaschinen dabei unterstützt, Bilder zu finden – auch solche, die durch JavaScript geladen werden. Sie enthält eine Liste aller Bild-URLs und kann zusätzliche Informationen wie Bildunterschriften, Titel, geografische Daten oder Lizenzangaben bereitstellen. So wird die Indexierung beschleunigt und sichergestellt, dass auch visuelle Inhalte in den Suchergebnissen sichtbar werden. Hier erfahren Sie, wie Sie Image Sitemaps erstellen und strukturierte Daten effektiv einsetzen.

Studien zeigen, dass die Nutzung von Image Sitemaps die Indexierungsrate um 40–60 % steigern kann. Eine Sitemap kann bis zu 50.000 Bilder umfassen, wobei die unkomprimierte Datei maximal 50 MB groß sein darf. Für kleinere Websites können Bildinformationen direkt in die Standard-sitemap.xml integriert werden, anstatt eine separate Datei zu erstellen.

Wie erstellen Sie Image Sitemaps?

Eine gültige Image Sitemap benötigt den Namespace xmlns:image="http://www.google.com/schemas/sitemap-image/1.1". Die wichtigsten Elemente sind:

• <url>: Die URL der Seite, auf der sich das Bild befindet.
• <image:image>: Der Container für die Bilddaten.
• <image:loc>: Die absolute URL des Bildes.

Zusätzlich können optionale Tags wie <image:caption> (Bildunterschrift) oder <image:title> (Titel) verwendet werden, um weiterführende Informationen bereitzustellen. Wichtig: Nutzen Sie immer absolute URLs und prüfen Sie die XML-Syntax mit Tools wie dem Google Sitemap Testing Tool, bevor Sie die Sitemap über die Google Search Console einreichen.

Viele CMS wie WordPress bieten Plugins (z. B. Yoast SEO oder RankMath), die Image Sitemaps automatisch erstellen und aktualisieren. Achten Sie darauf, nur relevante und hochwertige Bilder aufzunehmen. Dekorative Elemente wie Icons oder Platzhalter sollten nicht in der Sitemap enthalten sein.

Wie nutzen Sie strukturierte Daten für Bilder?

Neben der Image Sitemap sind strukturierte Daten entscheidend, um Bilder in den Suchergebnissen optimal darzustellen. Mit Schema.org-Markup können Sie Bilder so kennzeichnen, dass sie als Rich Results erscheinen – etwa mit Preisangaben bei Produktbildern oder Bewertungen bei Rezepten. Während die Sitemap die Auffindbarkeit verbessert, sorgt das Markup dafür, dass Google die Bilder korrekt einordnet und in speziellen Suchergebnissen hervorhebt.

Nutzen Sie beispielsweise das <image:license>-Tag in der Sitemap oder Schema.org-Markup, um Lizenzinformationen anzugeben. So können Sie sicherstellen, dass Ihre Bilder mit Lizenz-Badges in der Google Bildersuche angezeigt werden.

Welche zusätzlichen Tipps verbessern Ihre Bildoptimierung?

Neben den technischen Anpassungen gibt es weitere Maßnahmen, die Ihre Bildoptimierung voranbringen.

Warum sollten Sie originale, hochwertige Bilder verwenden?

Eigene Bilder sorgen für Vertrauen und machen Ihre Website unverwechselbar. Im Gegensatz zu Stock-Fotos, die oft unpersönlich wirken und schnell erkannt werden, vermitteln eigene Aufnahmen Professionalität und Glaubwürdigkeit. Damit Ihre Website dennoch schnell lädt, sollten Sie die Bilder auf die erforderliche Breite verkleinern – so können Sie die Dateigröße um mehr als 90 % reduzieren. Moderne Bildformate wie WebP helfen zusätzlich, die Ladezeiten zu verbessern, ohne die Qualität zu beeinträchtigen.

Warum gehört Text nicht in Bilder?

Text, der in Bildern eingebettet ist, bleibt für Suchmaschinen unsichtbar. Das hat zur Folge, dass wichtige Inhalte nicht für Ihr SEO-Ranking berücksichtigt werden. Zudem sind solche Texte für Screenreader nicht zugänglich, was die Barrierefreiheit Ihrer Website einschränkt. Ein weiteres Problem: Auf mobilen Geräten wird der Text oft unleserlich, und auf hochauflösenden Bildschirmen wirkt er unscharf. Stattdessen sollten Sie HTML und CSS nutzen, um Text über Bilder zu legen. So bleibt der Inhalt durchsuchbar, übersetzbar und auf allen Endgeräten gestochen scharf.

Welche WordPress-Tools automatisieren die Bildoptimierung?

Um den Prozess der Bildoptimierung zu erleichtern, bieten sich verschiedene WordPress-Plugins an. Diese Tools übernehmen viele Schritte automatisch:

• Smush: Mit über einer Million aktiven Installationen ist Smush eines der beliebtesten Plugins. Es bietet verlustfreie Kompression und Lazy Loading, was die Ladezeiten deutlich verbessert.
• ShortPixel: Dieses Plugin überzeugt durch hohe Kompressionsraten und unterstützt moderne Formate wie WebP und AVIF.
• Optimole: Hier erfolgt die Optimierung in der Cloud, ergänzt durch ein globales CDN mit über 450 Standorten. Bilder werden in Echtzeit angepasst, was besonders praktisch ist.

Für große Bildarchive ist Smush eine kostengünstige Lösung, während Optimole mit seiner vollautomatischen Optimierung punktet. Unabhängig vom Plugin sollten Sie immer die Konvertierung in moderne Formate wie WebP aktivieren – das steigert die Geschwindigkeit Ihrer Website deutlich.

Fazit

Die Optimierung von Bildern ist ein entscheidender Baustein Ihrer SEO-Strategie. Mit der richtigen Kombination aus Dateiformaten, Komprimierung und präzisen Metadaten können Sie Ladezeiten verkürzen und Ihre Sichtbarkeit in Suchmaschinen deutlich verbessern. Angesichts der Tatsache, dass fast 38 % der Suchergebnisse Bilder enthalten, verschenken Sie wertvollen Traffic, wenn Sie dieses Potenzial nicht nutzen.

Moderne Formate wie WebP, der Einsatz von srcset für responsive Bilder und Lazy Loading helfen dabei, Ladezeiten drastisch zu reduzieren – ein klarer Vorteil für Ihr Ranking. Gleichzeitig profitieren Nutzer von einer schnelleren Seite, was die Absprungrate senkt, da niemand gerne auf langsame Seiten wartet. Zusätzlich tragen beschreibende Dateinamen und Alt-Texte dazu bei, die Barrierefreiheit zu verbessern. Screenreader können Inhalte so besser zugänglich machen, und Suchmaschinen verstehen den Kontext Ihrer Bilder genauer.

Verwenden Sie nach Möglichkeit originale Bilder statt generischer Stock-Fotos, vermeiden Sie Texte innerhalb von Bildern und nutzen Sie Tools wie WordPress-Plugins, um wiederkehrende Aufgaben zu automatisieren. Diese Maßnahmen sorgen nicht nur für schnellere Ladezeiten, sondern stärken auch Ihr SEO-Profil – ein entscheidender Vorteil im Wettbewerb um organischen Traffic. Mit diesen Techniken legen Sie den Grundstein für eine nutzerfreundliche, schnelle und suchmaschinenoptimierte Website.

FAQs

WebP oder AVIF – welches Format soll ich nutzen?

Moderne Bildformate wie WebP und AVIF sind entscheidend, wenn es um SEO und die Performance Deiner Website geht. AVIF punktet mit herausragender Kompression und Bildqualität, wird jedoch noch nicht von allen Browsern unterstützt. WebP hingegen bietet eine gute Balance aus Kompression und Qualität und ist mit deutlich mehr Browsern kompatibel.

Unser Tipp: Nutze AVIF, wenn Du die maximale Performance und beste SEO-Ergebnisse erzielen möchtest. Falls die Kompatibilität Vorrang hat, ist WebP die ideale Wahl.

Wie finde ich die ideale Bildgröße pro Seite?

Die richtige Bildgröße auf Deiner Website ist entscheidend – nicht nur für die Ladezeit, sondern auch für Deine SEO-Performance. Für Bilder, die über die gesamte Breite der Seite gehen, sind maximal 1920 Pixel optimal. Für alle anderen Bilder genügen 1200 Pixel, um eine ansprechende Darstellung zu gewährleisten.

Eine Auflösung von 72 dpi sorgt dabei für eine gute Balance zwischen Bildqualität und Dateigröße.

Unser Tipp: Komprimiere Deine Bilder, bevor Du sie hochlädst. So kannst Du die Ladezeit Deiner Seite spürbar verkürzen, ohne dass die Bildqualität merklich leidet. Tools wie TinyPNG oder Squoosh können Dir dabei helfen.

Brauche ich eine Image-Sitemap?

Eine Image-Sitemap ist besonders nützlich, wenn Ihre Website zahlreiche Bilder enthält oder Sie sicherstellen möchten, dass diese besser von Suchmaschinen erfasst werden. Sie trägt dazu bei, die Indexierung Ihrer Bilder zu verbessern und gibt Ihnen mehr Kontrolle darüber, wie diese dargestellt werden. Für kleinere Websites ist sie zwar nicht unbedingt erforderlich, kann jedoch eine sinnvolle Ergänzung sein, um die Sichtbarkeit Ihrer Bilder gezielt zu steigern.

Verwandte Blogbeiträge

• Checkliste: Website-Relaunch in 12 Schritten
• Webdesign Bonn
• Website Speed Test zur Performance-Überprüfung
• So wirst Du bei Google gefunden.