WordPress-optimierte Bilder: Komprimierung, verzögertes Laden

Bilder sind ein wichtiger Teil des Website-Inhalts, aber sie sind auch der "Nummer-eins-Killer", der die Geschwindigkeit verlangsamt - ein nicht optimiertes hochauflösendes Bild (z.B. 5MB) kann die Ladezeit der Seite um 3-5 Sekunden erhöhen, was den Nutzer direkt die Geduld verlieren lässt. Das Gute daran ist, dass die Optimierung von Bildern einfach ist. Durch die beiden Hauptmittel "komprimierte Größe" und "verzögertes Laden" können Sie die Ladezeit von Bildern über 50% reduzieren. In diesem Abschnitt werden wir das Plugin verwenden, um eine vollautomatische Optimierung zu erreichen, die von Neulingen ohne technische Kenntnisse durchgeführt werden kann.

Warum müssen Bilder optimiert werden? 3 solide Daten

• Bilder machen in der Regel 60%-80% des gesamten Ladevolumens einer Website aus (weit mehr als andere Inhalte wie Text und Code).
• Für jede Sekunde, um die sich die Ladezeit verlängert, steigt die Abwanderungsrate um 20% (vor allem mobile Nutzer reagieren empfindlicher auf Geschwindigkeit).
• Nicht optimierte Bilder können die Google PageSpeed-Werte direkt senken (was sich auf die SEO-Rankings auswirkt).

KernzielKomprimiert die Bildgröße 50%-80% ohne merklichen Verlust an Bildqualität und ermöglicht es, Bilder, die nicht auf dem ersten Bildschirm angezeigt werden, "bei Bedarf" zu laden.

II. 1. Methode: Bildkomprimierung (automatische Volumenreduzierung mit Plug-ins)

Das Prinzip der Bildkomprimierung besteht darin, redundante Daten (z. B. Informationen zum Aufnahmegerät, nicht angezeigte Pixeldetails) zu entfernen, während die Bildqualität für das bloße Auge im Wesentlichen unverändert bleibt. Für die vollautomatische Komprimierung empfehlen wir das Plugin "Smush", das die Stapelverarbeitung vorhandener Bilder und die automatische Komprimierung neu hochgeladener Bilder unterstützt.

Schritt 1: Installieren und Aktivieren des Smush-Plugins

1. Melden Sie sich im WordPress-Backend an und gehen Sie zu "Plugins → Plugin installieren".
2. Suchen Sie nach "Smush", finden Sie das Plug-in mit der Bezeichnung "Developed by WPMU DEV", und klicken Sie auf "Installieren" → "Aktivieren".

Schritt 2: Konfigurieren Sie die automatische Komprimierung (keine manuelle Bearbeitung für neue Bilder erforderlich)

Nach der Aktivierung springt das Plugin automatisch auf die Einstellungsseite, die Sie wie folgt konfigurieren können:

1. Automatische Komprimierung einschaltenEinstellungen": Vergewissern Sie sich, dass die Option "Neu hochgeladene Bilder automatisch komprimieren" aktiviert ist (sie ist standardmäßig aktiviert), so dass zukünftige Uploads automatisch komprimiert werden, ohne dass Sie dies manuell tun müssen.
2. Komprimierungsmodus auswählen：
   • Verlustfreie Komprimierung" (Standardoption) wird für Einsteiger empfohlen: nur redundante Daten werden entfernt, kein Verlust an Bildqualität, Komprimierungsrate etwa 30%-50%.
   • Wenn Sie eine höhere Komprimierungsrate wünschen (z. B. wenn die Bildgröße noch zu groß ist), können Sie "Verlustbehaftete Komprimierung" wählen: ein leichter Verlust an Bildqualität (mit bloßem Auge kaum wahrnehmbar), mit einer Komprimierungsrate von bis zu 60%-80% (muss durch Klicken auf "Erweiterte Einstellungen" aktiviert werden).
3. Einstellungen speichernKlicken Sie auf "Einstellungen speichern" unten auf der Seite.

Schritt 3: Stapelkomprimierung vorhandener Bilder (ein Vorgang, netzweite Optimierung)

Wenn die Website bereits eine große Anzahl unkomprimierter Bilder enthält (z. B. zuvor hochgeladene Artikelbilder), können Sie diese mit der Funktion "Stapelkomprimierung" mit einem Klick optimieren:

1. Klicken Sie auf der Smush-Plugin-Seite auf die Registerkarte "Batch Smush" auf der linken Seite.
2. Klicken Sie auf "Jetzt starten" und das Plugin wird automatisch alle Bilder in Ihrer Mediathek scannen.
3. Klicken Sie nach dem Scannen auf "Smush auf XX Bilder anwenden", und das System führt eine Stapelkomprimierung durch (der Vorgang kann einige Minuten dauern, Sie müssen nicht warten, er kann im Hintergrund laufen).
4. Komprimierungsergebnisse anzeigenWenn die Komprimierung abgeschlossen ist, wird "Total Space Saved" (z.B. "12MB saved") angezeigt, und der Volumenvergleich jedes Bildes vor und nach der Komprimierung wird aufgelistet.

Methode 2: Verzögertes Laden (Bilder "bei Bedarf" laden lassen)

Das Prinzip von Lazy Load ist:Das Bild wird erst geladen, wenn der Benutzer zur Bildposition scrolltAuf diese Weise wird der erste Bildschirm (der erste Bereich, den Sie sehen, wenn Sie die Seite öffnen) zuerst geladen. Auf diese Weise werden die Bilder des ersten Bildschirms (der erste Bereich, den Sie sehen, wenn Sie die Seite öffnen) zuerst geladen und die Bilder, die nicht zum ersten Bildschirm gehören (wie die Bilder der folgenden Artikel und der Fußzeile), werden vorerst nicht geladen, was die anfängliche Ladezeit erheblich verkürzt.

Aktivieren Sie verzögertes Laden mit nur einem Klick mit dem Smush-Plugin (keine zusätzlichen Plugins erforderlich)

Smush hat eine eingebaute Ladeverzögerung, so dass Sie kein separates Plugin mit Einrichtungsschritten installieren müssen:

1. Klicken Sie auf der Smush-Plugin-Seite links auf die Registerkarte "Delayed Loading".
2. Aktivieren Sie "Verzögertes Laden aktivieren" und konfigurieren Sie wie unten empfohlen:
   • "Typ des verzögert ladenden Bildes": Wählen Sie alle aus (Bild, Avatar, Thumbnail, etc.).
   • "Bilder für den ersten Bildschirm ausschließen": Es wird empfohlen, dieses Kästchen anzukreuzen (Bilder für den ersten Bildschirm werden nicht verzögert, um sicherzustellen, dass die Benutzer beim Öffnen der Seite schnell den Hauptinhalt sehen können).
   • "Ladeanimation": Belassen Sie es bei der Standardeinstellung (es wird eine leichte Animation angezeigt, um den Benutzer darauf hinzuweisen, dass das Bild geladen wird).
3. Klicken Sie auf "Einstellungen speichern" und das verzögerte Laden wird sofort wirksam.

Überprüfen Sie, ob das verzögerte Laden aktiviert ist.

1. Öffnen Sie eine beliebige Artikelseite der Website (die mehrere Bilder enthält) und drücken Sie F12, um den Browser "Entwicklertools" zu öffnen.
2. Klicken Sie auf die Registerkarte "Web", um die Seite zu aktualisieren und das Laden des Bildes zu beobachten:
   • Beim ersten Laden wird in der Liste "Netzwerk" nur das erste Bild des Bildschirms angezeigt.
   • Wenn Sie auf der Seite nach unten blättern, erscheinen die Ladeeinträge dieser Bilder in der Liste "Netzwerk" erst dann, wenn die Bilder, die nicht auf dem ersten Bildschirm angezeigt werden, sichtbar werden, was anzeigt, dass das verzögerte Laden wirksam ist.

vier. zusätzliche Tipps zur Bildoptimierung, die Neulinge kennen müssen

1. das richtige Bildformat wählen (grundlegender als die Komprimierung)

Die Wahl des richtigen Formats vor dem Hochladen eines Bildes kann die Größe an der Quelle verringern:

• Fotografien / Komplexe BilderMit dem WebP-Format (30%-50% kleiner als JPG und mit besserer Bildqualität) kann das Smush-Plugin automatisch JPG/PNG in WebP konvertieren (aktivieren Sie "Auto Convert to WebP" in "Advanced Settings").
• Einfache Grafiken / IconsVerwenden Sie das PNG-Format (unterstützt transparenten Hintergrund, kleine Größe), vermeiden Sie JPG.
• Verwenden Sie niemals das BMP- oder TIFF-Format.Diese Formate sind sehr groß und nicht für die Verwendung im Internet geeignet.

2. die Größe der Bilder kontrollieren (nicht "große Bilder verkleinern" verwenden)

Viele Neulinge laden ein hochauflösendes Bild (z. B. 3000×2000 Pixel), das sie mit ihrer Kamera aufgenommen haben, direkt hoch und stellen es über WordPress als 300×200 Pixel dar - das ist falsch! Denn der Browser lädt dann immer noch das große Originalbild und verschwendet damit Bandbreite und Zeit.

richtiger Ansatz：

• Verwenden Sie vor dem Hochladen Bildtools (z. B. "Paint" oder "Canva"), um die Größe des Bildes auf die tatsächliche Anzeigegröße zuzuschneiden (z. B. 1200 Pixel Breite für den ersten Bildschirm-Banner).
• Wenn Sie nicht wissen, wie man mit Bildbearbeitungsprogrammen umgeht, können Sie das Plugin "Imsanity" installieren, um große hochgeladene Bilder automatisch auf eine bestimmte Größe zu komprimieren (z. B. maximale Breite 1200 Pixel).

3. vermeiden Sie den Missbrauch von Bildern (mehr ist nicht besser)

• Verwenden Sie keine Bilder für Dinge, die Sie mit Worten erklären können (z. B. einfache Schritt-für-Schritt-Anleitungen).
• Mehrere aufeinanderfolgende Bilder können zu einem rotierenden Bild (z. B. einer Produktanzeige) zusammengefügt werden, um die Anzahl der gleichzeitig geladenen Bilder zu reduzieren.

V. Gemeinsame Problemlösung

1. ist die Bildqualität nach der Komprimierung deutlich schlechter?

• Wenn Sie "verlustbehaftete Komprimierung" verwenden, können Sie die Komprimierungsstärke in den Smush-Einstellungen verringern ("Erweiterte Einstellungen" → "Komprimierungsstärke" auf 50%).
• Es wird empfohlen, "Lossless Compression" + "WebP Format" zu verwenden, um die Größe und Qualität auszugleichen.

2. das verzögerte Laden zu einer abnormalen Anzeige der Bilder führt (z. B. leer, falsch ausgerichtet)?

• Vergewissern Sie sich, dass das erste Bild des Bildschirms ausgeschlossen wurde (wenn dies nicht der Fall ist, kann das erste Bild des Bildschirms verzögert geladen werden und kurz leer bleiben).
• Wenn einige Bilder sofort geladen werden müssen, können Sie den CSS-Klassennamen des Bildes in das Feld "Ausschließen" in den Smush-Einstellungen "Verzögertes Laden" eingeben (einfache Code-Kenntnisse sind erforderlich, Neulinge können das verzögerte Laden auf der Seite, auf der sich das Bild befindet, vorübergehend deaktivieren).

3. keine signifikante Geschwindigkeitssteigerung nach der Optimierung?

• Erneuter Test mit GTmetrix (siehe Tools zur Überprüfung der Website-Geschwindigkeit), überprüfen Sie das "Wasserfalldiagramm", um festzustellen, ob sich die Ladezeit der Bilder verkürzt hat.
• Wenn sie immer noch langsam ist, kann dies an anderen Faktoren liegen (z. B. langsame Serverreaktion, zu viele Plug-ins) und muss mit weiteren Optimierungsmethoden kombiniert werden (z. B. Aktivierung des Caching).

kurz

Die Bildoptimierung ist die Operation mit dem höchsten ROI bei der Optimierung der Website-Geschwindigkeit - mit dem Smush-Plugin dauert die Einrichtung nur 10 Minuten, und Sie können die Ladezeit von Bildern um mehr als 50% reduzieren. Die wichtigsten Schritte sind: Smush installieren → automatische Komprimierung und Stapelkomprimierung aktivieren → verzögertes Laden aktivieren (Bilder des ersten Bildschirms ausschließen).

Denken Sie daran, dass das Prinzip der Bildoptimierung "gerade genug" ist: Sie müssen nicht die ultimative Komprimierungsrate anstreben oder ultrahochauflösende Bilder hochladen, am besten ist es, ein Gleichgewicht zwischen Bildqualität und Geschwindigkeit zu finden, damit die Nutzer den Inhalt sehen und gleichzeitig schnell laden können.