Bilder in 7 Schritten optimieren, damit dein WordPress-Blog flott lädt

Bilder und WordPress-Blog, das ist wie Topf und Deckel. Wer die Bilder jedoch nicht vor dem Hochladen optimiert, bremst die Ladezeit seiner Website. Dazu kommt, dass beim Bloggen in der Regel laufend Bilder dazukommen. Originalfotos von Smartphones oder Kameras können locker mehrere Megabyte (MB) groß sein und sind zudem viel breiter und höher, als es für einen Blogbeitrag nötig ist. Lädst du solche Bilder ungeprüft hoch, dann benötigt deine Website länger zum Laden. Und so etwas nervt Besucher. Dauert das Laden einer Webseite mehr als 2 oder 3 Sekunden, ist der Klick weg vorprogrammiert.

Zu wissen, wie man Bilder optimiert, ist daher ein Must-have in der Toolbox eines jeden Bloggers. Mit der Optimierung deiner Bilder sorgst du für eine schnelle Ladezeit deines Blogs und damit für eine angenehme Erfahrung für Nutzende (User Experience, kurz UX). Nebenbei verbesserst du mit der Bildoptimierung auch dein Ranking in den Suchmaschinen. Denn Google hat in den vergangenen Jahren sukzessive Updates eingespielt, die die Benutzerfreundlichkeit immer mehr in den Fokus gerückt haben. Die Ladezeit ist ein Rankingfaktor für Suchmaschinen. Oder besser: DAS Hauptkriterium, das in Googles Ranking einfließt, und im Gegensatz zu anderen Kriterien sogar hervorragend dokumentiert ist.

In dieser Anleitung zeige ich dir, wie du Bilder in 7 Schritten mit der Vorschau-App am MacBook oder iMac und dem Online-Tool TinyPNG „blogfähig“ machst. Die Vorschau-App ist auf jedem Mac standardmäßig installiert und somit kostenlos. Auch TinyPNG (heute Tinify) ist in der Basis-Version kostenlos. Unter dem letzten Punkt „Der Spickzettel“ findest du ein paar grundlegende Informationen zu Bildern, die hilfreich sein könnten.

Du nutzt Windows, Android oder iOS? Wenn du einen Windows-Rechner benutzt, bietet sich IrfanView als Tool an. Damit kannst du sogar mit einer Batch-Konvertierung mehrere Bilder auf einmal bearbeiten. Du willst Bilder auf einem Smartphone vor dem Hochladen optimieren? Bei Android bietet sich die Bildgröße-App an und für iOS (iPhone) Resizelt oder iDownsize. Die letzten beiden habe ich nicht getestet, recherchiere also ggf. und kommentiere gerne unten, wenn du eine bessere App kennst oder findest. Das Prinzip ist an jedem Gerät das gleiche.

Richtwerte für die Bildoptimierung

• Passende Bildmaße:
  • Bildmaße werden in Pixel angegeben.
  • Standardmaße gibt es nicht, denn die richtige Größe ergibt sich aus dem Anwendungsfall des Bildes.
  • Sollte in der Regel zwischen 600 und 1920 Pixel (Full HD) sein.
• Dateigröße des Beitragsbilds:
  • Die Dateigröße wird in Gigabytes (GB), Megabytes (MB) und Kilobytes (KB) angegeben.
  • Sollte < 200 KB sein, wenn möglich < 100 KB.
• Komprimierung der Dateigröße:
  • Die Menge an Information im Bild wird verringert, um weniger Speicherplatz zu benötigen und die Übertragung zu beschleunigen.
  • 75–80 % sind ein guter Richtwert.

Faustregel: Je kleiner die Dateigröße des Bildes, desto schneller lädt eine Webseite.

Schritt 1: Plane vorausschauend

In diesem Beitrag geht es nicht darum, alles über Bilder im Netz bis ins kleinste Detail zu verstehen, sondern eine Routine zu entwickeln, mit der du deine Bilder flott optimieren kannst.

Es gibt keine Standardmaße und Dateigrößen für Bilder auf Websites oder in WordPress-Blogartikeln. Die optimalen Bildmaße (Pixel) und die Dateigröße (GB, MB oder KB) für ein Bild hängen immer davon ab, wo das jeweilige Bild eingesetzt wird. Das macht das komplexe Thema Bildoptimierung noch komplexer.

Das Beitragsbild wird zum Beispiel in der Regel breiter sein müssen als ein Foto innerhalb des Beitrags. Manches hängt vom Theme ab, manches vom gewählten Layout. Wenn du etwa eine Seitenleiste hast, dann ist der Hauptbereich des Blogs schmaler, das Header-Bild entsprechend auch.

Es gibt also keine Pauschallösungen. Und doch finde ich es enorm wichtig, einen unkomplizierten Einstieg zu haben. Mein Vorschlag für den Anfang? Verwende erst einmal die Maße des Beitragsbilds für ALLE Bilder im Blog.

Frage dich dennoch vor dem Hochladen: Wo werde ich das Bild einfügen?

Damit verankert sich diese Frage bei dir. Wenn du die Schritte der Bildoptimierung aus dem Effeff kannst, dann kannst du die Bildoptimierung mit den genaueren Bildmaßen verfeinern.

Schritt 2: Recherchiere die optimalen Bildmaße für das Beitragsbild deines Themes

Das größte Bild in einem WordPress-Blogartikel ist das Beitragsbild (EN: featured image). Das Bild erscheint nach der Veröffentlichung oberhalb des Blogartikels. Es ist zudem in der Vorschau zu sehen (z. B. auf einer Übersichtsseite), da allerdings sehr viel kleiner.

Zur Orientierung: Das Beitragsbild ist das Bild, das du oben rechts im Beitrag festlegst:

Die Größe des Beitragsbilds wird in Pixeln gemessen und variiert je nach verwendetem Theme. Suche daher mit Google nach der Dokumentation deines Themes. Die gibt es bei vielen Anbietern nur auf Englisch. Falls möglich, macht also die Suche auf Englisch Sinn. Du hast den Namen deines Themes nicht parat? Du findest ihn im Dashboard > Design > Themes. Es ist dort mit „aktiv“ gekennzeichnet.

Ich nutze das Astra-Theme, also suche ich Browser nach: wordpress astra image sizes documentation. Das erste Ergebnis führt direkt zur richtigen Seite in Astras Knowledge Base. Da finde ich die Information: Für Astra wird empfohlen, ein Beitragsbild mit den Abmessungen 1200 Pixel (Breite) x 628 Pixel (Höhe) zu benutzen. Das ist eine gängige Größe, die bei vielen Themes genutzt wird.

Falls du nicht fündig werden solltest, kannst du das sogenannte „Full HD“ nutzen: 1920 × 1080 Pixel. Oder du schreibst mir eine kurze E-Mail und ich suche dir die richtigen Maße raus. Was gegen das Full-HD-Format spricht? In der Regel sind auch diese Bilder viel zu groß für einen Blogpost. Sie blähen so Stück für Stück deine Website auf und verlangsamen unnötig das Laden deiner Seite.

Beachte, dass Bilder für Seiten deiner Website – etwa ein großflächiges Hintergrundbild, das über die gesamte Breite des Bildschirms angezeigt wird – ganz andere Maße benötigen. Um die geht’s hier nicht, sondern nur um die Bilder für deinen Blog. Großflächige Bilder sollten eh nur mit Vorsicht eingesetzt werden. Denn Weißraum ist elementar, um das Auge auf einer Website zu lenken.

Schritt 3: Mache eine Kopie deines Bildes

Apple bietet mit der Vorschau-App ein oftmals unterschätztes Werkzeug. Damit kannst du vieles schnell erledigen, unter anderem Bilder bearbeiten. Aber Vorsicht!

‼️ Die Vorschau-App speichert Änderungen direkt im Originalbild.

Daher gilt bei wichtigen Bildern: Mache vor der Bearbeitung eine Kopie vom Bild und arbeite nur mit der Kopie. Denn schiefgehen kann immer was. Das machst du mit Rechtsklick > Duplizieren. Das neue Bild hat im Namen das Wort „Kopie“, was du vorerst so lassen kannst. Die sinnvolle Benennung ist der allerletzte Schritt vor dem Hochladen.

Die Vorbereitung ist fertig, nun geht’s ans Optimieren.

Schritt 4: Passe die Abmessungen an, sprich die Breite und Höhe (Pixel)

Lässt du ein Foto ausdrucken, dann sind Zentimeter die übliche Maßeinheit, zum Beispiel 13 × 18 cm. Monitore hingegen zeigen immer Pixel an.

Bevor du dein Bild in der Vorschau-App öffnest, lohnt es sich, den Status quo des Bildes zu prüfen. Am einfachsten geht das, wenn du im Finder die Ansicht „Spalten“ eingestellt hast. Markiere das Bild mit einem Klick. In der Spalte rechts davon wird eine Vorschau angezeigt. Darunter sind 3 besonders relevante Zahlen, die bei der Bildoptimierung die Wegweiser sind.

1. Dateigröße in MB (hier 1,3 MB)
2. Abmessungen (hier 3000 × 2000 px)
3. Auflösung (hier 96 × 96)

Vor allem 1 und 2 sollten optimiert werden.

Öffne dein Bild jetzt mit einem Doppelklick in der Vorschau-App und gehe oben in der Leiste auf Werkzeuge > Größenkorrektur. Es erscheint das folgende Bild. Ändere nur die Breite (hier 3000 px), zum Beispiel auf 1200 px. Achte darauf, dass beide Haken gesetzt sind. Der erste Haken sorgt dafür, dass die Proportionen erhalten bleiben, der zweite dafür, dass die Dateigröße neu berechnet wird.

Speichere das Bild nun und prüfe wieder mit Rechtsklick das Ergebnis. Beim obigen Bild sind mit dieser einzigen Änderung bereits aus den ursprünglichen 1,3 MB nur noch 121 KB übrig. Hervorragend.

Schritt 5: Komprimiere das Bild (MBs bzw. KBs)

Wichtig zu wissen: Durch die Komprimierung entsteht ein Qualitätsverlust deines Fotos.

Bei der Kompression werden Bildinformationen entfernt und so die Dateigröße reduziert. Es ist immer ein Balanceakt zwischen so viel wie möglich entfernen und dabei das Bild nicht pixelig werden zu lassen. Mit einem Online-Tool wie TinyPNG – heißt heute Tinify und ist in der Basis-Version kostenfrei und ohne Anmeldung nutzbar – kannst du dein Bild komprimieren und die Dateigröße noch einmal um bis zu 80 % reduzieren. Ziehe dazu das Bild in das Tool, es macht den Rest automatisch und zeigt dir an, wie viel KB du einsparst. Lade das komprimierte Bild herunter. Das Original ist links, das komprimierte Bild rechts.

Diesen Schritt kannst du auch direkt in der Vorschau-App machen, indem du den Wert 72 Pixel/Zoll in das Feld gibst (siehe letztes Bild).

Schritt 6: Kontrolliere das Bild

Öffne das Bild nun und schaue, wie es wirkt. Ist es noch scharf? Reicht die Qualität für den Blog? Beim Beitragsbild schaue ich genau hin, im Blogartikel lasse ich auch mal fünfe gerade sein.

Schritt 7: Ändere den Dateinamen, lade das Bild hoch und ergänze den ALT-Tag

Jede Bilddatei benötigt einen aussagekräftigen Namen. Auch Keywords können im Dateinamen platziert werden. Das machst du mit einem Rechtsklick auf das Bild, dann kannst du den Text ändern. Beachte dabei:

1. Nutze Kleinschreibung.
2. Nutze Bindestriche, um Worte zu trennen (nicht Unterstriche).
3. Vermeide Umlaute, Leerzeichen und Sonderzeichen.

Ein paar Beispiele:

• SO: bild-optimieren-fuer-blog.jpg
• NICHT SO: Bild_optimieren_fuer_Blog.jpg
• NICHT SO: bild_optimieren_fuer_blog.jpg
• NICHT SO: bild optimieren für blog.jpg

Jetzt kannst du das Bild in die Mediathek hochladen.

Der Alt-Text gehört zur Bildoptimierung dazu und trägt zur Inklusivität bei. Jedes Bild auf einer Website sollte einen haben. Dieser Text beschreibt das Aussehen oder den Zweck eines Bildes. Das ist zum Beispiel für diejenigen hilfreich, die ein Bildschirmlesegerät verwenden. Eintragen kannst du ihn in WordPress unter Medien > Bild auswählen > im obersten Textfeld „Alternativer Text“.

Fertig, Glückwunsch! Nun hast du einen Workflow für die Zukunft.

Fazit

Bilder sind essenziell für jeden Blog, können aber die Ladezeit erheblich verlangsamen. Es lohnt sich, ein paar Minuten in die Bildoptimierung zu stecken. Durch vorausschauende Planung, Anpassung der Bildmaße und gezielte Kompression sorgst du dafür, dass deine Website trotz Bildern schlank bleibt und schnell lädt. Deine Besucher profitieren davon und auch dein Google-Ranking wird damit beeinflusst.

Probiere es aus und schreibe deine Erfahrungen gerne in die Kommentare.

Bilder: privat, Figma, Canva

---

Der Spickzettel

Gigabyte (GB), Megabyte (MB) und Kilobyte (KB)

• 1 GB = 1000 MB
• 1 MB = 1000 KB

Zielgröße für das Beitragsbild im WordPress-Blog ist kleiner als 200 KB, wenn möglich, sogar kleiner als 100 KB.

Dateiformate: Wann JPG-Datei nutzen und wann PNG-Datei?

• JPG für Fotos, komplexe Bilder mit vielen Farben und hochwertige Grafiken
• PNG für Grafiken mit weniger Details und Bilder mit einem transparenten Hintergrund

Es gibt viele weitere Bildformate, diese 2 reichen locker für den Einstieg. Da es auf einer Website immer auch um die Ladezeit geht, ist die Dateigröße relevant und JPG eine gute Wahl.

PNG-Dateien sind in der Regel größer als JPG-Dateien.

WordPress versucht vorzusorgen

Gut zu wissen: Jedes Mal, wenn du ein Bild in die Mediathek hochlädst, erstellt WordPress automatisch mindestens (!) 4 verschiedene Bildgrößen des Originalbilds für unterschiedliche Bildschirmgrößen. In der Regel sind das:

1. Thumbnail (150 × 150 Pixel)
2. Mittlere Größe (maximal 300 × 300 Pixel)
3. Große Größe (maximal 1024 × 1024 Pixel)
4. Volle Größe (die Originalgröße des hochgeladenen Bildes)

Sinn der Sache ist, dass Bilder je nach Nutzung im Layout und je nach Bildschirmgröße unterschiedlich groß dargestellt werden. Wird ein Bild zum Beispiel auf dem Desktop angezeigt, wird ein größeres Bild gezogen, als wenn es auf dem Smartphone angezeigt wird. Das macht WordPress alles im Hintergrund. Ist ein Bild allerdings von vorneherein viel zu groß, dann nützt dieses Feature auch nichts. Ein Bild, das 6000 Pixel breit und 5 MB groß ist und so in die Mediathek hochgeladen wird, wird auch als Thumbnail viel zu groß sein.

Meine Devise? Vorsorge ist besser als Nachsorge. Ich habe diese Vervielfältigung in einer Aufräumaktion mit Code unterbunden (mehr dazu im Blogpost: So verbesserst du die Ladezeit (+ User Experience) deiner Website). Ich halte es für wichtiger, vorab zu überlegen, welche Bildabmessungen ich im Blogartikel wirklich benötige, und das Bildmaterial vor dem Hochladen zu optimieren. Und sollte ich wirklich einmal das WordPress-Theme wechseln wollen, weiß ich, dass Astra beim Beitragsbild ein absolut gängiges Standardmaß benutzt. Es ist also unwahrscheinlich, dass meine Bilder für das neue Theme zu klein wären.