Bilder für WordPress richtig aufbereiten – meine komplette Anleitung

So bereitest Du Bilder für WordPress & Elementor richtig auf: Alles rund um Bildgrößen, Dateiformate, Komprimierung, optimale Dateinamen, Alt-Texte & SEO-Tipps.

Du kennst den Spruch: Ein Bild sagt mehr als 1.000 Worte. Und tatsächlich: Bilder sind das Salz in der Suppe Deiner Website. Sie erzeugen Stimmung, transportieren Botschaften und machen Deine Seite erst richtig lebendig.

Aber Vorsicht: Wenn Du Bilder ohne Vorbereitung hochlädst, kann das Deinen Webspace sprengen. Deine WordPress Installation frisst unnötig viel Speicherplatz, und Deine Website lädt und lädt … und lädt.

Warum ist das so?

Der häufigste Grund, warum WordPress Websites im Laufe der Zeit riesig werden, sind unzählige, unoptimierte und ungenutzte Dateien – allen voran Bilder und Mediendateien.

Typische Ursachen:

• Unoptimierte Bilder: Fotos in Originalgröße von 5 bis 10 MB, oft nie skaliert oder komprimiert.
• Mehrfach generierte Bildgrößen: WordPress, Themes und Plugins erstellen von jedem Upload viele Varianten – teilweise bis zu zehn Versionen pro Bild.
• Historisch gewachsene Mediatheken: Über Jahre angesammelte Uploads, die längst nicht mehr auf der Website eingesetzt werden.

In 90 % der Fälle ist die Mediathek – inklusive aller automatisch generierten Thumbnails – der größte Speicherfresser. Mehr noch als die Datenbank oder Theme- und Plugin-Dateien 🫣

Vor einigen Wochen habe ich die Website einer Kundin von einem Hosting auf ein anderes umgezogen. Eigentlich Routine – dachte ich zumindest. Doch als das Backup-Plugin beim Exportieren rödelte und der Server fast in die Knie ging, war klar: Hier stimmt etwas nicht.

Die Ursache: Über 18.000 Bilder hatten sich in zehn Jahren angesammelt. Wer regelmäßig bloggt oder Bildergalerien teilt, kommt leicht auf 20+ Uploads pro Monat – das ist an sich kein Drama. Problematisch wurde es hier, weil die Fotos ohne Komprimierung, ohne Ordnung und einfach wild hochgeladen wurden. Zusammen kamen über 3 GB Daten auf dem Server – kein Wunder, dass alles schleppend lief.

Solche Fälle zeigen mir immer wieder, wie wichtig es ist, Bilder richtig vorzubereiten, bevor sie in WordPress landen. In diesem Beitrag zeige ich Dir Schritt für Schritt, wie Du Deine Bilder optimal aufbereitest – inklusive Tipps für Elementor, nützlichen Tools und einer Übersicht der wichtigsten Bildformate und einer praktischen Checkliste am Ende.

Vor dem Upload – Bilder richtig vorbereiten

Committe Dich auf bestimmte Seitenverhältnisse

Bevor Du überhaupt Bilder auf Deine Website lädst, solltest Du Dich auf bestimmte Formate festlegen, zum Beispiel 3:2 für breit- und 5:7 für hochformatige Bilder sowie vielleicht noch Bilder im quadratischen Format 1:1.

Warum? Aus mehreren Gründen:

• Einheitliches Erscheinungsbild
  Wenn alle Bilder in den gleichen, wiederkehrenden Seitenverhältnissen vorliegen, wirkt die Website sofort aufgeräumter und professioneller. Keine verkorksten Zuschnitte, keine unruhige Blogübersicht, keine verschobenen Galerien.
• Technische Sauberkeit
  WordPress und Themes bzw. Plugins schneiden sonst jedes Bild unterschiedlich zu (Thumbnails, Crops etc.), was schnell zu verzerrten oder abgeschnittenen Motiven führt. Mit festen Formaten verhinderst Du diese „Zufallscrops“.
• Konsistenz beim Design
  Besonders in Grids (Gitter oder Raster) oder Teaserseiten (z. B. Blogübersicht, Portfolio, Shop) ist es Gold wert, wenn Bilder gleichmäßig wirken. Der Blick der Besucher:innen bleibt im Flow, statt ständig an „unruhigen“ Formaten hängen zu bleiben.

Entscheide Dich für das richtige Dateiformat

Du kannst Bilder in vielen Variationen abspeichern und nochladen, aber nicht jedes Dateiformat eignet sich gleich gut. Hier ein Überblick über die herkömmlichen:

Format	Einsatzbereich	Vorteile	Nachteile
JPG	Fotos, Bilder mit vielen Farben	Kleine Dateigröße, weit verbreitet	Keine Transparenzen, bei starker Komprimierung Qualitätsverlust
PNG	Logos, Grafiken, Screenshits	Unterstützt Transparenz, gute Qualität	Größere Dateigröße als JPG
WebP	Fotos, Grafiken, Logos (modernes Standardformat)	Sehr gute Qualität bei kleiner Dateigröße, unterstützt Transparenzen	Auch wenn die neusten Browser das Format unterstützen, können ältere Probleme machen
GIF	Animierte Bilder, einfache Grafiken	Animationen möglich, sehr verbreitet	Extrem begrenzte Farben, große Dateigrößen
SVG	Logos, Icons, Illustrationen (Vektoren)	Beliebig skalierbar ohne Qualitätsverlust, winzige Dateigröße	Nur für Vektorgrafiken geeignet, Vorsicht bei Uploads (Sicherheitsaspekt)

Meine Empfehlung:

• Für Fotos → Nutze WebP oder JPG
• Für Logos/Icons → Nimm SVG oder PNG / WebP
• Für Animationen → Besser WebP-Animationen statt GIF

Ich bearbeite meine Bilder vor dem Hochladen in Photoshop und speichere sie dann als WebP ab, damit spare ich oftmals 90% an Dateigröße im Vergleich zu einem JPG ein.

Du hast eventuell kein Photoshop, sondern nutzt Canva. Dann speicher das Bild als JPG ab.

Bring Deine Bilder schon vor dem Hochladen in die richtige Größe

Lade Bilder nie in der Originalgröße, wie sie von Deinem Handy oder Deiner Kamera kommen, hoch. Ein Foto, das 4000 x 3000 Pixel groß ist, ist ein absoluter Overkill, wenn Du nur ein 1200 x 800 Pixel großes Bild brauchst und geht auf Kosten der Ladezeiten Deiner Website.

So findest Du die richtige Größe für Deine Seite heraus

Der Einfachheit halber gehen wir davon aus, dass Du schon unkomprimierte Bilder auf Deiner Website hochgeladen und auf der entsprechenden Unterseite eingepflegt hast. Öffne diese nun am Desktop im Browser Deiner Wahl, klicke mit Rechtsklick auf das Bild und wähle dann im aufgehenden Menü die Funktion „Untersuchen“ aus.

Hier ein Beispiel, wie sich dann die Entwicklerwerkzeuge öffnen:

Unter dem Reiter „Layout“ findest Du nun Infos dazu, in welcher Größe das Bild dargestellt wird. In meinem Fall sind das 750 x 500 Pixel für Bilder innerhalb eines Blogbeitrages, also etwa 1/5 der Originalgröße. Bei den Herobildern, also dem offiziellen Beitragsbild, sind es 1200 x 800 Pixel.

Größer müssen die Bilder also nicht sein. Wenn ich mir die Komplettbreite der Seite, also die maximale Breite, anschaue, sind das 1.760 Pixel; also nur 44% der Originalbreite von 4.000 Pixel. Also alles, was größer hochgeladen wird, ist verschenkter Speicherplatz.

Meine Empfehlung:

• Herobild über volle Breite auf Start- oder Unterseite: 1.800 x 1.200 Pixel
• Beitragsbild für Herobereich im Blogartikel: 1.200 x 800 Pixel
• Weitere Bilder innerhalb des Blogartikels oder Bilder in einem zweispaltigen Layout: 750 x 500 Pixel

Tools zum Zuschneiden

• Vorinstalliert bei Windows: Windows Fotoanzeige
• Vorinstalliert bei Mac: Vorschau
• Desktop: Photoshop, Gimp
• Online: Canva, Pixlr, Photopea

Komprimiere Deine Bilder, um Ladezeit zu sparen

Komprimiere Deine Bilder, bevor Du sie hochlädst, indem Du die Qualität um einige Prozentpunkte verringerst. Damit halbierst Du oft die Dateigröße, ohne dass jemand einen Unterschied sieht. Das Ziel sollte sein, eine Größe von unter 200 KB pro Bild zu erreichen. Davon ausgenommen sind Bilder, die über die volle Breite gehen, da solltest Du unter 700 KB bleiben.

Bildbearbeitungstools

Die meisten Bildberarbeitungstools bieten diese Option beim Abspeichern an. Alternativ kannst Du die Bilder über Onlinedienste komprimieren:

• TinyPNG
• Squoosh

Optimierungsplugins

Für WordPress gibt es auch diverse Plugins zur Optimierung von Bildern. Diese bieten Dir oftmals auch die Möglichkeit, hochgeladene JPGs oder PNGs als WebPs auszuspielen. Bedenke aber, dass die Originaldatei in der von Dir hochgeladenen Größe trotzdem auf dem Server liegt und dann erst komprimiert wird; Bilder also vorher schon ins richtige Format zuschneiden und in der passenden Größe hochladen.

• ShortPixel
• SmushIt
• Imagify
• EWWW Image Optimizer

Logische Dateinamen vergeben

Wenn Dein Bild von der Speicherkarte Deiner Kamera oder aus Deinem Smartphone kommt, hat es eine so wohlklingende Bezeichnung wie „IMG_4589.jpg“ oder „20250907_111400.jpg“. Die ist nicht sonderlich hilfreich, weder für Dich, wenn Du später in der Mediathek das Foto suchst oder für Google, um Dein Bild zu „verstehen“:

• Gib Deinen Bildern also eine logische Bezeichnung, am Besten in Kombination mit Deinem Namen oder Deiner Marke.
• Nutze Bindestriche statt Leerzeichen („mein bild.jpg“ wird sonst zu „mein%20bild.jpg“). Bindestriche sind klar, sauber und SEO-freundlich.
• Verwende keine Umlaute wie ä, ö, ü oder Sonderzeichen wie ß oder é, die können auf Servern oder bei Backups / Uploads zu Fehlern führen, weil nicht alle Systeme diese Zeichen gleich verarbeiten. Statt „grüner-tee.jpg“ ist „gruener-tee.jpg“ besser.
• Nutze Kleinbuchstaben, da manche Server zwischen Groß- und Kleinschreibung unterscheiden. „Bild.jpg“ und „bild.jpg“ sind dort dann zwei verschiedene Dateien; das kann Links kaputt machen oder zu doppeltem Content führen. Eine einheitiche Kleinschreibung verhindert dieses Chaos.

Nach dem Upload – Bilder richtig einbinden

Alt-Texte nicht vergessen

Nachdem Du das Bild in die Mediathek hochgeladen hast, fülle auf jeden Fall das Feld Alt-Text aus. Das ist aus drei Gründen wichtig: Für die Barrierefreieheit – Screenreader-Nutzer:innen wird dieser Text dann vorgelesen und sie haben eine Vorstellung, was sehende Menschen zu sehen bekommen, für die Suchmaschinenoptimierung, denn Google liest auch diesen Text aus und versteht so Dein Bild besser und zu guter Letzt als Fallback, wenn das Bild mal nicht lädt (zum Beispiel, weil die Datenverbindung nicht gut genug ist).

Meine Tipps für die Alt-Texte

• Beschreibe, was wirklich zu sehen ist
  Schreibe so, als würdest Du jemandem das Bild am Telefon erklären, der es nicht sehen kann. Also statt „Frau“, schreibe besser „Business-Coach spricht mit Kundin in einem modernen Büro“.
• Halte es kurz und knackig
  Alt-Texte sollten beschreiben, aber nicht ausufern. Versuche unter 125 Zeichen zu bleiben, mehr lesen Screenreader in der Regel nicht vor. Meist reichen 5 bis 15 Wörter.
• Baue relevante Keywords ein – aber natürlich
  Wenn es passt, nimm ein wichtiges Keyword aus Deinem Thema mit rein. Aber betreibe niemals „Keyword-Stuffing“. Also statt „Bild vom Coaching“ schreibe besser „Zwei Personen im Gespräch beim Online-Coaching für Führungskräfte“.
• Verzichte auf redundante Wörter
  Ergänzungen wie „Bild von …“ oder „Foto von …“ sind unnötig, da Screenreader ohnehin sagen, dass es ein Bild ist.
• Alt-Text ≠ Dateiname
  Dateinamen helfen Google beim Kontext, aber der Alt-Text soll das Bild sprachlich beschreiben. Nutze beides clever, aber identische Wiederholung bringt nichts.
• Beachte den Zweck des Bildes
  Frage Dich, warum ist das Bild auf der Seite? Ist es ein rein dekoratives Bild? Dann ist kein Alt-Text nötig (lass das Feld leer und schreibe nicht „Blümchen“ oder „Dekoelement“ rein). Handelt es sich um ein Bild, das wichtig für das Verständnis des Inhalts ist, dann formuliere beschreibend, sodass die Information auch ohne Bild vermittelt wird. Ist Text auf dem Bild zu sehen, der für das Verständnis wichtig ist, nimm diesen in den Alt-Text auf. Setzt Du funktionale Bilder als interaktive Elemente ein, zum Beispiel einen Briefumschlag als Call to Action, um Kontakt aufzunehmen, dann beschreibe die Aktion, also „Kontakt aufnehmen“ statt „Briefumschlag“.
  Kurz gesagt:
  • Dekorativ → ignorieren
  • Informativ → beschreiben
  • Funktional → Aktion benennen
• Beispiel-Formulierungen für typische Websitebilder:
  • Blogartikel: „Laptop mit geöffnetem WordPress-Editor auf einem Schreibtisch“
  • Coaching-Seite: „Coach berät Klientin während eines Workshops in heller Umgebung“
  • Über mich-Seite: „Webdesignerin Britta Just lächelt in die Kamera“
  • Produktseite: „Handgemachte Keramikvase in Blau mit weißen Mustern“

Elementor und das unscharfe Bild-Problem

Wenn Du Elementor nutzt ist Dir vielleicht schon einmal passiert, dass die Bilder unscharf dargestellt werden. Das liegt meisten daran, dass Elementor standardmäßig nicht immer die volle Bildauflösung anzeigt.

Statt bei der Bildauslösung „Large 1024 x 1024“ ausgewählt zu lassen, stelle diese bei jedem Bild unter auf „Volle Größe“, dann wird das Bild scharf dargestellt.

Keine Sorge: Wenn Du das Bild vorher auf die richtige Größe zugeschnitten hast, lädt es trotzdem schnell.

So vermeidest Du unnötige Dateien auf dem Server

Unnötige Bildgrößenvarianten vermeiden

WordPress erstellt beim Hochladen automatisch mehrere Bildgrößen (Thumbnails, mittelgroß, groß). Manche Themes oder Plugins erzeugen zusätzlich eigene Größen – und schon hast Du für jedes hochgeladene Bild schnell mal 7, 8 oder mehr Varianten und damit hunderte unnötige Dateien auf dem Server.

Mit dem Plugin ThumbPress kannst Du bereits in der Gratisversion genau einstellen, welche Bildgrößen erzeugt werden – und sparst Speicherplatz. Ich empfehle Dir, lediglich die Originalgröße der Datei (das Du im Vorfeld ja richtig aufbereitet hast) sowie die Thumbnailansicht für die Mediathek beizubehalten.

Bereits erstellte Bildgrößenvarianten vom Server löschen

So lange Du das zusätzliche Erstellen weiterer Bildgrößen durch WordPress / Theme und / oder Plugins (zum Beispiel Elementor) nicht unterbindest, sammeln sich auf Deinem Server automatisch für jedes hochgeladene Bild weitere Dateien an.

Diese kannst Du händisch vom Server löschen. Du erkennst sie beim Beispiel unten an Zusätzen wie -1024×683, -150×150, -300×200 und -768×512. In diesem Fall würde ich nur die Variante -150×150 für die Thumbnails sowie die Originaldatei beibehalten:

Checkliste: Bilder optimal für WordPress & Elementor vorbereiten

Hier nochmal die Kurzzusammenfassung, wie Du Deine Bilder optimal für Deine Website vorbereitest:

• ✅ Wähle das richtiges Format (JPG, PNG, WebP, SVG)
• ✅ Schneide auf die passende Größe zu (max. 1920 px)
• ✅ Komprimiere Bild, um die Dateigröße zu verkleinern (unter 200 KB anstreben)
• ✅ Vergebe einen logischen & keywordbasierten Dateinamen
• ✅ Stelle in Elementor die Bildauflösung auf Volle Größe (gegen Unschärfe)
• ✅ Ergänze nach dem Upload unbedingt den Alt-Text
• ✅ Verhindere mit ThumbPress unnötige Bildgrößen
• ✅ Lösche bereits erstellte, unnötige Bildgrößen vom Server

Wenn Du diese Schritte verinnerlichst, hast Du den optimalen Workflow, um Deine Bilder aufzubereiten, damit sie nicht nur scharf und professionell wirken, sondern Deine Website auch blitzschnell lädt und von Google besser gefunden wird.