Wie man Bilder in WordPress richtig skaliert (PageSpeed Insights + GTmetrix Item)

Wenn Sie Ihre Website über PageSpeed Insights oder GTmetrix ausgeführt haben, wird möglicherweise eine Empfehlung zur korrekten Größe von Bildern angezeigt.

Um Bilder in WordPress richtig zu skalieren, erweitern Sie das Element in PageSpeed Insights und zeigen Sie an, welche Bilder zu groß sind. Ändern Sie die Größe auf die richtigen Abmessungen (in Ihrem GTmetrix Legacy-Bericht). Ersetzen Sie schließlich das alte Bild durch das neue. Testen Sie Ihre Website erneut und es sollte 100% sein.

Da PageSpeed Insights nur nicht optimierte Bilder für die einzelne Seite anzeigt, die Sie testen, ändern Sie zunächst die Größe der siteweiten Bilder, die auf Ihrer Website angezeigt werden (Logo-, Seitenleisten- und Fußzeilenbilder). Führen Sie als Nächstes andere Seiten über PageSpeed Insights aus und ändern Sie die Größe Ihrer Bilder auf diesen.

Kann ich ein Plugin verwenden, um die Größe von Bildern automatisch zu ändern?
Wahrscheinlich nicht. Sie können eine maximale Breite + Höhe in den meisten Bildoptimierungs-Plugins festlegen. Verschiedene Bereiche Ihrer Website erfordern jedoch bestimmte Abmessungen (die Größe der Bilder muss entsprechend geändert werden).

Erstellen Sie einen Spickzettel für die Bilddimension.
Der beste Weg, um Bildfehler in der richtigen Größe zu vermeiden, besteht darin, die Abmessungen der verschiedenen Bereiche Ihrer Website zu ermitteln (Schieberegler, Widgets, Logo, Blogbilder in voller Breite usw.). Erstellen Sie als Nächstes einen Spickzettel für die Bilddimension mit den Abmessungen jedes Bereichs. Wenn Sie Ihren Spickzettel für die Bildabmessungen befolgen und die Größe der Bilder vor dem Hochladen ändern, sollten Sie niemals Bildfehler in der richtigen Größe haben.

Finden Sie übergroße Bilder in GTmetrix Legacy-Berichten

GTmetrix Legacy-Berichte zeigen Ihnen die richtigen Abmessungen für Ihre großen Bilder.

Erstellen Sie ein kostenloses GTmetrix-Konto und gehen Sie zu Konten > Standard für Legacy-Berichte > aktivieren.

Führen Sie eine Seite über GTmetrix aus und zeigen Sie den Abschnitt „Skalierte Bilder bereitstellen“ an. Erweitern Sie ihre Empfehlungen und Sie werden die richtigen Abmessungen sehen, auf die diese Bilder skaliert werden sollten.

Sie können auch manuell überprüfen, ob Bilder zu groß sind. Rechtsklick auf ein Bild > Bildadresse kopieren.

Fügen Sie als Nächstes die Bild-URL in einen neuen Browser-Tab ein. Wenn Sie das auf Ihrer Website gezeigte Bild mit Ihrer Bild-URL vergleichen, werden Sie feststellen, dass es einen spürbaren Unterschied in der Größe gibt. Das bedeutet, dass das Bild skaliert werden muss. Wenn Sie die beiden Variationen Ihrer Bilder nebeneinander vergleichen, können Sie sehen, wie groß das Bild tatsächlich ist (und warum die Seite, auf der es sich befindet, möglicherweise langsam geladen wird).

Ändern Sie die Größe der Bilder auf die richtigen Abmessungen

Laden Sie das alte Bild herunter und öffnen Sie es in Ihrem Bildbearbeitungswerkzeug Ihrer Wahl (ich benutze GIMP). Ändern Sie die Größe und / oder beschneiden Sie das Bild auf die von GTmetrix empfohlenen Abmessungen. Mit einigen Bildbearbeitungswerkzeugen können Sie Bilder komprimieren und EXIF-Daten entfernen, wodurch das Bild noch schneller geladen wird.

Sie können Bilder auch direkt in WordPress zuschneiden und in der Größe ändern:

Ersetzen Sie das alte Bild durch das neue

Laden Sie Ihr neues Bild in WordPress hoch und ersetzen Sie das alte Bild durch das neue.

Testen Sie die Seite erneut in GTmetrix

Testen Sie die Seite erneut in GTmetrix (oder PageSpeed Insights) und der Fehler sollte behoben sein.

Bilder auf Mobilgeräten richtig dimensionieren

Die richtige Größe von Bildern ist auf Mobilgeräten unterschiedlich.

Wenn Sie sich für ein Premium-GTmetrix-Konto anmelden, können Sie Ihre mobile Geschwindigkeit auf Android testen. Die Chancen stehen gut, dass Sie mehr Serve Scaled Image-Fehler sehen, wenn Ihre Website keine adaptiven Bilder verwendet, was bedeutet, dass die Größe von Bildern für mobile Geräte automatisch geändert wird (dies wird normalerweise von einem Plugin durchgeführt).

Schritt 1: Führen Sie Ihre Website über den Android-Test von GTmetrix aus:

Schritt 2: Finden Sie die von GTmetrix bereitgestellten mobilen Hintergrundabmessungen:

Schritt 3: Installieren Sie ein Plugin für adaptive Bilder (ich empfehle ShortPixel oder Adaptive Bilder).

Schritt 4: Legen Sie die von GTmetrix bereitgestellten Abmessungen als maximale Hintergrundbreite fest.

Schritt 5: Führen Sie Ihre Site erneut durch GTmetrix ’s Mobile Test, um sicherzustellen, dass keine Fehler vorliegen.

Schritt 5: Konfigurieren Sie andere Einstellungen in Ihrem Plugin für adaptive Bilder (ShortPixel enthält WebP-Unterstützung, verzögertes Laden von Bildern, intelligentes Zuschneiden und Entfernen von EXIF-Daten). Diese können auch helfen.

Ändern der Größe von Bildern auf mehreren Seiten

Wenn Sie dasselbe Bild auf mehreren Seiten / Posts verwenden und es repariert werden muss, können Sie die Größe des Bildes ändern, den HTML-Code kopieren und dann das Better Search Replace-Plugin verwenden, um es auf mehreren Seiten zu reparieren.

Schritt 1: Installieren Sie das Better Search Replace Plugin.

Schritt 2: Kopieren Sie den HTML-Code des alten Bildes und fügen Sie ihn in das Feld „Suchen nach“ im Better Search Replace-Plugin ein. Sie können den WordPress-Texteditor verwenden, um den HTML-Code des Bildes anzuzeigen. Beachten: Better Search Replace ersetzt ein Bild nur, wenn es genau den HTML-Code enthält, den Sie im Plugin eingeben.

Schritt 3: Kopieren Sie den HTML-Code des neuen Bildes und fügen Sie ihn in das Feld „Ersetzen durch“ ein.

Schritt 4: Wählen Sie die Tabellen (zB. 2) Sie möchten gescannt und deaktivieren Sie „Als Trockenscan ausführen.“

Schritt 5: Klicken Sie auf „Suchen / Ersetzen“ und das Plugin ersetzt das alte Bild durch das neue.

Erstellen Sie einen Spickzettel für Bildabmessungen

Wie bereits erwähnt, sollten Sie die Abmessungen aller Bereiche Ihrer Website messen, damit Sie die Größe von Bildern ändern können, bevor Sie sie hochladen. Sie können diese Dimensionen in GTmetrix finden (nur wenn Sie Bildfehler in der richtigen Größe haben) oder Sie können sie auch im CSS-Stylesheet Ihres Themas finden.

Die Breite meines Blogs beträgt 680px, daher wurde die Größe jedes einzelnen Bildes in diesem Beitrag auf 680px geändert.

WordPress-Plugins zur korrekten Größe von Bildern

Die meisten Bildoptimierungs-Plugins haben die Möglichkeit, die Größe von Bildern zu ändern, dies ist jedoch nicht sehr effektiv, wenn Sie versuchen, Fehler in GTmetrix zu beheben, da verschiedene Bereiche Ihrer Website unterschiedliche Dimensionen erfordern. Es ist mehr, um sicherzustellen, dass Ihre Bilder nicht absolut riesig sind. Wie das Imagify-Plugin sagt, sollte die maximale Breite nicht kleiner sein als Ihre größte Miniaturansicht.

Smush

Imagify

EWW Image Optimizer

Andere Möglichkeiten zur Optimierung von Bildern

Ich habe ein vollständiges Tutorial zur Optimierung von Bildern in WordPress geschrieben, das Folgendes enthält:

• Komprimieren von Bildern
• Bereitstellen von Bildern von einem CDN
• Ändern der Größe von GIFS
• EXIF-Daten entfernen
• Verzögertes Laden von Bildern + Videos
• Cloudflare Mirage, Polish, Hotlink Protection

Auf der Suche nach mehr Geschwindigkeit Tutorials?
Hier sind andere Tutorials, die ich geschrieben habe:

• WordPress Speed Guide (dieser Leitfaden dauerte ewig)
• So richten Sie WP Rocket ein (das Cache-Plugin, das ich empfehle)

Ich habe auch ein tolles Video zur WordPress-Geschwindigkeitsoptimierung:

Häufig gestellte Fragen