main

WordPress

Bildgröße anpassen und Bilder komprimieren | WordPress Ladezeit Optimierung

Mit einer Bildoptimierung kannst du meistens sehr viel an Ladezeit bei deiner WordPress Seite gewinnen! Das hängt natürlich davon ab, ob du dir schon beim Hochladen der Bilder darüber Gedanken gemacht hast … In den meisten Fällen werden die Bilder leider einfach in die WordPress Mediathek hochgeladen, ohne davor angepasst zu werden. In diesem Artikel zeige ich dir, wie du dir Bilder optimieren kannst bevor du die in WordPress hochlädst und was du machen kannst, wenn du schon unzählige Bilder unbewusst falsch hochgeladen hast.

Grundsätzlich gibt es drei Schritte, um ein Bild zu optimieren:

  • Die Auflösung des Bildes anpassen
  • Bilder richtig speichern
  • Die Datei komprimieren

Und betrachte diesen Artikel als Leitfaden … ich werde dir jetzt nicht jeden Klick in Photoshop oder Gimp erklären. Falls du eine Schritt für Schritt Anleitung brauchst, dann kannst du dir dieses Video anschauen:

 

Die Auflösung anpassen

Dieser Schritt ist extrem wichtig! Vor allem, wenn du Fotos in einer sehr guten Qualität hochladen willst. Von einem Fotografen bekommst sehr schöne hochauflösende Fotos, die du dir sogar in einem großen Format auf die Wand hängen kannst. Für eine Webseite ist das aber ein Overkill! Bei Bildern, die für das Web gedacht sind, solltest du diese Punkte beachten:

  1. Das Bild sollte max. 1920×1080 px groß sein. Wenn das Bild nur die Hälfte des Bildschirmes einnehmen soll, dann solltest du die Größe ebenfalls halbieren
  2. Die Pixeldichte sollte nicht größer als 72 ppi sein

Diese beiden Sachen kannst du sowohl mit Photoshop, als auch mit Gimp machen. Bei mehreren Bildern kannst du diesen Prozess auch automatisieren. Dafür gibts aber genug Anleitungen im Internet.

Falls du bereits hochgeladen Bilder anpassen magst, dann kannst du die einzelnen Bilder aus dem WordPress Uploads Verzeichnis downloaden, bearbeiten und unter dem gleichen Namen wieder hochladen. Den Ordner findest du unter wp-content/uploads/. Bitte schau drauf, dass du nur die Originalbilder bearbeitest. WordPress erzeugt nämlich beim Upload auch andere Größen (z.B. Thumbnail und andere Zwischengrößen). In dem Fall muss du nur das Originalbild bearbeiten, den Rest kannst du ignorieren.

Bilder richtig exportieren

Du solltest du Bilder auch immer als .jpg abspeichern. Falls du aber den transparenten Hintergrund brauchst, dann kannst du auch .png verwenden. JPG Bilder werden einfach stärker komprimiert und deswegen sind diese dann auch kleiner.

Falls du Photoshop verwendest, dann wirst du auch die Option haben die Bilder für das Web zu speichern. In meiner Version heißt der Befehl „Save for Web“. Bei Gimp gibt es dafür sicher eine alternative. Diese Funktion solltest du auf jeden Fall nutzen, weil die Bilder so bereits komprimiert abgespeichert werden. Und je kleiner die exportiere Datei desto besser.

Dieser Schritt ersetzt aber nicht den folgenden:

Bilddateien komprimieren

Jetzt hast du das Bildformat schon bestmöglich optimiert. Super! Aber kann man die Datei noch weiter verkleinern, ohne einen Qualitätsunterschied zu sehen? Ja das geht.

Ich verwende dafür immer das Komprimierungs-Service TinyPNG. Das Panda kann dir die Dateien manchmal sogar noch um 80% verkleinern! Diesen Schritt kannst du aber automatisieren. Dafür gibts das Plugin von TinyPNG. Sobald du das Plugin mit dem API Key aktiviert hast, wird jedes hochgeladene Bild automatisch komprimiert. Du kannst auch alle bereits hochgeladenen Bilder per Knopfdruck komprimieren. Je nachdem wie viele Bilder du bereits in deiner WordPress Mediathek hast, kann dich eine Massenkomprimierung ein bisschen was kosten. Aber meistens sind das unter 50€ Beträge.

Ganz wichtig! Die Bildkomprimierung hilft dir nicht viel wenn du die ersten zwei Schritte nicht gemacht hast. Die Bilddatei wird zwar deutlich kleiner, sie ist aber noch immer größer, als diese eigentlich sein sollte.

Eine gute Alternative zu TinyPNG ist das EWWW Plugin. Das Plugin führt ebenfalls automatische Komprimierungen durch.

Bonus: das WebP Format

Der Google Speed Test gibt dir auch oft die Empfehlung, dass die Bilder in modernen Bildformaten zur verfügen stellen solltest. Diese Formate werden aber von den wenigsten Browsern unterstützt. Hier kannst du das EWWW Plugin verwenden. Das Plugin erstellt parallel zu Komprimierung das WebP Format und sobald das das korrekt aufgesetzt hast, werden Bilder in dem Format an die Browser geschickt, die das auch unterstützen. Alle anderen bekommen das Bild in JPEG oder PNG Format. Damit aber bestehende Bilder in dem Format ausgeliefert werden, wirst du diese neu erstellen müssen. Diese Funktionalität bietet das Plugin auch.

Fazit

Und so kannst du Bilder für deine WordPress Seite optimieren. War glaub ich nicht zu verwirrend erklärt. Falls du noch weitere Tipps bezüglich der Ladezeit und Performance Optimierung in WordPress suchst, dann kannst du dir gerne den folgenden Artikel durchlesen. Dort hab ich meinen gesamten Optimierungsprozess beschrieben, wie ich bei meinen Projekten die Ladezeit bei WordPress Seiten beschleunige.

Meine WordPress Seite ist zu langsam … WordPress Ladezeit Optimierung

Bis zum nächsten Mal!