TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

68

Google ist die dominierende Suchmaschine unter den englischsprachigen Nutzern. Aufgrund dieser Tatsache befolgen WordPress-Site-Besitzer ernsthaft die Richtlinien und Möglichkeiten, die im Google PageSpeed ​​Insights-Tool gezeigt werden. Eine der beliebtesten Warnmeldungen im PageSpeed-Tool ist das Korrigieren von Bildern, die im traditionellen Format bereitgestellt werden, auf Serverbildern in Formaten der nächsten Generation. In diesem Artikel erklären wir, wie Sie diese Warnung in WordPress-Sites beheben können, um Ihre Bilder zu optimieren.

Verwandte: Wie behebt man die kumulative Layoutverschiebung in WordPress?

Warnung in Google PageSpeed ​​Insights

Rufen Sie die Seite des Google PageSpeed ​​Insights-Tools auf und testen Sie die URL Ihrer Webseite. Sie sollten eine Gelegenheit sehen, die "Serverbilder in Formaten der nächsten Generation" wie unten zeigt. Sie können die potenziellen Größeneinsparungen für jedes Bild und die geschätzten Einsparungen bei der Seitenladezeit sehen.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

PageSpeed-Warnung Bilder in Formaten der nächsten Generation bereitstellen

Hinweis: Google sagt, dass dies eine Chance ist und keinen Einfluss auf den PageSpeed-Performance-Score hat. Das Entfernen dieser Warnung erhöht jedoch die Punktzahl in der Realität erheblich.

Bildformate der nächsten Generation

Bevor wir weitermachen, müssen Sie die Bildformate verstehen. Es gibt drei traditionelle und beliebte Bildformate:

  • Joint Photography Experts Group (JPEG oder JPG) – unterstützt verlustbehaftete Komprimierung
  • Portable Network Graphics (PNG) – unterstützt transparente und verlustfreie Komprimierung und den Austausch von GIF
  • Graphics Interchange Format (GIF) – ein Bitmap-Format unterstützt das Loopen mehrerer Frames.

Jetzt gibt es neue Next-Gen-Formate, die für Websites empfohlen werden:

  • WebP – entwickelt von Google für bessere Komprimierung
  • JPEG 2000 – Verbesserung gegenüber JPEG-Standards bei der Bildkomprimierung
  • JPEG XR – JPEG-Format mit erweitertem Bereich, entwickelt von Microsoft

Sie können die Galerie von Google überprüfen, um verschiedene Bilder visuell zu vergleichen. Die Formate der nächsten Generation tragen dazu bei, die Bildgröße erheblich zu reduzieren und so die Seitenladegeschwindigkeit zu erhöhen. Laut Wikipedia unterstützen 92% der Browser das WebP-Format, was es zu einem vielversprechenden Ersatz für das traditionelle Format macht. Daher müssen Sie mit der Verwendung des WebP-Formats beginnen, um die Warnung für Serving-Bilder in Formaten der nächsten Generation im PageSpeed ​​Insights-Tool zu entfernen.

Konvertierung von Bildformaten

Obwohl Google das leichtgewichtige Bildformat vorantreibt, sind sie bei Anwendungsentwicklern nicht sehr beliebt. Viele Anwendungen unterstützen das Erstellen von Bildern in diesen Formaten nicht. So bietet beispielsweise SnagIt – das beliebte Screen-Capturing-Tool für Blogger – keine Möglichkeit, Bilder im Next-Gen-Format zu erstellen. Sie können im traditionellen Format wie PNG oder JPEG erstellen.

Jetzt ist es schwierig, eine Anwendung zum Erstellen von Bildformaten der nächsten Generation zu finden. Stattdessen können Sie PNG- oder JPEG-Bilder auf Ihre WordPress-Site hochladen und sie mit einem Plugin in eines der Bildformate der nächsten Generation konvertieren. Dies ist ein effektiver und einfacher Weg, da Sie Ihr Arbeitsmodell nicht ändern müssen.

Da Google der proprietäre Eigentümer des WebP-Formats ist, unterstützen viele Plugins die Konvertierung herkömmlicher Bilder in das WebP-Format. Hier erklären wir, wie Sie Ihre Bilder in WebP konvertieren und „Bilder im Format der nächsten Generation bereitstellen” im PageSpeed ​​Insights-Tool beheben.

WebP-Plugins für WordPress

Es gibt einige beliebte Plugins für die WebP-Konvertierung.

SG-Optimierer für SiteGround

Wenn Sie auf SiteGround hosten, ist die beste Option die Verwendung des SG Optimizer-Plugins. Dies funktioniert sofort, um WebP-Bilder von Ihrem Server zu konvertieren und bereitzustellen. Sie können die Komprimierungsstufe auswählen, um die Qualität der konvertierten Bilder zu steuern und gleichzeitig alle Originalbilder beizubehalten. Lesen Sie unseren früheren Artikel zum Bereitstellen von WebP-Bildern in SiteGround.

  • Sie können einfach die Option „WebP-Kopien neuer Bilder generieren” im Abschnitt „SG-Optimierer > Bildoptimierung” aktivieren.
  • Klicken Sie auf die Schaltfläche „Bulk Generate WebP Files”, um WebP-Bilder für alle Ihre vorhandenen Bilder mit verlustfreier oder vordefinierter verlustbehafteter Komprimierungsstufe zu generieren.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

WebP-Option im SG-Optimierer-Plugin

SEO-Angebot: Optimieren Sie Ihre Website mit der 14-tägigen kostenlosen Testversion von Semrush Pro.

Smush Pro

Smush ist ein weiteres beliebtes Bildkomprimierungs-Plugin mit mehr als 1 Million aktiven Installationen. WebP ist jedoch eine Premium-Option in diesem Plugin und Sie müssen ein Abonnement von 5 USD pro Monat (Jahresplan) bezahlen, um diese Funktion zu nutzen.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Smush Pro WebP-Option

Autooptimieren

Dieses Plugin bietet eine On-the-Fly-Bildoptimierung mit WebP-Konvertierung mit dem ShortPixel-CDN-Dienst. Obwohl dies eine gute Option ist, CDN und WebP zu kombinieren, gibt es einen Haken. Sie haben ein Limit für die kostenlose Bereitstellung von bis zu 100 Bildern pro Monat. Wenn Sie mehr benötigen, müssen Sie 3,99 USD pro Monat bezahlen, um den Premium-Plan für bis zu 5000 Bilder zu starten. Dies ist eine kostspielige Option, wenn Sie eine große Anzahl von Bildern komprimieren und bereitstellen möchten. Wenn Sie Autoptimize testen möchten, gehen Sie nach der Installation und Aktivierung des Plugins zum Abschnitt „Einstellungen > Autoptimize > Bilder”.

  • Aktivieren Sie das Kontrollkästchen "Bilder optimieren".
  • Wählen Sie die Bildoptimierungsstufe als glänzend, verlustfrei oder verlustbehaftet.
  • Aktivieren Sie das Kontrollkästchen "WebP oder AVIF in unterstützten Browsern laden?"
  • Aktivieren Sie "Lazy-Load-Bilder?" Kontrollkästchen.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

WebP-Einstellungen im Autoptimize-Plugin

Klicken Sie auf die Schaltfläche "Änderungen speichern" und testen Sie das PageSpeed ​​Insights-Tool Ihrer Website. Sie sollten sehen, dass die Warnung „Bilder in Formaten der nächsten Generation bereitstellen” jetzt verschwunden ist. Sie werden jedoch im WordPress-Admin-Bereich eine Warnmeldung sehen, dass Ihr ShortPixel-Kontingent verwendet wird und Sie aufgefordert werden, den Plan zu aktualisieren.

Kostenlose WebP-Plugins

Glücklicherweise gibt es nur wenige kostenlose Plugins wie WebP Express und WebP Converter for Media. In diesem Artikel erklären wir den Vorgang mit dem WebP Converter for Media-Plugin.

Installieren Sie WebP Converter für Medien-Plugin

Melden Sie sich bei Ihrem WordPress-Admin-Panel an und navigieren Sie zum Abschnitt „Plugins > Neu hinzufügen”. Geben Sie „webp” in das Suchfeld ein, um die Ergebnisse zu filtern und das WebP Converter for Media-Plugin zu finden. Klicken Sie auf die Schaltfläche „Installieren” und aktivieren Sie dann das Plugin auf Ihrer Seite.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Installieren Sie WebP Converter für Medien-Plugin

Aktivieren Sie die WebP-Bildkonvertierung

Nach der Aktivierung des Plugins sehen Sie eine Meldung wie unten und klicken auf die Schaltfläche „Meine Website beschleunigen”. Alternativ können Sie zum Menü „Einstellungen > WebP Converter” gehen, um die Einstellungsseite des Plugins zu erreichen.

  • Wählen Sie als Bildlademodus „via .htaccess (empfohlen)” aus.
  • Wählen Sie JPEG, JPG und PNG für unterstützte Dateierweiterungen.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Bildlademodus und Dateierweiterungen

  • Wählen Sie für eine Liste der unterstützten Verzeichnisse die Option „/uploads”. Stellen Sie sicher, dass Sie die Bilder aus dem standardmäßigen WordPress-Upload-Ordner bereitstellen. Wenn Sie Ihre Bilder in die Subdomain verschoben haben, wählen Sie dieses Verzeichnis aus, damit das Plugin ordnungsgemäß funktioniert.
  • Wählen Sie als Konvertierungsmethode die Option „GD (empfohlen)”.
  • Wählen Sie schließlich die Bildqualität nach Ihren Wünschen. Das Plugin verwendet 85% als Standardqualitätswert für die WebP-Konvertierung.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Verzeichniskonvertierung und Qualität

Das Plugin verwendet auch einige zusätzliche Funktionen zur zusätzlichen Bildoptimierung. Sie können die Standardwerte unverändert lassen oder die erforderlichen Werte für Ihren Bedarf aktivieren und deaktivieren. Sie können beispielsweise das von uns empfohlene Browser-Caching für WebP-Dateien auswählen und die Entfernung größerer WebP-Dateien auswählen. Klicken Sie auf die Schaltfläche "Änderungen speichern", nachdem Sie alle Ihre Optionen ausgewählt haben.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Zusatzfunktionen

Bilder neu generieren

Das WebP Converter for Media-Plugin bietet auch die Möglichkeit, alle Ihre Bilder neu zu generieren, um sie in das WebP-Format zu konvertieren. Dies ist nützlich, wenn Sie vor der Installation des Plugins Bilder auf die Site hochgeladen haben.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

WebP-Bilder neu generieren

In Google Chrome einchecken

Nachdem Sie alle vorhandenen Bilder neu generiert haben, können Sie die Website in Google Chrome öffnen und überprüfen. Sie sollten sehen, dass die WebP-Bilder aus dem Abschnitt mit den Entwicklertools bereitgestellt werden. In diesem Artikel erfahren Sie, wie Sie überprüfen können , ob WebP-Bilder im Chrome-Browser bereitgestellt werden. Wenn Sie Browser-Caching aktiviert haben, kopieren Sie einfach die Bild-URL und sehen Sie, dass der Dateiname .webp enthält.

Server-Support-Problem

Leider unterstützen nicht alle Webserver die WebP-Konvertierung. Diese finden Sie, wenn in den Plugin-Einstellungen der Abschnitt „Konvertierungsmethode” deaktiviert ist. Auf Ihrem Server sollte eine unterstützte GD- oder Imagick-Bibliothek installiert sein, um das WebP-Format zu unterstützen. Andernfalls zeigt das Plugin einen Fehler an und Sie sollten die WebP-Konvertierung nicht verwenden können. Soweit wir es getestet haben, unterstützen Shared-Hosting- Server von Bluehost keine WebP-Konvertierung und Sie sehen eine Fehlermeldung wie unten.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Serverkonfigurationsfehler für WebP

In diesem Fall müssen Sie mit dem Host besprechen, um die erforderliche Unterstützung für WebP-Images zu aktivieren.

Caching für WebP-Bilder mit WP Rocket aktivieren

Wie bereits erwähnt, bietet das WebP Converter for Media-Plugin eine Option zum Aktivieren des Browser-Caching für WebP-Bilder. Dies hilft Ihnen, das Laden der Seite zu beschleunigen, indem Sie die Browser anweisen, die Bilder zwischenzuspeichern, wenn der Benutzer dieselben Bilder erneut öffnet. Diese Option ist jedoch bei vielen anderen Plugins nicht verfügbar und Sie sollten dies mit den Einstellungen Ihres Caching-Plugins kombinieren. Wenn Sie beispielsweise WP Rocket verwenden, stellen Sie sicher, dass das Kontrollkästchen für das Browser-Caching im Abschnitt „Bilder” aktiviert ist. Dadurch kann das Plugin WebP-Bilder zwischenspeichern und in den unterstützten Browsern bereitstellen.

Wie behebt man das Problem mit der Bereitstellung von Bildern in Formaten der nächsten Generation in WordPress?

Aktivieren Sie die WebP-Unterstützung in WP Rocket

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen