Anleitung: WordPress Bilder komprimieren

(Aktualisiert am 5. August 2024)

Bilder auf WordPress-Webseiten können die Ladezeit signifikant beeinträchtigen. Langsame Ladezeiten verschlechtern das Nutzererlebnis sowie das SEO-Ranking.

Es ist essenziell, Bilder vor dem Hochladen zu komprimieren. Dies reduziert die Dateigröße ohne Qualitätsverlust.

Glücklicherweise gibt es zahlreiche Tools und Plugins, die uns dabei helfen können, Bilder effizient zu verkleinern, Bildoptimierung zu betreiben und die Webseiten-Performance zu optimieren.

Hier zeige ich dir ein paar Optionen, wie du Bilder für deine WordPress-Seite komprimieren kannst und damit deine Website boostest 🙂

 

Wie Bildkomprimierung die Ladezeit beeinflusst

Merke: WordPress-Bilder verkleinern kann direkt die Ladezeit einer Webseite verbessern, was wiederum die Benutzerfreundlichkeit und das Ranking in Suchmaschinen erhöht.

Unkomprimierte Bilder benötigen mehr Speicherplatz und Bandbreite beim Laden der Webseite.

Durch die Reduzierung der Dateigröße von Bildern kann die Website erheblich schneller laden. Dies ist besonders wichtig für Besucher mit langsamen Internetverbindungen.

Eine geringere Ladezeit führt zu einer niedrigeren Absprungrate, da Benutzer weniger wahrscheinlich eine Webseite verlassen, bevor sie vollständig geladen ist.

Indem wir Bilder komprimieren, tragen wir nicht nur zur Geschwindigkeitsoptimierung bei, sondern fördern auch eine positive Benutzererfahrung.

Pingdom

Mit pingdom kannst du beispielsweise feststellen, wie deine Website hier performt.

 

Unterscheidung Verkleinerung vs. Komprimierung

Oft werden die Begriffe Bildverkleinerung und Bildkomprimierung synonym verwendet, doch sie bedeuten nicht dasselbe.

Bei der Bildverkleinerung wird die physische Größe eines Bildes reduziert, also die Abmessungen in Pixeln verringert. Dies kann nützlich sein, um die Ladezeiten einer Webseite zu verbessern, da kleinere Bilder weniger Speicherplatz beanspruchen.
Bildkomprimierung hingegen bezieht sich auf die Reduzierung der Dateigröße eines Bildes, ohne die Abmessungen zu verändern. Hierbei werden unnötige Daten entfernt oder die Bildqualität leicht verringert, um die Datei kleiner zu machen. Beide Methoden tragen dazu bei, die Performance einer Webseite zu optimieren, indem sie die Ladezeiten verkürzen und den benötigten Speicherplatz reduzieren.

Um ideale Ergebnisse für seine Website zu erzielen, sollte man beide Punkte angehen und beachten!

Im weiteren Verlauf bieten fast alles Tools beide Optimierungen an, auch wenn sie oft nur von Komprimierung sprechen.

 

Welche Größe brauchst du?

Bevor du dich in die Optimierung stürzt, musst du erstmal herausfinden, welche Abmessungen deine Website-Bilder eigentlich benötigen.

Das kannst du beispielsweise über die Entwicklerwerkzeuge im Browser machen. Oder aber du schaust in den Dokumentationen deines Themes, welche Größen erwartet werden.

So ergibt sich für das Titelbild dieses Beitrags hier eine Größe von 750 x 530 Pixel:

Bildgröße Entwicklerwerkzeug Browser

An diesen Abmessungen kann man sich orientieren.

 

Tools zur Bildkomprimierung für WordPress

Es gibt drei Optionen, wie du WordPress Bilder verkleinern und komprimieren kannst:

  1. Mit Online-Tools
  2. Mit einer lokalen Software
  3. Mit WordPress Plugins

Ich empfehle dir, deine Bilder bereits vor dem Upload zu verkleinern und dann zusätzlich Plugins für die optimierte Bereitstellung zu nutzen!

Doch fangen wir an mit den Online-Tools.

 

#Option 1: Online-Tools für die Bildkomprimierung

Online-Tools sind super für die Komprimierung, da nicht jeder eine gute Software, wie Photoshop, auf seinem Computer besitzt.

Deshalb ist es schön, dass es zahlreiche Online-Tools gibt, welche die Bildkomprimierung für dich übernehmen.

Im Netz findet man sehr viele Anleitungen und Empfehlungen zu Tools, wie TinyPNG, Compressor.io aber diese können nur Komprimieren und nicht Skalieren!

Deswegen geht meine Empfehlung zu Bildverkleinern.com

 

Bildverkleinern.com – Der Allrounder

Bildverkleinern.com

Bildverkleinern.com

Bei bildverkleinern.com handelt es sich um eine kostenlose Möglichkeit, seine Bilder online zu verkleineren, sowie komprimieren. Neben der Änderung der Abmessungen kann man sein Bild hier auch frei Hand beschneiden – so kann man zum Beispiel nur einen bestimmten Teil des Bildes nutzen. Dies kann sinnvoll sein, wenn im Hintergrund des eigentlichen Motivs etwas unerwünscht ist und abgeschnitten werden soll.

Zusätzlich gibt es ein paar einfache Werkzeuge, mit welchen man das Bild noch anpassen kann. Hierzu gehören:

  • Drehen/ Spiegeln
  • Schnelles Löschen
  • Unschärfen/ Schärfen
  • Graustufen
  • Frei ziehen (frei Hand malen)
  • Formen zeichnen (Linie, Pfeil, Rechteck, Ellipse, Dreieck)
  • Text hinzufügen
  • Speichern von jpg mit Qualitätsauswahl

Sehr interessant ist es, dass man die verschiedenen Qualitätsstufen direkt erkennen kann.

 

Schritt für Schritt Anleitung für Bildverkleinern.com:

  1. Lade dein Bild über “…durchsuchen” hoch
  2. Stelle über “Größe ändern” die gewünschte Abmessung in Pixeln ein
  3. Gehe dann über “Datei > Bild speichern als…”
  4. Wähle Namen und Dateiformat und klicke auf “Bild speichern”
  5. Wähle die gewünschte Qualitätsstufe aus und klicke auf “Bild speichern”

Direkt in der Vorschau sieht man, wie die Komprimierung auf dem Bild aussieht.

 

Zu starke Komprimierung:

Zu starke Bildkomprimierung

Zu starke Bildkomprimierung

Wenn man zu stark komprimiert, erkennt man deutliche Artefakte auf dem Bild. Zwar lädt das Bild schnell, aber schön ist das nicht!

 

So sieht eine gute Komprimierung aus:

Gute Bildkomprimierung

Gute Bildkomprimierung

Nur wenn man ganz genau hinschaut, sieht man leichte Qualitätseinbußen. Hier muss man immer einen Mittelweg finden, so dass die Qualität noch für die Zwecke ausreichend ist.

Hinweis: lade hier keine sensiblen Inhalte, wie Firmendokumente oder Portraits hoch, da man nicht genau weiß, wie die Firmen mit den Daten umgehen.

 

Option #2: lokale Software

Neben solchen Onlinetools, kannst du auch einfach eine Software auf deinem PC verwenden. Also beispielsweise Photoshop oder Gimp.

In Photoshop geht das ganz einfach.

Hier gehst du einfach auf “Datei > Exportieren > Exportieren als” und nimmst dort deine entsprechenden Anpassungen vor.

Photoshop Export

Bild in Photoshop exportieren

 

Option #3: WordPress-Plugins zur Bildkomprimierung

Indem du bereits optimierte Bilder in WordPress hochlädst, hast du bereits die halbe Miete.

Nun empfiehlt es sich, zusätzlich ein Plugin in WordPress zu installieren.

Diese Plugins haben den Vorteil, dass sie verschiedene Bildgrößen auf deiner Website erkennen und das hochgeladene Bild auch direkt in den anderen Größen erstellen. So musst du nicht ein Bild in mehreren Größen hochladen, sondern es wird immer das richtige Bild angezeigt.

Außerdem verfügen solche Tools über “Lazy-Load-Funktionen” und optimieren Bilder für sehr auflösungsstarke Displays.

Ein beliebtes Werkzeug, das ich empfehlen kann, ist “WP Smush”. Dieses Plugin ermöglicht es uns, Bilder direkt in der Mediathek von WordPress zu komprimieren. Auch nachträglich.

 

WP-Smush – Das WordPress Plugin

Smush WordPress Plugin

Smush WordPress Plugin

Das WordPress Plugin WP Smush komprimiert jedes Bild bereits beim Upload – neben dem Originalbild werden zusätzlich auch die automatisch von WordPress erstellten Thumbnails angepasst. Neben einer Bulk Smush Funktion, welche direkt mehrere der bereits vorhandenen Bilder auf deiner Webseite verkleinert, wird einem auf der Plugin Seite im Backend auch eine Übersicht über die eingesparten Dateigrößen geliefert.

Wenn man bereits viele Bilder auf seiner Seite hat, kann die erste Komprimierung etwas Zeit in Anspruch nehmen. WP Smush bietet zudem eine LazyLoad-Funktion, welche beim Seitenaufrauf nicht sichtbare Bilder auf der Seite erst dann lädt, wenn sie in den Sichtbereich kommen (zum Beispiel beim Scrollen).

Da WP-Smush automatisiert im Hintergrund läuft, ist es eine hervorragende Möglichkeit um seine Bilddateien weiter zu komprimieren.

Smush Einstellungen

Smush Einstellungen in WordPress

Hier geht es zum Plugin

 

PageSpeed Insights

Anfangs habe ich ja schon aufgezeigt, dass du deine Ladegeschwindigkeit mit pingdom testen kannst.

Am bekanntesten ist aber sicherlich Google PageSpeed Insights.

Damit kannst du deine Seite überprüfen lassen und erfährst neben dem Geschwindigkeitsindex für mobile Geräte und Desktop Computer auch direkt Empfehlungen für verschiedene Verbesserungen.

Neben dem Page Speed Wert erhält man, je nach Geschwindigkeit der Seite, eine Reihe von Diagnose Daten und Empfehlungen, um seinen Google Page Speed zu verbessern. Einer der Hauptgründe für schlechte Ergebnisse im Geschwindigkeitsindex sind schlecht formatierte Bilder und nicht komprimiertes JavaScript und CSS. Der Page Speed, also die Geschwindigkeit des Seitenaufbaus, ist ein wichtiger Faktor bei der Platzierung deiner Website in den Suchergebnissen.

Mit dem Tool kannst du feststellen, ob es noch Optimierungsbedarf bei bestimmten Bildern gibt!

 

Zusammenfassung – das bringen optimierte Bilder

  • Schnellere Ladezeiten: Große, unkomprimierte Bilder können die Ladezeit einer Webseite erheblich verlängern. Langsame Webseiten frustrieren die Benutzer und führen oft dazu, dass sie die Seite verlassen. Durch die Komprimierung von Bildern verringern wir die Dateigröße und verbessern somit die Ladezeiten.
  • Verbesserung der Benutzererfahrung: Schnell ladende Webseiten sorgen für eine bessere Benutzererfahrung. Heutzutage erwarten Internetnutzer, dass Webseiten schnell und reibungslos laden. Wenn unsere Seite zügig lädt, bleiben die Besucher eher und interagieren mehr.
  • SEO-Vorteile: Suchmaschinen wie Google bewerten Webseiten auch nach ihrer Ladegeschwindigkeit. Eine schnell ladende Webseite kann zu einem besseren Ranking in den Suchergebnissen führen. Da die Bildkomprimierung die Ladegeschwindigkeit erhöht, profitieren wir auch in Sachen SEO.
  • Mobile Datennutzung: Durch die Komprimierung von Bildern senken wir den Datenverbrauch unserer Benutzer. Dies ist besonders wichtig für Nutzer mit begrenztem Datenvolumen oder langsamer Internetverbindung.
  • Server-Speicherplatz: Große Dateien beanspruchen mehr Speicherplatz auf unserem Server. Durch die Komprimierung von Bildern sparen wir wertvollen Speicherplatz.

 

Anzeige
Mit Affiliate Marketing starten

So startest du als Affiliate

Lerne, wie du eine profitable Webseite erstellst und mit Affiliate Marketing und einem klaren Plan online Geld verdienst.


Häufige Fehler und ihre Lösungen

Einer der häufigsten Fehler ist das Hochladen von unkomprimierten Bildern direkt auf WordPress. Dies führt zu längeren Ladezeiten, was die Benutzerfreundlichkeit unserer Website beeinträchtigt und das SEO-Ranking negativ beeinflusst.

Um dieses Problem zu lösen, sollten wir immer Bilder vor dem Hochladen komprimieren.

Auch wird häufig die Bildgröße nicht angepasst, sodass überdimensionierte Grafiken die Seitenperformance behindern. Eine effektive Bildoptimierung kann hier Abhilfe schaffen. Hier kann ein Plugin helfen, welches die Bilder automatisch auf die gewünschte Größe skaliert und optimiert, ohne die Qualität merklich zu verringern.

Ein weiterer häufiger Fehler ist die fehlende Nutzung von modernen Bildformaten wie WebP, die leistungsstärker als traditionelle Formate wie JPEG oder PNG sind. Für eine einfache Konvertierung können wir Plugins wie “Smush” verwenden, die automatisch unsere Bilder in effizientere Formate umwandeln. Dies verbessert die Ladezeiten erheblich und macht unsere Website zukunftssicher.

 

Teile diesen Beitrag
Geschrieben von

Seit 2011 beschäftige ich mich intensiv mit Affiliate Marketing und habe mir dadurch ein automatisiertes Vollzeiteinkommen aufgebaut. Meine Mission ist es, dich zu motivieren und dir einen Weg zu zeigen, sich ein passives Einkommen zu verschaffen.Lerne mein System in der Affiliate School Masterclass

    Hinterlasse eine Antwort

    Deine Mailadresse wird nicht veröffentlicht. Erfolderliche Felder *

    Gib deinen Suchbegriff ein und drück Enter.