WordPress: Bilder komprimieren für kürzere Ladezeiten

WordPress Bilder komprimieren für bessere Ladezeiten

Deine WordPress Website ist langsam? Vielleicht liegt es daran, dass deine Bilder nicht komprimiert sind!

Was wäre das Internet ohne Bilder? Mit passenden Fotos und Grafiken lassen sich Inhalte nicht nur ergänzen, sondern auch auflockern. Was dabei aber oft nicht bedacht wird:

Bilder ziehen die Ladezeit einer Website oft unnötig in die Länge.

Du kennst das vielleicht selbst: Du bist am Handy und dein Netz ist nicht allzu gut. Mir passiert das oft auf Bahnfahrten. Ich versuche eine Website aufzurufen, doch die Ladezeit ist so extrem lang, dass ich mein Handy genervt wieder in die Tasche packe.

Natürlich sind optimierte Bilder kein Garant dafür, dass deinen Website-Nutzern diese Situation nicht widerfährt. Die Wahrscheinlichkeit ist allerdings sehr viel geringer.

Die Angst vor langen Ladezeiten ist natürlich kein Grund, auf Fotos zu verzichten.

Nach diesem Blogartikel weißt du ganz genau, wie du Bilder komprimierst, um deine Ladezeit so gering wie möglich zu halten.

Warum unkomprimierte Bilder die Ladezeit verlängern

Wichtig ist es erst einmal, zu verstehen, WARUM Bilder die Ladezeit verlängern.

Die meisten Fotos, die du in Bildagenturen findest oder direkt von deiner Kamera ziehst, sind für gewöhnlich extrem groß (teilweise über 10 Megabyte!). Das hat natürlich seine Berechtigung: Die Bilder sollen im Zweifelsfall schließlich auch als Großformatdruck gut aussehen.

Das Web ist da allerdings etwas anspruchsloser – zumindest was die pure Größe der Bilder angeht.

Wenn du ein Bild in Originalgröße auf deinen Server lädst, erhöht sich die Größe deiner Website im schlimmsten Fall um mehrere MB.

Mal zum Vergleich: Meine Hauptseite hat ein Datenvolumen von 2 MB und benötigt 663 Millisekunden zum Laden. Eine Ladezeit sollte im besten Fall nicht über 2 Sekunden liegen.

Ladezeit-Pingdom-Tools

Würde ich meine Seite jetzt mit zahlreichen riesigen Bildern „vollkleistern“, käme ich in kürzester Zeit über diese magischen 2 Sekunden. (Kleine Anmerkung: Meine Website erreicht diese kurze Ladezeit nicht nur wegen der optimierten Bilder, sondern auch wegen anderer Optimierungen, die ich in einem anderen Artikel behandeln werde.)

Auf dieser Seite kannst du übrigens checken, wie schnell deine Website ist:
https://tools.pingdom.com

Für gewöhnlich greift WordPress vorsorglich ein, wenn du ein Bild in Originalgröße hochlädst. Es wird dann eine kleinere Version deines Bildes genutzt, um das Datenvolumen klein zu halten. Allerdings kannst du dich nicht darauf verlassen. Denn selbst diese kleineren Versionen sind in fast allen Fällen wesentlich zu groß.

Hier musst du also eingreifen.

Fotos manuell vor dem Upload komprimieren

Wenn du neue Bilder auf deine WordPress Website lädst, solltest du sie ab sofort vorab optimieren.

WordPress Bilder mit Photoshop komprimieren

Als eingefleischte Grafikerin arbeite ich am liebsten mit Photoshop. Hier gibt es die Möglichkeit, ein Bild speziell für Webanwendungen zu speichern.

Von dieser Funktion solltest du unbedingt Gebrauch machen!
In Photoshop öffnest du mit dem Kürzel Befehl + Wahl + Umschalt + S das „Für Web Speichern“-Fenster:

Photoshop für Web Speichern

Hier hast du verschiedene Einstellungsmöglichkeiten:

Photoshop-Fuer-Web-Speichern-2

Bildgröße

Ganz unten kannst du dein gewünschtes Pixelmaß einsetzen. Achte hierbei auf die tatsächlich benötigte Anzeigegröße auf deiner Website. Ein Bild mit 1000 Pixel Breite bringt dir nichts, wenn es nur in 500 Pixel Breite angezeigt werden soll.

Dateiformat

Für gewöhnlich ist JPEG hier das richtige Format.
Ausnahmefälle sind Grafiken mit Transparenzen (z.B. Logos). Hier empfiehlt sich das PNG -Dateiformat.

JPEG ist deswegen so ein beliebtes Format, da es die Möglichkeit bietet, Bilddaten zu reduzieren.

Qualität

Womit wir beim Qualitätsfaktor wären. Je geringer du ihn einstellst, desto kleiner wird deine Bilddatei. Allerdings lässt auch die Bildqualität nach, was für unschöne Bildfragmente sorgen kann.

Hier mal ein Extrembeispiel bei Qualitätsfaktor 0 (Dateigröße: 29 Kilobyte):
JPEG Qualitätsfaktor 0

Siehst du die kleinen Kästchen? So sollte ein Bild nicht aussehen.
Ich empfehle dir, bei einem Wert von 60 zu beginnen und zu schauen, ob du den Wert ohne zu hohe Qualitätseinbußen noch geringer einstellen kannst.

Für den Qualitätsfaktor gilt: So hoch wie nötig, so gering wie möglich!

Noch ein kleiner Tipp für deine Suchmaschinenoptimierung:
Speicher deine Bilder immer unter einem sinnvollen Namen, der bestenfalls deine Keywords enthält. „IMG_294.JPG“ ist kein SEO-tauglicher Dateiname!

Das Ergebnis meiner Anpassung sieht übrigens so aus:
Bilder_komprimieren-WordPress-Beispiel
Von einer Dateigröße von 2,9 MB habe ich das Bild für die Darstellung in diesem Blogartikel komprimiert und auf 99 Kilobye (0,099 MB) reduziert. Einstellungen: 700 Pixel Breite, JPEG, Qualitätsfaktor 50

WordPress Bilder online komprimieren

Du hast kein Photoshop? In diesem Fall gibt es auch ein Onlinetool, das du verwenden kannst: https://www.bildverkleinern.com

Hier lädst du dein Bild hoch und verkleinerst es im ersten Schritt, indem du auf „Größe Verändern“ klickst. Anschließend stellst du dein gewünschtes Pixelmaß ein.

Groesse-Veraendern-JPEG-online

Unter „Datei“ kannst du das Bild als JPEG abspeichern und hier, genau wie in Photoshop, den Qualitätsfaktor bestimmen:

Speichern-Als-JPEG

PROFI TIPP: WordPress Bilder mit SMUSH komprimieren

Wenn du deine Bilder mit den gerade beschriebenen Schritten komprimierst, bist du schon einen riesigen Schritt weiter.

Um auch den letzten Byte zu komprimieren und deine Ladezeiten weiter zu verringern, empfehle ich dir das Plugin Smush. Denn auch wenn du jedes deiner Bilder zuvor in Photoshop komprimiert hast, schafft Smush es für gewöhnlich, das Datenvolumen weiter zu reduzieren.

Wie kann das sein?

WordPress erstellt automatisch von jedem deiner hochgeladenen Bilder unterschiedliche Versionen in verschiedenen Größen.
Auch diese zusätzlichen Versionen deines Bildes wollen komprimiert werden!

Das Plugin Smush, das du ganz einfach über den Plugin-Bereich deiner WordPress Website installieren kannst, hilft dir dabei:

Bilder komprimieren mit WordPress Plugin Smush

Das Plugin komprimiert jedes Bild, das du in deine WordPress Bilddatenbank uploadest bzw. upgeloadet hast.

Smush erlaubt es dir in der kostenlosen Version 50 Bilder auf einmal zu optimieren. Danach musst du den Vorgang mit einem Buttonklick erneut anstoßen, um weitere 50 Bilder zu optimieren:

WordPress Plugin Smush Kostenlose Version

Die PRO Version, die noch einige weiterführende Funktionen bietet, kostet knapp 50 Dollar im Monat und ist damit wohl für die wenigsten eine Option.
Das Plugin leistet auch in der kostenlosen Variante wirklich gute Arbeit und ist meine Empfehlung für dich wenn es um das Thema Bilder komprimieren geht.


Ich hoffe, ich konnte dir mit diesem Artikel helfen, deine Bilder zu komprimieren und deine Website Ladezeit zu verringern!

Spannende Infos für WordPress-Nutzer

Abonniere meinen wöchentlichen Newsletter und hol dir exklusive Tipps, Tutorials und Checklisten rund um die Themen WordPress, SEO und co.
Der Newsletterversand erfolgt entsprechend meiner Datenschutzerklärung.

Schreibe einen Kommentar

Menü schließen