So servieren Sie skalierte Bilder in WordPress (Element in GTmetrix)

Müssen skalierte Bilder in WordPress bereitstellen?


Dies bedeutet nur, dass Sie die Größe großer Bilder ändern müssen, um sie kleiner zu machen.

GTmetrix Hier erfahren Sie, welche Bilder skaliert werden müssen und auf welche Abmessungen sie zugeschnitten oder in der Größe geändert werden sollen. Ändern Sie als Nächstes die Größe des Bilds (skalieren Sie es) und ersetzen Sie alte Bilder durch neue.

Skalierte Bilder bereitstellen

Da GTmetrix nur nicht optimierte Bilder für die einzelne Seite anzeigt, die Sie testen, beginnen Sie mit der Skalierung Sitewide Bilder Bilder, die auf mehreren Seiten angezeigt werden (Ihre Logo-, Seitenleisten- und Fußzeilenbilder). Führen Sie als Nächstes Ihre anderen Seiten durch GTmetrix und skalieren Sie einzelne Bilder auf diesen.

Kann ich ein Plugin verwenden, um Bilder automatisch zu skalieren??
Unwahrscheinlich. Sie können in den meisten Bildoptimierungs-Plugins eine maximale Breite + Höhe festlegen. Unterschiedliche Bereiche Ihrer Site erfordern jedoch bestimmte Abmessungen (Bilder müssen entsprechend skaliert werden)..

Erstellen Sie einen Spickzettel für die Bildbemaßung.
Der beste Weg, um skalierte Bildfehler zu vermeiden, besteht darin, die Abmessungen der einzelnen Bereiche Ihrer Website (Schieberegler, Widgets, Logo, Blogbilder in voller Breite usw.) zu ermitteln. Erstellen Sie als Nächstes einen Spickzettel für die Bildbemaßung, in dem die Abmessungen der einzelnen Bereiche aufgeführt sind. Wenn Sie dem Spickzettel Ihrer Bildabmessungen folgen und die Größe der Bilder vor dem Hochladen ändern, sollten Sie nie wieder skalierte Bildfehler angezeigt haben.

1. Finden Sie übergroße Bilder in GTmetrix

Führen Sie eine Seite durch GTmetrix und zeigen Sie skalierte Bildfehler auf der Registerkarte PageSpeed ​​an. Erweitern Sie die Empfehlungen, und Sie sehen die richtigen Abmessungen, auf die die Größe jedes Bilds angepasst werden soll. Beachten Sie, dass GTmetrix nur Fehler für die einzelne Seite anzeigt, die Sie testen.

Skalierte Bilder servieren GTmetrix

Du kannst auch Überprüfen Sie manuell, ob Bilder skaliert sind. Klicken Sie zunächst mit der rechten Maustaste und kopieren Sie die Bildadresse.

Bildadresse kopieren

Fügen Sie als Nächstes die Bild-URL in eine neue Browser-Registerkarte ein. Wenn Sie das auf Ihrer Website angezeigte Bild mit Ihrer Bild-URL vergleichen, werden Sie feststellen, dass sich die Größe merklich unterscheidet. Das heißt, das Bild muss skaliert werden. Wenn Sie die beiden Variationen Ihres Bildes nebeneinander vergleichen, können Sie sehen, wie groß das Bild tatsächlich ist (und warum die Seite, auf der es sich befindet, möglicherweise sehr langsam geladen wird)..

Skaliertes oder nicht skaliertes Bild

2. Ändern Sie die Größe der Bilder, um die Abmessungen zu korrigieren

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

Skalieren von Image GIMP

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

Skalieren von Bildern im WordPress Media Editor

3. 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.

Unskaliertes Widget-Bild

Skaliertes Widget-Bild

4. Testen Sie die Seite erneut in GTmetrix

Testen Sie die Seite erneut in GTmetrix, und Sie sollten keine skalierten Bildfehler mehr haben.

100% skalierte Bilder bereitstellen

5. Servieren Sie skalierte Bilder auf Mobilgeräten

Das Bereitstellen skalierter Bilder ist auf Mobilgeräten anders.

Wenn Sie sich für ein kostenloses GTmetrix-Konto anmelden, können Sie Ihr Konto testen Geschwindigkeit der mobilen Website auf Android. Wenn Ihre Website nicht verwendet wird, werden wahrscheinlich mehr Fehler beim Skalieren von Bildern angezeigt adaptive Bilder, Dies bedeutet, dass die Größe von Bildern für mobile Geräte automatisch geändert wird (dies erfolgt normalerweise über ein Plugin)..

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

GTmetrix Mobile Test

Skalierte Bilder auf Mobilgeräten bereitstellen

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

Maximale Hintergrundbreite

Schritt 3: Installieren Sie ein Adaptive Images-Plugin von ShortPixel oder Adaptive Bilder.

Adaptive ShortPixel-Bilder

Schritt 4: Stellen Sie die von GTmetrix bereitgestellten Abmessungen als ein Hintergrund maximale Breite.

Hintergrund Maximale Breite

Schritt 5: Führen Sie Ihre Website durch den mobilen Test von GTmetrix erneut aus, um sicherzustellen, dass keine Fehler vorliegen.

GTmetrix Mobile Test

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

6. Ändern Sie die Größe von Bildern auf mehreren Seiten

Wenn Sie dasselbe Bild auf mehreren Seiten verwenden und es skaliert werden muss, können Sie die Größe des Bilds ändern, den HTML-Code kopieren und es dann mit dem Plugin “Better Search Replace” auf mehreren Seiten korrigieren.

Schritt 1: Installiere das Bessere Suche Plugin ersetzen.

Schritt 2: Kopieren Sie den HTML-Code des alten Bildes und fügen Sie ihn in das Feld “Suchen nach” im Plugin “Better Search Replace” ein. Du kannst den … benutzen WordPress Text Editor um den HTML-Code des Bildes anzuzeigen. Hinweis: Better Search Replace ersetzt ein Bild nur, wenn es genau den HTML-Code enthält, den Sie im Plugin eingegeben haben.

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

Servieren Sie skaliertes Bild-HTML

Schritt 4: Wählen Sie die Tabellen (z. B. Beiträge) aus, die gescannt werden sollen, und deaktivieren Sie das Kontrollkästchen Trockenscan.

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

7. 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 vor dem Hochladen ändern können. Sie finden diese Abmessungen in GTmetrix (nur wenn Sie skalierte Bildfehler angezeigt haben) oder im CSS-Stylesheet Ihres Themas.

Beispiel:

  • Schiebereglerbilder: 1900 (B) x 400 (H)
  • Karussellbilder: 115 (w)
  • Widget-Bilder: 414 (w)
  • Bilder von Blogposts in voller Breite: 680 (w)
  • Ausgewählte Bilder: 250 (B) x 250 (H)
  • Yoast Facebook OG Bild: 1200 (B) x 628 (H) – Schritt 11
  • Yoast Twitter OG Bild 1024 (B) x 512 (H) – Schritt 11

Rechteck mit 680 Pixel Breite

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

8. WordPress-Plugins zum Bereitstellen skalierter Bilder

Die meisten Bildoptimierungs-Plugins bieten 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 in verschiedenen Bereichen Ihrer Website unterschiedliche Dimensionen erforderlich sind. Es dient eher dazu, sicherzustellen, dass Ihre Bilder nicht absolut riesig sind. Wie das Imagify-Plugin sagt, sollte die maximale Breite nicht kleiner sein als Ihr größtes Miniaturbild.

Smush

Ändern Sie die Größe von Bildern Smush

Stellen Sie sich vor

Bilder in der Größe ändern Stellen Sie sich vor

EWW Image Optimizer

Größe der Bilder ändern EWWW

Andere Bildoptimierungen

Ich habe ein vollständiges Tutorial über geschrieben Bilder in WordPress optimieren welches beinhaltet:

  • Bilder komprimieren
  • Bilder über ein CDN bereitstellen
  • Ändern der Größe von GIFS
  • EXIF-Daten entfernen
  • Faules Laden von Bildern + Videos
  • Cloudflare Mirage, Polnisch, Hotlink-Schutz

Bildoptimierungen in GTmetrix

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

  • So richten Sie WP Rocket ein (das von mir empfohlene Cache-Plugin)
  • Cloudways vs. SiteGround (die beiden Top-Hosts, die ich empfehle)
  • Wie ich 100% GTmetrix Scores bekam (WordPress Speed ​​Guide)

Ich habe auch ein tolles Video über die Geschwindigkeitsoptimierung in WordPress:

Häufig gestellte Fragen

&# x2705; Kann ich ein Plugin verwenden, um skalierte Bilder bereitzustellen??

Nein, unterschiedliche Bereiche Ihrer Website erfordern unterschiedliche Bildabmessungen. Sie müssen Bilder skalieren, um sie an diese eindeutigen Abmessungen anzupassen.

&# x2705; Was ist der einfachste Weg, um ein Bild zu skalieren??

Laden Sie das Bild herunter, schneiden Sie es in einem Programm wie Photoshop oder Gimp zu / ändern Sie die Größe, und ersetzen Sie dann das alte Bild durch das neue.

&# x2705; Welche Bilder soll ich zuerst skalieren??

Skalieren Sie zunächst Bilder, die auf mehreren Seiten angezeigt werden, z. B. Ihr Logo, Ihre Seitenleiste, Bilder, Fußzeilenbilder und andere.

&# x2705; Wo finde ich die richtigen Abmessungen eines Bildes??

GTmetrix teilt Ihnen die korrekten Abmessungen jedes Bilds mit, wenn Sie das Element auf der Registerkarte PageSpeed ​​erweitern.

&# x2705; Wie optimiere ich ein Bild vollständig??

Skalieren Sie es auf die richtigen Abmessungen, komprimieren Sie es und entfernen Sie EXIF-Daten mit einem Bildprogramm oder einem Plugin. Stellen Sie dann sicher, dass Sie die Bildabmessungen (Breite und Höhe des Bildes festlegen) im HTML-Code angeben.

Ich hoffe, Sie fanden dieses Tutorial hilfreich! Wenn Sie immer noch skalierte Bildfehler auf Ihrer WordPress-Site haben, hinterlassen Sie mir einen Kommentar mit Ihrer Frage und ich werde Ihnen helfen, wo immer ich kann.

Prost,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map