Wie binde ich Bilder ein? WordPress Performance!

Lesezeit: 5 Minuten

Bilder richtig einbinden

Bilder sind in WordPress schnell und einfach eingebunden. Medien – Datei hinzufügen, that´s it in Kürze. Glaubt man oft. Und dann kommen in Foren / Gruppen / Facebook Fragen, warum die Webseite so langsam ist. Darum der Artikel “Bilder richtig einbinden” – Deine WordPress Performance wird es Dir danken.

Das Erste, was ich in so einem Fall generell mache ist, mir die Seite auf https://tools.pingdom.com und auf https://gtmetrix.com anzuschauen. und oft kann man das Problem schon auf den Ersten Blick sehen, hier an einem Beispiel:

WordPress Performance Tuning Bilder content type

Das bedeutet erstmal, dass gute 3MB an Bildern geladen werden beim Aufruf dieser Webseite. Natürlich muss man differenzieren und abwägen können, ob es dafür einen sinnvollen Grund gibt. Meiner persönlichen Meinung nach ist das für eine normale Webseite oder für ein normales Blog eindeutig zu viel. Ich versuche grundsätzlich, eine Seite bei unter 1MB zu halten. Die Performance einer Webseite ist mir einfach wichtiger, als absolute High-Res Fotos.

Als nächstes schaue ich mir die einzelnen geladenen Ressourcen im Detail an:

WordPress Performance Tuning Bilder Ladezeit

Ich sortiere nach “Response Body Size” und nehmen den Haken bei “Rising” raus (Sortierreihenfolge). Hier im Bild sind die 3 größten geladenen Ressourcen. Jetzt gehe ich einfach in dieser Reihenfolge die einzelnen Dokumente von oben nach unten durch (Mehr zum Messen der Performance von Webseiten gibt es hier). In diesem Beispiel kannst Du sehen, dass alleine das erste Bild rund 1,7MB groß ist und rund eine halbe Sekunde lädt. 10 von diesen Bildern auf Deiner Seite, und niemand wird abwarten, bis die Seite fertig geladen hat. Sondern vorher weg klicken.

In diesem Fall würde ich die ersten beiden Bilder anschauen und versuchen zu optimieren.

Wie kannst Du Bilder optimieren?

Wenn Du (auf diese oder auf andere Weise) große Bilder identifiziert hast, hast Du die folgenden Möglichkeiten, um die Performance Deiner Seite zu steigern:

  1. Bilder kleiner skalieren (also weniger Pixel)
  2. Bilder komprimieren (gleich viele Pixel, aber weniger “Details”)
  3. Datei komprimiert von Server zu Client übertragen
  4. Bild im richtigen Format speichern

Das hört sich alles kompliziert an, ist es aber nicht. Bilder richtig einbinden ist eigentlich leicht.

Bilder richtig einbinden – Bild skalieren

Das Bild kleiner skalieren ist total einfach. Einfach in Deine Medien-Verwaltung im Dashboard von WordPress gehen und das Bild anklicken. Es öffnet sich der Dialog “Anhang-Details”:

Beim roten Pfeil sieht man die aktuelle Größe der Daten, in diesem Beispiel 4MB mit einer Größe von 3765 auf 2510 Pixel. Das ist viel zu groß. Also, “Bild bearbeiten” klicken und rechts oben unter “Neue Abmessungen” z. B. 1400 eingeben- der 2. Wert wird automatisch ausgefüllt, um die Proportionen zu erhalten. Und schwups, haben wir nur noch eine Größe von wenigen 100KB! Soweit schon mal top.

Bilder richtig einbinden – Bild komprimieren

Aber wir sind ja motiviert und wollen dem Benutzer die bestmögliche Experience bieten. Also: Plugin hinzufügen und nach Smush suchen und installieren (es gibt hier noch Zig andere Plugins, die ähnliches leisten, ich komme mit Smush sehr gut zurecht):

Die Grundkonfiguration ist recht einfach und im Default schon gut brauchbar. Ich würde auf jeden Fall den Haken setzen bei  “Automatically smush my images on upload“. Ab jetzt kannst Du ganz einfach auf die Bilddatei unter “Medien” klicken und rechts unten “Smush” anklicken. Das Plugin komprimiert das Bild entsprechend der Vorgaben in den Einstellungen. Das läuft also auch – in Zukunft wird jedes Bild, das Du hoch lädst auch gleich entsprechend verkleinert.

Bilder richtig einbinden – Bilder optimiert übertragen

Die Übertragung von Server zu Client sollte heutzutage Standard sein. Bei WP Super Cache heißt die Option z. B. “Komprimiere Seiten, sodass diese schneller an Besucher ausgeliefert werden. (Empfohlen)“.

Bilder richtig einbinden – das richtige Dateiformat

Noch ein paar Worte zum richtigen Dateiformat hinsichtlich der WordPress Performance.

Grundsätzlich kann man sagen:

  • JPG: Macht Sinn für Fotos und Bilder. JPG lässt sich sehr gut komprimieren und damit auch kleiner machen. Noch immer der de-facto-Standard im Internet. Aber Achtung: die Komprimierung ist verlustbehaftet.
  • PNG: Bietet einen vernünftigen Farbraum und kann auch verlustfrei komprimieren. Hat Vorteile, wenn Du in den Bildern transparenz benötigst.
  • GIF: Ist nur noch zu empfehlen für Logos oder kleine Illustrationen o. ä., da der Farbraum mit 256 Farben sehr begrenzt ist. Früher war die Hauptanwendung die “animierten GIFs” 🙂
  • SVG: Einziges Format dieser Runde, das auf Vektorgrafiken basiert. Theoretisch kann ein Logo damit in beliebigen Größen angezeigt werden, ohne Verlust von Details.
  • WebP: Ist das zukünftige Format und soll einige der anderen Formate gemeinsam ablösen. Kann verlustfrei und verlustbehaftet komprimieren. Das Hauptproblem ist aber noch die Unterstützung auf Browser-Seite.

Vergleiche und Fazit

Ich habe hier als Beispiel mal die Komprimierung von JPEG (verlustbehaftet) dargestellt, damit Du Dir mal ein Bild von den Komprimierungsraten machen kannst:

WordPress Optimierung Bilder JPEG 10%
WordPress Optimierung Bilder JPEG 10% Qualität
WordPress Optimierung Bilder JPEG 20%
WordPress Optimierung Bilder JPEG 20% Qualität
WordPress Optimierung Bilder JPEG 25%
WordPress Optimierung Bilder JPEG 25% Qualität
WordPress Optimierung Bilder JPEG 50%
WordPress Optimierung Bilder JPEG 50% Qualität
WordPress Optimierung Bilder JPEG 88%
WordPress Optimierung Bilder JPEG 88% Qualität

Bei der Komprimierung musst Du selbst testen, mit welchen Qualitätseinbußen Du leben willst. Wichtig ist: Schau Dir am Ende nochmal mit den o. g. Tools an, was sich an der Ladezeit gebessert hat.

Das könnte Dich auch interessieren …

1 Antwort

  1. 5. Mai 2019

    […] einem Plugin wie z. B. “Smush“, damit sie noch kleiner werden. Im Detail habe ich das hier nochmals […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere

4 × drei =