Bilder in Elementor optimieren

Ein Foto kann in Elementor klein aussehen und trotzdem viele Daten übertragen. Der Editor steuert die Darstellung. WordPress, Hosting und Optimierungsplugins bestimmen mit, welche Datei Besucher erhalten. Dieser Leitfaden erklärt das Zusammenspiel bei Bild-Widgets, Container-Hintergründen und dem ersten großen Bild einer Seite.

Wähle die passende Bildauflösung im Widget

Wähle ein Image-Widget und öffne den Reiter Content. Suche nach Image Resolution; manche Widgets oder ältere Versionen nennen die Einstellung Image Size. Damit wählst du eine WordPress-Bildgröße wie Medium, Large oder Full. Die separaten Regler Width und Max Width bestimmen den Platz im Layout. Die Dokumentation zum Image-Widget erklärt diese Einstellungen.

Full bedeutet nicht einfach „Spalte ausfüllen“. Die Einstellung wählt die Bilddatei in voller Größe als Quelle. Bei einem großen Upload kann WordPress bereits eine verkleinerte Vollversion erstellt haben. Es handelt sich also nicht immer um das unveränderte Kameraoriginal. Näheres erläutert die WordPress-Referenz zur Erzeugung von Bildgrößen.

Auch der Browser entscheidet mit: Enthält das veröffentlichte Bild srcset und sizes, kann er anhand des Layouts, der Pixeldichte und seiner Ladelogik eine verfügbare Bilddatei auswählen. Full garantiert deshalb nicht, dass jeder Besucher die größte Datei lädt. Eine passende Widget-Auflösung und sinnvoll bemessene Ausgangsdatei sind dennoch eine bessere Grundlage als das alleinige Vertrauen auf die Automatik.

Diese Maße sind Beispiele und keine Elementor-Vorgaben. Die registrierten WordPress-Größen hängen von Einstellungen, Theme und Plugins ab. Auch die Höhe muss für den gewünschten Zuschnitt ausreichen. Die doppelte Anzeigebreite kann auf hochauflösenden Displays helfen. Es bleibt aber eine Abwägung zwischen Qualität und Dateigröße, keine Pflicht zum Export aller Bilder in doppelten Abmessungen.

Eine benutzerdefinierte Auflösung über Custom kann helfen, wenn die Standardgrößen nicht passen. Prüfe den Zuschnitt und ob das veröffentlichte Bild weiterhin geeignete responsive Varianten anbietet. Custom verbessert die Auslieferung nicht grundsätzlich und schaltet responsive Bilder auch nicht zwangsläufig ab.

Änderungen an Style → Width oder Max Width verkleinern oder komprimieren die gespeicherte Datei nicht. Responsive Bildangaben können dem Browser zur Auswahl einer kleineren Version verhelfen. Eine geringere sichtbare Breite allein beweist aber keine geringere Datenübertragung.

Optimiere Container-Hintergründe für Mobilgeräte

Ein Bild aus den Einstellungen Style → Background eines Containers oder Abschnitts wird gewöhnlich zum CSS-Hintergrund. Anders als ein HTML-Bild hat es keine Attribute für srcset oder sizes. Stellt kein anderes Auslieferungssystem Alternativen bereit, kann deshalb auch ein Smartphone den Desktop-Hintergrund laden.

Überlege zuerst, ob das Bild überhaupt in den Hintergrund gehört. Eine dekorative Textur oder ein Stimmungsbild kann dort sinnvoll sein. Produktfotos, Diagramme und Bilder mit wesentlichen Informationen sind meist als Image-Widget besser aufgehoben: Dort können sie Alternativtext und responsive Bildvarianten erhalten.

So gehst du vor, wenn der Hintergrund auf Mobilgeräten einen anderen Bildaufbau braucht:

1. Wähle den Container oder Abschnitt und öffne Style → Background.
2. Wechsle über die responsive Steuerung des Hintergrundbilds zum mobilen Breakpoint, sofern dein Editor diese anbietet.
3. Wähle eine mobile Kopie mit einem Zuschnitt passend zu den Container-Proportionen. Ein hoher Hero-Bereich braucht möglicherweise ein Hochformat, ein flaches Banner weiterhin ein Querformat.
4. Wähle Cover, wenn das Bild die Fläche unverzerrt füllen soll. Cover erhält die Proportionen und schneidet überstehende Bildteile ab.
5. Passe die Hintergrundposition so an, dass das Motiv sichtbar bleibt. Prüfe neben dem Breakpoint auch benachbarte Bildschirmbreiten.

Kontrolliere auf der veröffentlichten mobilen Seite Container-Höhe, Textkontrast und Bildanforderung. Ein anderer Zuschnitt kann den Bildaufbau verbessern. Weniger Daten werden aber nur übertragen, wenn die mobile Variante die größere Datei tatsächlich ersetzt. Ein ausgeblendeter Desktop-Abschnitt garantiert nicht, dass seine Bilder nie angefordert werden.

Lade das wichtigste Hero-Bild ohne Verzögerung

Largest Contentful Paint (LCP) misst, wann das größte sichtbare Inhaltselement im anfänglichen Bildschirmausschnitt erscheint. Das kann ein Hero-Bild, ein Hintergrundbild oder ein Textblock sein. Ermittle im Leistungsbericht das tatsächliche LCP-Element, bevor du Bildprioritäten änderst.

Lazy Loading ist für Bilder weiter unten auf der Seite sinnvoll. Beim wichtigen Hero-Bild kann es den Start jedoch verzögern, weil der Browser erst ermittelt, wann das Bild benötigt wird. Googles Leitfaden zur LCP-Optimierung empfiehlt, das LCP-Bild früh auffindbar zu machen und nicht verzögert zu laden.

• Beginne mit Elementors Automatik: Aktiviere Optimized Image Loading in den unten beschriebenen Leistungseinstellungen und prüfe anschließend die veröffentlichte Ausgabe.
• Prüfe andere Lazy-Loading-Systeme: Cache- oder Bildoptimierungsplugins können das Ergebnis verändern. Verzögert eines davon das Hero-Bild, nimm das betreffende Bild oder Element über dessen Ausnahmeeinstellung aus.
• Unterscheide sofortiges Laden und Priorität: Ein HTML-Bild ohne Lazy Loading kann regulär laden. loading="eager" fordert dieses Verhalten ausdrücklich an; fetchpriority="high" ist ein separater Prioritätshinweis. Allen Bildern hohe Priorität zu geben, verfehlt den Zweck.
• Prüfe Hero-Hintergründe gesondert: Sie verwenden nicht die Ladeattribute eines Bildelements. Ist der Hintergrund das LCP-Element und beginnt seine Anforderung spät, prüfe, wann CSS oder Lazy-Loading-Skript die Bild-URL zugänglich machen. Kleinere Abmessungen allein beseitigen diese Verzögerung nicht.
• Hinterfrage Hero-Slider: Ein einzelnes statisches Bild lässt sich leichter priorisieren. Behältst du einen Slider, prüfe, ob verdeckte Slides beim Laden mit dem ersten sichtbaren Bild konkurrieren.

Reserviere den Bildplatz vor dem Laden

Cumulative Layout Shift (CLS) misst unerwartete Bewegungen sichtbarer Inhalte. Kennt der Browser den Platzbedarf eines Bildes nicht, können Texte und Schaltflächen beim Erscheinen verrutschen. Bildabmessungen helfen, diesen Platz vorab zu reservieren.

1. Behalte Breiten- und Höhenattribute: Die übliche WordPress-Bildausgabe enthält sie normalerweise. Sie beschreiben die Proportionen und lassen sich mit responsivem CSS kombinieren.
2. Definiere den Bildrahmen: Reserviere bei einheitlich zugeschnittenen Karten Platz über ein passendes Seitenverhältnis oder feste Layoutmaße. Nutze Widget-Einstellungen oder bei Bedarf CSS aspect-ratio. Soll ein Bild einen festen Rahmen ausfüllen, erhält object-fit: cover beim Zuschneiden die Proportionen.
3. Teste Vorlagen mit unterschiedlichen Inhalten: Prüfe in Theme Builder oder Loop Grid Beiträge mit querformatigen, hochformatigen und fehlenden Beitragsbildern. Gib der Karte einen verlässlichen Bildbereich und bei Bedarf ein Ersatzbild.

Ein CSS-Hintergrund verleiht seinem Container keine natürliche Höhe. Den Platz bestimmen Layout, Inhalt, Innenabstand oder Mindesthöhe. Prüfe diese Einstellungen an allen Breakpoints, statt darauf zu vertrauen, dass die Hintergrunddatei den Abschnitt offen hält.

Prüfe Galerien, Karussells und Lightboxes getrennt

Eine Galerie zeigt zunächst eine kompakte Übersicht und soll nach dem Öffnen eines Bildes genügend Details bieten. Für diese beiden Aufgaben können unterschiedliche Dateien sinnvoll sein.

• Wähle die Auflösung nach der sichtbaren Slide oder Karte: Ein Karussell mit vier kleinen Bildern braucht nicht dieselbe Auflösung wie ein einzelnes Bild über die volle Breite. Prüfe auch Mobilgeräte: Werden weniger Slides gleichzeitig gezeigt, kann jedes Bild breiter werden.
• Trenne Vorschau und vergrößerte Ansicht: Wähle eine geeignete Auflösung fürs Raster und richte Media File als Linkziel sowie Lightbox ein, wenn Besucher Bilder vergrößern sollen. Optimiere auch die größere Datei. Prüfe die Anforderungen vor und nach dem Öffnen; das Vorladen kann unterschiedlich ausfallen.
• Prüfe die Loop-Vorlage: Passe bei Archivkarten und Loop Grids das Featured-Image-Widget im Loop-Element an. Wiederholt sich ein übergroßes Bild, kann das gesamte Archiv viel Datenvolumen verursachen, obwohl jede Karte klein wirkt.

Wähle ein Format passend zum Bild

Vergleiche Formate bei gleichen Abmessungen und einer Qualität, die du tatsächlich veröffentlichen würdest. Eine feste prozentuale Ersparnis für alle Bilder gibt es nicht.

• WebP: Ein guter Ausgangspunkt für Fotos und viele Illustrationen. Unterstützt verlustbehaftete und verlustfreie Komprimierung sowie Transparenz. Probiere JPG in WebP oder PNG in WebP aus und prüfe feine Details und Kanten.
• JPG: Praktisch für Fotos, wenn ein anderer Arbeitsschritt es verlangt. Passe die Qualität durch Vergleiche an, statt einen Prozentwert als allgemeingültig anzusehen.
• PNG: Geeignet für verlustfreie Grafiken, Screenshots und Arbeitsabläufe, die PNG benötigen. Transparenz allein ist kein Grund, PNG statt WebP zu wählen. PNG-Fotos sind oft deutlich größer als geeignete verlustbehaftete Exporte.
• AVIF: Für Fotos einen Vergleich wert, wenn WordPress, Hosting und Optimierungssystem es unterstützen. Teste Verarbeitung nach dem Upload und veröffentlichte Auslieferung, bevor du die ganze Mediathek konvertierst.
• SVG: Geeignet für Vektorlogos und Symbole. Verwende vertrauenswürdige Quellen und beachte Elementors Hinweise zum SVG-Upload, einschließlich Bereinigung der Dateien und Vorsichtsmaßnahmen.

Unser Leitfaden zu Bildformaten fürs Web erklärt die jeweiligen Vor- und Nachteile genauer.

Bereite jedes Bild für seinen Einsatzort vor

Bewahre das Original separat auf und erstelle eine Website-Version. So bleibt auch die Vollversion handhabbar, was bei Hintergründen und aus Galerien geöffneten Bildern wichtig ist.

1. Ermittle die größte Anzeigebreite: Prüfe Desktop und Mobilgeräte. Ein Bild neben Text kann auf einem Tablet eine ganze Zeile einnehmen und dadurch breiter werden.
2. Schneide passend zum Layout zu: Entferne mit dem Bildzuschnitt-Werkzeug unnötige Flächen, ohne das Motiv zu verlieren. Lasse Platz für überlagerten Text.
3. Ändere die Größe einer Kopie: Vergleiche mit der Bildgrößenanpassung geeignete Abmessungen. Vergrößere eine kleine Quelle nicht bloß, um eine voreingestellte Breite zu erreichen.
4. Komprimiere und prüfe: Nutze die Bildkomprimierung und vergleiche den Export in der vorgesehenen Anzeigegröße. Ein Hero-Bild mit 100–200 KB oder ein Inhaltsbild unter 100 KB kann als Ausgangsziel dienen. Was sinnvoll ist, hängt von Details, Abmessungen und dem gesamten Seitengewicht ab.
5. Vergib Namen und Beschreibung: Verwende einen beschreibenden Dateinamen wie office-reception.webp. Formuliere Alt-Text passend zur Funktion eines inhaltlich wichtigen Bildes; dekorative Bilder benötigen üblicherweise einen leeren Alt-Text. Befolge Googles Hinweise zur Bild-SEO, ohne eines der Felder mit Keywords zu füllen.

Optimiert ein Plugin den Upload erneut, vergleiche das letztlich ausgelieferte Bild. Wiederholte verlustbehaftete Komprimierung kann feine Strukturen oder Text beschädigen, selbst wenn jede einzelne Qualitätseinstellung vernünftig erscheint.

Prüfe Elementors Leistungseinstellungen für Bilder

Nach der aktuellen Elementor-Dokumentation findest du diese Einstellungen im WordPress-Dashboard unter Elementor → Editor → Settings → Performance. Ältere Installationen können anders aufgebaut sein. Der offizielle Leitfaden zu Leistungseinstellungen unterscheidet die Reiter Performance und Features.

• Optimized Image Loading: Hilft, das wahrscheinliche LCP-Bild zu priorisieren, und verwaltet Lazy Loading weiter unten. Siehe Elementors Anleitung zur Ladeoptimierung. Prüfe das tatsächliche Ergebnis, besonders wenn weitere Plugins das Bild-Markup verändern.
• Lazy Load Background Images: Verzögert laut Elementor-Dokumentation das Laden der Hintergrundbilder mit Ausnahme des ersten. Prüfe, ob der oben sichtbare Hintergrund deiner konkreten Seite rechtzeitig lädt.

Aktiviere Änderungen einzeln, leere die betreffenden Caches und teste die veröffentlichte Seite. Die Einstellungen beeinflussen das Ladeverhalten; passende Abmessungen und Dateikomprimierung ersetzen sie nicht.

Kontrolliere die veröffentlichte Seite

Prüfe zuerst ausgeloggt die Darstellung: Stimmt der Zuschnitt, ist Text lesbar und bleibt das Layout beim Erscheinen der Bilder stabil? Untersuche die Auslieferung genauer, wenn ein Bild weiterhin groß, unscharf oder langsam ist.

1. Öffne die veröffentlichte Seite in einem privaten Fenster. Öffne die Entwicklertools, wähle Network, filtere nach Img und aktiviere Disable cache, solange die Werkzeuge geöffnet sind.
2. Lade neu und sortiere Bildanforderungen nach übertragener Größe. Beginne mit den größten und sofort sichtbaren Bildern.
3. Ermittle die tatsächlichen Abmessungen anhand von Anfrage-URL und Vorschau. Vergleiche sie mit Anzeigegröße und Pixeldichte. Eine 2400-Pixel-Datei in einer 350-Pixel-Karte ist prüfenswert; 700 Pixel können auf einem 2×-Display angemessen sein.
4. Kontrolliere bei HTML-Bildern srcset und sizes, wenn der Browser dauerhaft zu große Dateien auswählt. Prüfe Lade- und Prioritätsattribute am eigentlichen <img>-Element, nicht nur am umgebenden Widget.
5. Wechsle vor einem erneuten Laden in die mobile Emulation und prüfe die angeforderten Hintergrund- und Bildvarianten. Kontrolliere die Darstellung zusätzlich auf einem echten Smartphone.

Führe PageSpeed Insights vor und nach der Änderung unter vergleichbaren Bedingungen aus. Beachte das LCP-Element und bildbezogene Befunde statt nur einer Gesamtpunktzahl. Ein kleines Hero-Bild, dessen Download spät beginnt, hat ein anderes Problem als eine große Datei, die sofort lädt.

Bleibt ein altes Bild sichtbar, prüfe zuerst die Dateiauswahl im Widget und die Breakpoint-Einstellungen. Leere dann die betreffenden Seiten-, Optimierungs- und CDN-Caches. Verweist veraltetes Elementor-CSS auf den alten Hintergrund, nutze in den Tools die Neuerzeugung von Dateien beziehungsweise CSS; die Bezeichnung variiert je nach Version. Das erzeugt keine fehlenden WordPress-Vorschaubildgrößen.

Beispiel: ein Bild neben einer Textspalte

Angenommen, ein Teamfoto hat ursprünglich 4800 × 3200 Pixel und 5,4 MB. Seine Spalte ist am Desktop etwa 550 Pixel breit, auf einem Tablet nimmt das Bild jedoch eine ganze Zeile ein.

1. Prüfe die breiteste Platzierung: Erreicht das Bild auf dem Tablet etwa 700 Pixel, nutze diese Breite zum Vergleich statt nur der schmaleren Desktop-Spalte.
2. Bereite Zuschnitt und Maße vor: Passt ein 4:3-Zuschnitt, vergleiche Exporte mit 1000 × 750 und 1400 × 1050 Pixeln. Prüfe Gesichter und wichtige Details in der späteren Anzeigegröße.
3. Vergleiche die Komprimierung: Probiere WebP mit mittlerer Qualität und prüfe das Ergebnis. Notiere die tatsächliche Dateigröße: Ein detailreiches Gruppenfoto kann mehr Daten benötigen als ein schlichtes Porträt gleicher Abmessungen.
4. Konfiguriere das Widget: Lade den gewählten Export hoch, ergänze passenden Alt-Text und wähle die Bildauflösung. Bei 1400 Pixeln kann Full nötig sein, damit die größere Variante verfügbar ist. Kontrolliere die responsiven Dateien der Seite.
5. Prüfe das Ergebnis: Kontrolliere Desktop- und Mobilanforderungen, Schärfe und Layoutstabilität. Weiter unten kann Lazy Loading sinnvoll sein; als LCP-Bild sollte das Foto zügig laden.

Häufige Bildprobleme in Elementor beheben

Warum wirkt das Bild unscharf?

Prüfe Image Resolution, die Abmessungen der Quelle und die tatsächlich vom Browser gewählte Datei. Ein 300-Pixel-Vorschaubild wirkt auf 600 Pixel Breite weich. Eine höhere Auflösung stellt aber keine Details wieder her, die im Original fehlen. Prüfe auch Komprimierung und Zuschnitte, die einen kleinen Ausschnitt vergrößern. Siehe unseren Leitfaden zu unscharfen Website-Bildern.

Warum fehlt der mobile Hintergrund oder ist falsch zugeschnitten?

Prüfe Bildzuweisung am mobilen Breakpoint, geerbte Einstellungen, Sichtbarkeit und Container-Höhe. Cover füllt den Container durch Zuschneiden; verschwindet das Motiv, passe die Position oder den Zuschnitt an. Die Proportionen sollten nicht verzerrt werden. Lädt die Datei überhaupt nicht, prüfe zuerst die Anfrage auf Fehler.

Warum erscheinen Bildänderungen nicht auf der Live-Seite?

Prüfe, ob du das richtige Widget, die richtige Vorlage und den richtigen Breakpoint aktualisiert hast. Die Live-Bild-URL hilft, eine alte Datei von veralteter Gestaltung zu unterscheiden. Leere die betreffenden Caches und erzeuge Elementor-CSS neu, wenn es noch auf den alten Hintergrund verweist. Wiederholte Uploads ohne Ursachenklärung können unnötige Duplikate erzeugen.

Häufig gestellte Fragen

Sollte ich Full grundsätzlich vermeiden?

Nein. Full kann zu einem Bild passen, das für diesen Einsatzort vorbereitet wurde. Prüfe Quellabmessungen, responsive Varianten und heruntergeladene Datei. Full ist keine Einstellung zum Ausfüllen der Spalte; dafür ist das Layout zuständig.

Komprimiert Elementor hochgeladene Bilder automatisch?

Auflösungs- und Ladekontrollen des Page Builders komprimieren den Upload nicht. WordPress erzeugt Bildgrößen und verwendet formatspezifische Qualitätseinstellungen, garantiert damit aber keine optimierte Mediathek. Elementor bietet außerdem das separate Produkt Image Optimizer. Auch Hosting oder Plugins können Bilder verarbeiten. Prüfe vorhandene Systeme, bevor du ein weiteres hinzufügst.

Kann ich WebP-Bilder direkt hochladen?

WordPress unterstützt WebP-Uploads. Das Hosting benötigt passende Bildverarbeitung, um verkleinerte Varianten zu erzeugen. Teste deshalb eine Datei vom Upload über die Widget-Auswahl bis zur veröffentlichten Auslieferung, bevor du die gesamte Mediathek konvertierst.

Welche Maße eignen sich für ein Hero-Bild?

Gehe von der größten Anzeigefläche und dem Zuschnitt aus. Eine Breite von 1600–1920 Pixeln ist für viele Desktop-Layouts ein sinnvoller Vergleichsstart, aber weder ein Elementor-Limit noch eine Schärfegarantie für jedes Display. Prüfe einen eigenen mobilen Zuschnitt und wäge Dateigröße gegen sichtbare Details ab.

Verbessert Bildoptimierung das Google-Ranking?

Sie kann Ladezeiten und Seitenerlebnis verbessern, garantiert aber keine besseren Positionen. Googles Hinweise zum Seitenerlebnis erklären, dass Core Web Vitals in Rankingsysteme einfließen, gute Werte allein jedoch keine Spitzenposition garantieren. Passende Bilder, beschreibende Dateinamen und hilfreiche Alt-Texte unterstützen auch das Inhaltsverständnis. Siehe unseren Leitfaden zu Alt-Texten und Dateinamen.