Image Optimization
Was ist Image Optimization?
Image Optimization bezeichnet die technische und inhaltliche Optimierung von Bildern für Websites. Sie reduziert Dateigrößen, liefert passende Abmessungen und Formate aus und ergänzt verständliche Bildinformationen. Dadurch sinkt die übertragene Datenmenge, der PageSpeed verbessert sich und Suchmaschinen können Bilder sowie ihren Seitenkontext besser erfassen.
Image Optimization wird auf Deutsch als Bildoptimierung bezeichnet und verbindet Dateikompression, passende Bildmaße, moderne Formate, responsive Auslieferung und Bild-SEO. Das Ziel ist ein Bild, das auf dem jeweiligen Gerät scharf erscheint, möglichst wenige Daten überträgt und von Browsern, Suchmaschinen sowie unterstützenden Technologien korrekt verstanden wird.
Wie funktioniert Image Optimization?
Image Optimization beginnt vor dem Upload. Ein Foto mit 4.000 Pixeln Breite sollte nicht unverändert eingebunden werden, wenn es auf der Website maximal 800 Pixel breit erscheint. Die Reduzierung der Abmessungen entfernt Bilddaten, die der Browser zwar laden muss, für die Darstellung aber nicht benötigt. Für hochauflösende Displays kann im Beispiel eine Variante mit 1.600 Pixeln sinnvoll sein. Welche Größe geladen wird, steuern anschließend responsive Bildattribute.
Die Dateikompression reduziert zusätzlich die Datenmenge. Bei verlustfreier Kompression bleiben die Bildinformationen vollständig erhalten. Verlustbehaftete Kompression entfernt dagegen Details, die visuell möglichst wenig auffallen. Entscheidend ist das Verhältnis aus Dateigröße und wahrnehmbarer Qualität. Eine kleinere Datei ist kein Fortschritt, wenn Schrift, Produktdetails oder wichtige Kontraste dadurch unleserlich werden.
Bildformate richtig auswählen
Der Unterschied zwischen Bildformat und Kompression liegt in ihrer Funktion. Das Format bestimmt, wie Bildinformationen gespeichert und welche Eigenschaften unterstützt werden. Die Kompression beeinflusst, wie viele dieser Informationen in der Datei verbleiben. Ein ungeeignetes Format kann deshalb auch nach starker Kompression größer sein als eine besser passende Alternative.
| Format | Geeignet für | Wichtige Eigenschaft |
|---|---|---|
| JPEG | Fotos und detailreiche Motive | Verlustbehaftete Kompression, keine Transparenz |
| PNG | Grafiken, Screenshots und transparente Flächen | Verlustfreie Speicherung, häufig größere Dateien |
| WebP | Fotos und Grafiken im Web | Unterstützt verlustfreie und verlustbehaftete Kompression |
| AVIF | Hochwertige Fotos bei geringer Datenmenge | Effiziente Kompression, Browserunterstützung prüfen |
| SVG | Logos, Icons und einfache Illustrationen | Skalierbar ohne Qualitätsverlust |
SVG eignet sich für geometrische Grafiken, ist aber keine sinnvolle Wahl für gewöhnliche Fotos. PNG wird häufig für jedes Motiv verwendet, obwohl Transparenz oder verlustfreie Speicherung gar nicht benötigt werden. Prüfe das Format daher nach dem Bildinhalt und nicht nach einer pauschalen Regel.
Image Optimization für den PageSpeed
Der PageSpeed hängt unter anderem davon ab, wie viele Bytes der Browser übertragen, dekodieren und darstellen muss. Große Bilder im sichtbaren Seitenbereich können den Aufbau der Hauptinhalte verzögern. Bilder unterhalb des sichtbaren Bereichs lassen sich dagegen verzögert laden. Dieses Lazy Loading reduziert die anfängliche Datenmenge, weil die Dateien erst bei Annäherung an den sichtbaren Bereich angefordert werden.
Lazy Loading ist für das zentrale Titelbild einer Seite häufig ungeeignet. Muss der Browser dieses Bild erst nachträglich anfordern, kann sich die Darstellung des größten sichtbaren Inhalts verzögern. Lege für wichtige Bilder außerdem Breite und Höhe fest. Der Browser kann den benötigten Platz dann vor dem Download reservieren und unerwartete Layoutverschiebungen vermeiden.
Responsive Bilder verhindern, dass ein Smartphone dieselbe große Datei wie ein Desktop-Bildschirm laden muss. Über srcset stellt die Website mehrere Dateien bereit. Das Attribut sizes beschreibt, wie breit das Bild im Layout erscheint. Der Browser wählt daraus eine passende Quelle, bevor er die Bilddatei vollständig herunterlädt.
PageSpeed von Bildern messen
Messbar ist Image Optimization zum Beispiel so: Vergleiche vor und nach der Optimierung die übertragene Bilddatenmenge, die geladenen Bildabmessungen und die Darstellung des größten sichtbaren Elements. Der Technik-Crawler der Performance Suite prüft unter anderem große Bilddateien, fehlende Alt-Attribute und technische Auffälligkeiten. Ergänzend zeigt ein Ladezeitentest, wie die Seite unter Desktop- und Mobilbedingungen reagiert.
Prüfe den PageSpeed deiner Website direkt mit dem kostenlosen Ladezeiten-Check:
Image Optimization für SEO und GEO
Image Optimization unterstützt SEO über zwei getrennte Wege. Kleinere und passend ausgelieferte Bilder verbessern die technische Seitenerfahrung. Aussagekräftige Dateinamen, Alt-Texte und ein verständlicher Seitenkontext helfen Suchmaschinen zusätzlich, den Bildinhalt einzuordnen. Ein Dateiname wie rote-wanderschuhe.jpg liefert mehr Kontext als IMG_4728.jpg.
Der Alt-Text beschreibt die relevante Aussage eines Bildes für Nutzer, die das Bild nicht sehen können. Ein Produktfoto kann beispielsweise mit Modell, Farbe und dargestellter Perspektive beschrieben werden. Rein dekorative Bilder erhalten ein leeres Alt-Attribut, damit Vorlesesoftware sie überspringt. Keyword-Listen im Alt-Text verschlechtern die Verständlichkeit und ersetzen keine präzise Beschreibung.
Für GEO, also Generative Engine Optimization, zählt vor allem die eindeutige Verbindung aus Bild, Beschriftung und umgebendem Inhalt. Ein Diagramm ist für KI-Systeme leichter einzuordnen, wenn eine Bildunterschrift die Aussage benennt und der Fließtext die Daten erklärt. Wichtige Informationen sollten deshalb nie ausschließlich als Text innerhalb einer Grafik vorliegen.
Im SEA beeinflusst Image Optimization vor allem die Zielseite. Ein Klick auf eine Anzeige führt direkt in einen messbaren Nutzungsvorgang. Verzögern große Produktbilder oder Banner die Darstellung, beginnt dieser Vorgang später. Prüfe deshalb insbesondere Kampagnen-Landingpages und deren sichtbare Hauptbilder. Der Ratgeber zu Technik-Checks für Google Ads zeigt weitere technische Prüfpunkte für Zielseiten.
Image Optimization und Bild-SEO
Der Unterschied zwischen Image Optimization und Bild-SEO liegt im Umfang. Image Optimization umfasst die gesamte technische und visuelle Aufbereitung eines Bildes. Bild-SEO konzentriert sich auf die Auffindbarkeit und das Verständnis durch Suchmaschinen. Eine komprimierte Datei ohne Alt-Text ist technisch optimiert, aber inhaltlich unvollständig. Ein perfekt beschriebener Alt-Text gleicht wiederum keine unnötig große Bilddatei aus.
Typische Fehler bei Bildern
Ein häufiger Fehler ist die alleinige Konzentration auf das Dateiformat. Eine WebP-Datei ist nicht automatisch optimiert, wenn sie wesentlich größere Abmessungen als die sichtbare Darstellung besitzt. Ebenso löst ein Kompressionsdienst keine Probleme mit fehlenden responsiven Varianten, ungünstiger Ladepriorität oder Layoutverschiebungen.
Externe Bilder können die Kontrolle über Image Optimization einschränken. Ändert der externe Anbieter die Datei, den Pfad oder die Auslieferung, wirkt sich das unmittelbar auf deine Seite aus. Wichtige Bilder sollten deshalb über die eigene Domain oder ein kontrolliertes Content Delivery Network bereitgestellt werden. Weitere technische Zusammenhänge erklärt der Leitfaden zu den wichtigsten SEO-Maßnahmen im Technikbereich.
Häufige Fragen zur Image Optimization
Wie stark sollte man Bilder für Websites komprimieren?
Es gibt keine Qualitätsstufe, die für jedes Bild passt. Komprimiere die Datei schrittweise und prüfe das Ergebnis in der tatsächlichen Darstellungsgröße. Texte, Produktdetails, Kanten und Farbverläufe müssen klar bleiben.
Ist WebP immer besser als JPEG?
WebP kann bei vergleichbarer Qualität kleinere Dateien ermöglichen, ist aber nicht in jedem Einzelfall automatisch überlegen. Vergleiche Dateigröße und Bildqualität nach der Konvertierung. Für Fallbacks oder spezielle Arbeitsabläufe kann JPEG weiterhin sinnvoll sein.
Sollte jedes Bild Lazy Loading verwenden?
Nein. Bilder unterhalb des sichtbaren Bereichs eignen sich meist für Lazy Loading. Ein zentrales Titelbild im zuerst sichtbaren Bereich sollte früh angefordert werden, damit sich die Darstellung des Hauptinhalts nicht verzögert.
Wie groß darf ein Website-Bild sein?
Eine feste Dateigröße gilt nicht für alle Bilder. Ab 1 MB lohnt sich eine gezielte Prüfung besonders. Die passende Größe hängt von Abmessungen, Motiv, Qualitätsbedarf und Position auf der Seite ab.
Brauchen dekorative Bilder einen Alt-Text?
Dekorative Bilder benötigen keine inhaltliche Beschreibung und erhalten ein leeres Alt-Attribut. Informative Bilder brauchen dagegen einen präzisen Alt-Text, der ihre Aussage im jeweiligen Seitenkontext vermittelt.
Kann Image Optimization automatisiert werden?
Viele Schritte wie Skalierung, Formatumwandlung, Kompression und die Erzeugung responsiver Varianten lassen sich automatisieren. Eine visuelle Qualitätskontrolle bleibt nötig, weil unterschiedliche Motive und Anwendungsfälle verschiedene Einstellungen verlangen.
Wenn Bilder einen großen Anteil an der Ladezeit ausmachen, lohnt sich eine technische Gesamtprüfung der Website. Der Potenzialcheck ordnet Bilddateien, PageSpeed und weitere SEO-Faktoren im Zusammenhang ein.
Kostenlosen Potenzialcheck anfragen
Sie haben noch Fragen?
