Bilder für Website optimieren: Ich teile meinen Workflow und zeige Dir, wie Du Deine Fotos vor Upload aufbereitest und bereits verknüpfte Bilder austauschst.
In diesem Video zeige ich Dir, wie Du Deine Bilder vor Upload auf Deine Website richtig optimieren kannst. Ich teile meinen persönlichen Workflow mit Dir und erkläre, worauf Du bei der Bildoptimierung achten solltest. Außerdem zeige ich Dir auch, was Du mit bereits verknüpften, zu großen Bildern machen kannst.
Denn unoptimierte Bilder gehören zu den häufigsten Gründen, warum Websites langsam laden, unruhig wirken oder unnötig viel Speicherplatz verbrauchen. In meinem Blogartikel So sorgst Du für Ordnung im WordPress Backend zeige ich Dir, wie Du Ordnung in Deine Mediathek bringst – in diesem Artikel geht es einen Schritt weiter: Wie kannst Du es in Zukunft direkt richtig machen?
Inhalt
Erst denken, dann hochladen: Welche Bildgrößen brauchst Du wirklich?
Der wichtigste Schritt passiert vor dem Hochladen eines Bildes: Du solltest wissen, wie groß ein Bild auf Deiner Website tatsächlich dargestellt wird. Ich unterscheide dabei typischerweise zwischen diesen Varianten:
- Bild über die komplette Breite (zum Beispiel als Hero- oder Hintergrundbild)
- Halbe Breite als klassisches Contentbild (also gerne Bild + Text nebeneinander)
- Kleine Vorschaubilder / Gridansichten
So findest Du die echten Pixelmaße heraus
Mit dem Inspect-Tool Deines Browsers kannst Du schauen, in welcher Größe die Fotos auf Deiner Website überhaupt wiedergegeben werden und sie entsprechend vor dem Hochladen schon auf diese Größe zuschneiden und zusätzlich komprimieren. Dein Speicherplatz wird es Dir danken 😉
Beispiel aus meinem Workflow:
- Volle Breite: ca. 1760 px
- Headerbild: 1200 × 800 px
- Halbe Breite: ca. 620 px
- Kleine Bilder: ca. 300 × 200 px
Lege Dich auf feste Bildformate fest
Ein extrem unterschätzter Punkt bei der Bildgestaltung ist das Mischen unterschiedlicher Formate. Wenn Bilder heute hochkant, morgen quer und übermorgen quadratisch daherkommen, wirkt eine Website schnell unruhig und inkonsequent.
Mein klarer Tipp: Entscheide Dich einmal bewusst für feste Seitenverhältnisse – und bleib dabei. Das sorgt für visuelle Ruhe, erleichtert Dir zukünftige Entscheidungen und verleiht Deiner Website ein konsistentes, professionelles Erscheinungsbild.
Beispiele:
- 16:9
- 2:3
- 1:1
- 4:5
Und nein, das bedeutet nicht, dass Du auf Deiner Website nur eine einzige Variante einsetzen darf. Committe Dich aber zum Beispiel bei all Deinen Herobildern auf ein bestimmtes Format und / oder bei all Deinen Blogfotos.
Bilder logisch benennen – für SEO & Ordnung
Auch das logische Benennen von Bildern ist ein Punkt, den viele unterschätzen – dabei ist er für Ordnung und SEO enorm wertvoll. Statt kryptischer Dateinamen wie „IMG_3847“ solltest Du deine Bilder aussagekräftig und sinnvoll benennen.
Das hat gleich mehrere Vorteile: Du findest deine Bilder später deutlich schneller wieder, Google kann sie besser indexieren und du erhöhst die Chancen, über die Bildersuche sichtbar zu werden.
Ich nutze in der Regel folgendes Format: URL / Name + beschreibender Titel + evtl. Keyword. Nutze Kleinschreibung und verzichte auf Leerzeichen (nimm stattdessen Bindestriche) und Umlaute. Beispiel:
❌ IMG_3847_final_neu2.png
✅ deine-domain-bilder-website-optimieren-header.webp
Vor dem Upload: Bilder komprimieren
Ja, es gibt Plugins, die die Datei nach dem Upload komprimieren und als kleinere Version (zum Beispiel als WebP) zur Verfügung stellen. Das ändert aber nichts daran, dass die große Datei auf dem Server liegt und dort unnötig Platz einnimmt.
Deshalb achte darauf, das Bild schon vor dem Upload in die richtige Größe (Dateiformat und Dateigröße) zu bringen. Grobe Richtwerte:
- 1200 px breit: idealerweise unter 300 KB
- Hintergrundbilder über die volle Breite: möglichst unter 1 MB
- je kleiner das Bild, desto kleiner die Datei
- Das Dateiformat WebP komprimiert Bilder teilweise um weitere 70% – 90%
Alt-Texte richtig einsetzen – für Barrierefreiheit & SEO
Das Angeben von Alt-Texten in der Mediathek ist wichtig für die Barrierefreiheit (Screenreader für sehbehinderte oder blinde Nutzer:innen), die Anzeige bei fehlenden Bildern (zum Beispiel bei schlechter Internetverbindung) sowie für die SEO-Optimierung.
Warum? Screenreader lesen sie für sehbehinderte Menschen vor; sie erscheinen, wenn Bilder nicht laden, und sie helfen Suchmaschinen, den Inhalt des Bildes zu verstehen.
Meine Empfehlungen dazu:
- Kurzer, beschreibender Text zum Bildinhalt
- Ggf. natürlich eingebautes Keyword (kein Keyword Stuffing)
- Bei rein dekorativen Bildern: Leer lassen oder ggfs. zwei Anführungszeichen ohne Leerzeichen dazwischen
Gewöhne Dir am besten an, die Bilder direkt nach Upload mit dem Alt-Text zu versehen.
Mehr zum Thema Alt-Texte: Alt-Texte: Wie Du mit ihnen Bild-Barrieren brichst und Fotos (aus)lesbar machst
Bildauflösung in Elementor richtig einstellen
Gerade bei Elementor sehe ich oft diesen Fehler, dass die voreingestellte Auflösung (auch Image Resolution) auf „Large (1024)“ stehen bleibt. Das kann aber leider dazu führen, dass Bilder nicht groß genug dargestellt werden oder im Frontent verpixelt aussehen.
Meine Empfehlung: Stelle die Bildauflösung auf „Full“.
Wichtig: „Full“ heißt nicht, dass WordPress plötzlich riesige Bilder lädt – sondern dass die hochgeladene Originalgröße verwendet wird.
Wenn Du Deine Bilder vorher korrekt skaliert hast, bist Du hier auf der sicheren Seite.
Bilder nachträglich ersetzen
Wenn Du mit Deinem neu gewonnenen Wissen Bilder nachträglich austauschen willst, hast Du oft das Problem, dass Du eventuell nicht mehr weißt, wo überall auf Deiner Website das Bild eingebunden ist – und eventuell rankt es bereits gut bei Google & Co.
Lädst Du eine neue Version in die Mediathek, erhält diese eine neue URL und wird also nicht automatisch überall auf der Website ausgetauscht, das musst Du dann manuell machen.
Da hilft Dir das Plugin „Admin and Site Enhancements“ (Link weiter unten) mit der Funktion Media Replacement. Du findest sie unter WordPress Dashboard > Werkzeuge > Verbesserungen > Content Management > Medien-Ersatz 😊
Eine detaillierte Anleitung findest Du hier: How to Media austauschen – wie Du Fotos & Co ersetzen kannst ohne URL-Änderungen zu riskieren
Tool Empfehlungen & Links
Fazit: Bilder optimieren ist kein Hexenwerk
Wenn Du einmal verstanden hast, welche Größen Du wirklich brauchst, welche Formate Du wirklich nutzt und Dir Deinen Worflow erstellt hast, dann läuft die Bildoptimierung fast automatisch.
Mein Grundsatz dabei: Lieber einmal sauber vorbereiten als später Ladezeiten, Unordnung und Pixelchaos reparieren 😉
2 Kommentare
Hallo Britta,
auf die Bildformaten habe ich noch nie geachtet 🫣. Ich war schon stolz, dass alle (OK, die meisten) vor dem Hochladen komprimiert werden. Again what learned 😉
Die Benennung der Bilder finde ich auch schwierig, da ich meistens Urlaubsfotos für den Blog nutze. Das hat dann rein gar nichts mit dem Inhalt des Beitrages zu tun und die Keywords wirken dann irgendwie fehl am Platz. Wie löse ich das am sinnvollsten?
Oder ist es egal, wen mein Bild zB „strand-samos“ heißt und der Alt-Text zB „budgetieren-fuer-anfaenger“?
Danke fürs erhellen!
Liebe Grüße Angela
Hallo Angela,
dass das Bild „strand-samos“ heißt und der Blogartikel sich um Budgetieren dreht, ist egal. Das logische Benennen der Dateien hilft eher Dir, im Backend den Überblick zu behalten.
Der Alt-Text soll wiederum das Bild beschreiben und wie normaler Text formuliert sein. Wenn Du ein Keyword mit Einpflegen willst, kannst Du das Bild ja wie folgt beschreiben: Strand von Samos mit wildem, türkisblauem Meer als Symbol für finanzielle Freiheit durch Budgetieren für Anfänger.
Der Alt-Text ist primär wichtig für Menschen, die das Bild nicht sehen können – wenn sie zum Beispiel auf einen Screenreader angewiesen sind oder das Bild nicht richtig geladen wurde.
Ich bin ehrlich, beim Einpflegen von Keywords gehen die Meinungen auseinander. Die einen sagen, es soll wirklich nur das Bild beschreiben; die anderen sagen, es soll das Bild im Zusammenhang beschreiben.
Fakt ist: Wenn Dein SEO-Tool meckert, weil kein Keyword im Alt-Text vorkommt, liegt das daran, dass das Tool auch nur eine Checkliste abarbeitet, und selbst nicht bewerten kann, wie relevant das Bild für den Inhalt ist.
Ich hoffe, das hilft Dir weiter 😊
LG