{"id":16283,"date":"2019-11-05T10:07:24","date_gmt":"2019-11-05T10:07:24","guid":{"rendered":"https:\/\/www.ezoic.com\/wie-man-bilder-in-next-gen-formaten-mit-wordpress-dienen\/"},"modified":"2021-07-26T20:21:49","modified_gmt":"2021-07-26T20:21:49","slug":"wie-man-bilder-in-next-gen-formaten-mit-wordpress-dienen","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/de-lang\/wie-man-bilder-in-next-gen-formaten-mit-wordpress-dienen\/","title":{"rendered":"Wie man Bilder in Next-Gen-Formaten mit WordPress dienen"},"content":{"rendered":"<h2><span class=\"ez-toc-section\" id=\"Wie_man_Bilder_in_Next-Gen-Formaten_mit_WordPress_dienen\"><\/span>Wie man Bilder in Next-Gen-Formaten mit WordPress dienen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn Sie k\u00fcrzlich einen Google Pagespeed Insights-Bericht auf Ihrer Website ausgef\u00fchrt haben, ist es wahrscheinlich, dass Sie &#8220;Bilder in Next-Gen-Formaten&#8221; als Empfehlung gesehen haben. Bildformate der n\u00e4chsten Generation sind Dateiformate, die h\u00e4ufig Komprimierungsinformationen enthalten, die in moderne Browser eingebettet sind und das schnellere Laden von Website-Bildern erm\u00f6glichen. Also, wie dienen Sie sie auf Ihrer WordPress-Website, um es schneller zu machen?<\/p>\n<blockquote><p>Bildformate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was schnellere Downloads und weniger Datenverbrauch bedeutet. &#8211; <strong>Googles Beschreibung der Next-Gen-Bildformate.<\/strong> <strong><br \/>\n  <em>(Wirklich hilfreich, nicht wahr?)<\/em><br \/>\n<\/strong><\/p><\/blockquote>\n<p>Wenn Ihre Website WordPress als CMS verwendet, ist es wahrscheinlich, dass Sie die meisten Ihrer Bilder in Ihrem Medienbereich als JPEGs, GIFs und PNGs gespeichert haben. Dies muss sich nicht \u00e4ndern, um Bilder in Next-Gen-Formaten zu bedienen. Tats\u00e4chlich k\u00f6nnen viele Browser Formate der n\u00e4chsten Generation, wie WebP, nicht ordnungsgem\u00e4\u00df laden und erfordern, dass die Website einen Standardbildtyp wie JPEG bedienen kann, wenn der Browser Keine Bildformate der n\u00e4chsten Generation unterst\u00fctzt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6226 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/pagespeedinsights123-min-1024x721.png\" alt=\"Website-Geschwindigkeit\" width=\"908\" height=\"639\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/pagespeedinsights123-min-1024x721.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/pagespeedinsights123-min-300x211.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/pagespeedinsights123-min-768x541.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/pagespeedinsights123-min.png 1137w\" sizes=\"(max-width: 908px) 100vw, 908px\" \/><\/p>\n<p>Also, wie k\u00f6nnen Sie Next-Gen-Bilder auf WordPress dienen, wenn Sie alle Ihre vorhandenen Bilder in den gleichen Formaten zu halten, die sie jetzt sind? K\u00f6nnen Sie einfach ein Plugin herunterladen, das dies alles f\u00fcr Sie tut?<\/p>\n<p><em><strong>Nicht unbedingt, aber es ist fast so einfach.<\/strong><\/em><\/p>\n<p>Die gute Nachricht ist, dass dies keine Codierung erfordert (es sei denn, Sie m\u00f6chten) und sie nicht erfordern, dass Sie alle vorhandenen Bilder manuell ersetzen. Es kann nicht durch <em>JUST<\/em> das Herunterladen eines Plugins getan werden; es gibt jedoch zwei Plugins, die dieses Projekt sehr einfach machen.<\/p>\n<p>Unten zeige ich Ihnen, wie Sie Bilder in Next-Gen-Formaten mit WordPress servieren. Es wird Ihre Website schneller machen und die Empfehlung von Pagespeed Insights eliminieren und gleichzeitig Ihre allgemeine Pagespeed-Bewertung verbessern.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sehen_Sie_sich_mein_Tutorial_zum_Servieren_von_Next-Gen-Bildern_in_WordPress_unten_an\"><\/span>Sehen Sie sich mein Tutorial zum Servieren von Next-Gen-Bildern in WordPress unten an:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/ZTPnk5wixis\" width=\"640\" height=\"385\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Kann_ich_Bildformate_der_naechsten_Generation_verwenden_wenn_meine_Website_JPEGs_oder_PNGs_verwendet\"><\/span>Kann ich Bildformate der n\u00e4chsten Generation verwenden, wenn meine Website JPEGs oder PNGs verwendet?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Servieren von Bildern der n\u00e4chsten Generation in der Art und Weise, wie ich Ihnen zeigen werde, dass Sie keine vorhandenen Bilddateien auf Ihrer Website ersetzen oder \u00e4ndern m\u00fcssen. Dies ist in der Regel das, was Webmaster verwirrt und verhindert, dass viele Websites ordnungsgem\u00e4\u00df Bildformate der n\u00e4chsten Generation verwenden. Die meisten Websites sind mit g\u00e4ngigen Bildformaten wie JPEG und PNG vertraut. Beide dieser Dateiformate k\u00f6nnen immer noch verwendet werden, w\u00e4hrend auch die Bereitstellung von Besuchern der n\u00e4chsten Generation Bildformate, wenn sie Ihre WordPress-Website in Browsern besuchen, die diese neuen Dateitypen unterst\u00fctzen.<\/p>\n<p>Das Video-Tutorial oben sollte Sie durch alles gehen, was Sie wissen m\u00fcssen, aber f\u00fcr den Fall, dass Sie wie ich sind und es vorziehen, Wegbeschreibungen zu lesen (oder schnell vorauszuspringen), habe ich die Schritt-f\u00fcr-Schritt-Anleitungen f\u00fcr die Bereitstellung von Bildern der n\u00e4chsten Generation auf WordPress-Websites im Text unten erstellt .<\/p>\n<p><strong>dementi:<\/strong> <em>Es gibt mehrere M\u00f6glichkeiten, um \u00fcber die Bereitstellung von Next-Gen-Formate f\u00fcr Besucher innerhalb WordPress gehen; Dies ist jedoch eine der einfachsten M\u00f6glichkeiten, die ich auf mehreren Websites getestet gesehen habe. Dar\u00fcber hinaus erfordert diese Strategie Null-Codierung und kann in etwa 30 Minuten durchgef\u00fchrt werden.<\/em><\/p>\n<p><strong>Was Sie dazu ben\u00f6tigen:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/webp-express\/\" target=\"_blank\" rel=\"noopener\">WebP Express-Plugin<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/#developers\" target=\"_blank\" rel=\"noopener\">Das ShortPixel Plugin<\/a><\/li>\n<li><a href=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\" rel=\"noopener\">Ein ShortPixel-Konto<\/a><\/li>\n<\/ul>\n<p><strong>Wie lange wird es dauern?<\/strong><\/p>\n<ul>\n<li>30 Minuten oder weniger zum Einrichten<\/li>\n<\/ul>\n<p><em>Es kann ein oder zwei Stunden dauern, bis Bilder je nach Gr\u00f6\u00dfe Ihrer Website verarbeitet werden, aber dies erfordert keine Anstrengung von Ihnen.<\/em><\/p>\n<p><strong>Welche Art von Bildern der n\u00e4chsten Generation zeigt in diesem Tutorial, wie Sie dienen:<\/strong><\/p>\n<ul>\n<li>WebP<\/li>\n<\/ul>\n<p><em>WebP ist ein Opensource-Bildformat der n\u00e4chsten Generation, das von Google und vielen anderen stark unterst\u00fctzt wird. Es wird derzeit als das beliebteste Next-Gen-Bildformat anbekannt.<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Fuegen_Sie_Plugin_um_Next-Gen-Formate_und_vorhandene_Bildformate_zu_dienen\"><\/span>1. F\u00fcgen Sie Plugin, um Next-Gen-Formate und vorhandene Bildformate zu dienen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das WebP Express Plugin ist ungef\u00e4hr so einfach wie es geht. Es f\u00fcgt eine sehr einfache Codezeile zu Ihrer WordPress-Website hinzu. Der Code basiert auf dem Blog dieses <a href=\"http:\/\/webpjs.appspot.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Entwicklers<\/a> \u00fcber die ordnungsgem\u00e4\u00dfe Bereitstellung von WebP-Bildern f\u00fcr Besucher, wenn sie in unterst\u00fctzten Browsern sind und die Standardbilder Ihrer Website (JPEG usw.) zu verwenden, wenn sie es nicht sind.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6184 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min-1024x158.png\" alt=\"dienen Next-Gen-Format Webp auf WordPress\" width=\"1024\" height=\"158\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min-1024x158.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min-300x46.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min-768x119.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min-1536x237.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T160035.233-min.png 1561w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Dies kann nicht f\u00fcr alle, die diesen Blog lesen erforderlich sein, aber f\u00fcr viele WordPress-Websites, wird es notwendig sein, um sicherzustellen, dass WebP ordnungsgem\u00e4\u00df bedient wird; stellen Sie sicher, dass Ihre vorhandenen Bilder bereitgestellt werden, wenn der Besucher kein WebP-Format rendern kann.<\/p>\n<p>Alles, was Sie tun m\u00fcssen, ist das Plugin herunterzuladen oder innerhalb von WordPress zu suchen. Dann aktivieren Sie einfach das Plugin und es wird seinen Zweck erf\u00fcllt haben. Keine Notwendigkeit, Einstellungen zu konfigurieren.<\/p>\n<ol>\n<li>Gehe zu Plugins<\/li>\n<li>W\u00e4hlen Sie &#8220;Neu hinzuf\u00fcgen&#8221;<\/li>\n<li>Suchen nach &#8220;WebP Express&#8221;<\/li>\n<li>Klicken Sie auf Installieren<\/li>\n<li>Klicken Sie auf Aktivieren<\/li>\n<li>Du bist fertig!<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6189 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/webpexpress-min-1024x358.png\" alt=\"Webp-Bilder in WordPress servieren\" width=\"1024\" height=\"358\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min-1024x358.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min-300x105.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min-768x269.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min-1536x537.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min-1568x548.png 1568w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/webpexpress-min.png 1693w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Dies sollte weniger als 5 Minuten dauern und keine Probleme verursachen.<\/p>\n<p>Dies ist der einfachste Schritt und sollte keine \u00c4nderungen an Ihrer Website oder ihren Bildern verursachen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Verwenden_Sie_WebP-Bilder_waehrend_Alle_vorhandenen_Bilddateien_an_Ort_und_Stelle_bleiben\"><\/span>2. Verwenden Sie WebP-Bilder, w\u00e4hrend Alle vorhandenen Bilddateien an Ort und Stelle bleiben<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich denke, dass einer der Hauptgr\u00fcnde, dass viele WordPress-Publisher derzeit nicht in der N\u00e4chsten-Generation-Bildformate dienen ist, weil sie glauben, dass sie alle ihre vorhandenen Bilder ersetzen oder manuell konvertieren sie irgendwie und sind besorgt \u00fcber die Zeit, Und Schwierigkeiten dabei. Gl\u00fccklicherweise, wenn Next-Gen-Bilder ordnungsgem\u00e4\u00df auf der WordPress-Website eines Herausgebers implementiert werden, sollte es keine Notwendigkeit geben, alle vorhandenen Mediendateien oder Bildformate aktiv zu ersetzen.<\/p>\n<p>Eine der einfachsten M\u00f6glichkeiten, dies zu tun, ist die Verwendung von ShortPixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6200 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-1024x363.png\" alt=\"Bedienen sie Next-Gen-Bildformate in WordPress mit Shortpixel\" width=\"1024\" height=\"363\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-1024x363.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-300x106.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-768x272.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-1536x544.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min-1568x555.png 1568w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel-plugin-min.png 1697w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>ShortPixel ist ein Unternehmen f\u00fcr Bildkomprimierung und Bildoptimierung, das verschiedene Arten von Technologien f\u00fcr Webmaster anbietet. In unserem Fall nutzen wir das ShortPixel Image Optimization Plugin.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\">Laden Sie das ShorPixel Plugin herunter und installieren Sie es<\/a>. Oder finden Sie das Plugin in WordPress, installieren Sie es und aktivieren Sie es.<\/p>\n<p>Vor der Konfiguration des ShortPixel-Plugins sollten Sie <a href=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\" rel=\"noopener\">ein kostenloses ShortPixel-Konto erstellen.<\/a> Es ist kostenlos und erfordert keine Kreditkarte; Ich empfehle jedoch eine kleine Investition, um aus diesem gesamten Projekt noch mehr Wert zu gewinnen.<\/p>\n<p>Sobald Sie ein Konto erstellt haben und sich angemeldet haben, m\u00fcssen Sie nur noch den API-Schl\u00fcssel aus Ihrem Kontomen\u00fc abrufen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6206 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/download-2019-04-09T165636.063-min-1024x469.png\" alt=\"Beschleunigen Sie die Website mithilfe der Bildoptimierung\" width=\"897\" height=\"411\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T165636.063-min-1024x469.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T165636.063-min-300x138.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T165636.063-min-768x352.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-09T165636.063-min.png 1224w\" sizes=\"(max-width: 897px) 100vw, 897px\" \/><\/p>\n<p>Es lohnt sich, die bezahlten Pl\u00e4ne in Betracht zu ziehen, wenn Sie derzeit viele Bilder auf Ihrer Website haben, die zu gro\u00df sind, oder wenn Sie viele PNGs ohne Transparenz im Hintergrund haben, die \u00fcber alle Beitr\u00e4ge und Seiten Ihrer Website verstreut sind. Dar\u00fcber hinaus m\u00fcssen Sie m\u00f6glicherweise die minimale Investition t\u00e4tigen, um alle Funktionen zu sichern, die erforderlich sind, wenn Sie eine Website haben, die \u00e4lter ist und viele Bilder enth\u00e4lt. Die bezahlten Credits sind ziemlich erschwinglich und k\u00f6nnen Ihnen sicherlich helfen, Bilder zu komprimieren, auch wenn Sie <a href=\"https:\/\/blog.ezoic.com\/image-seo-tips-website-owners-digital-publishers\/\" target=\"_blank\" rel=\"noopener\">sie bereits in der Gr\u00f6\u00dfe ge\u00e4ndert und f\u00fcr den richtigen Web-Einsatz gespeichert<\/a>haben.<\/p>\n<p>Die kostenpflichtige Option ist nicht erforderlich, um die Bilder als WebP mit ShortPixel zu verwenden. obwohl ich immer die bezahlte Option verwendet habe, wenn dies zu tun (Sie m\u00fcssen m\u00f6glicherweise eine minimale Investition machen, um alle Funktionen zu sichern).<\/p>\n<p><em>In der Zukunft werde ich ein paar weitere Blogs dar\u00fcber schreiben, was mit den bezahlten Optionen jenseits der blo\u00dfen Komprimierung getan werden kann, aber im Moment werden wir uns nur darauf konzentrieren, Bilder der n\u00e4chsten Generation auf unserer WordPress-Website zu servieren.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6211 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/shortpixel123-min-1024x367.png\" alt=\"Shortpixel f\u00fcr Bilder\" width=\"1024\" height=\"367\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel123-min-1024x367.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel123-min-300x107.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel123-min-768x275.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shortpixel123-min.png 1379w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Jetzt ist es an der Zeit, unser Plugin zu konfigurieren und mit der Bereitstellung unserer WebP-Bilder zu beginnen!<\/strong><\/p>\n<p>Sobald Sie ein Konto haben und beide oben aufgef\u00fchrten Plugins installiert haben, k\u00f6nnen wir ShortPixel so konfigurieren, dass es damit beginnt, alle Besucher in unterst\u00fctzten Browsern der n\u00e4chsten Generation zu bedienen \u2013 insbesondere WebP. Als n\u00e4chstes folgen Sie einfach diesen Schritten innerhalb des WordPress-Administrators:<\/p>\n<ol>\n<li>Gehen Sie &gt; zu Einstellungen ShortPixel<\/li>\n<li>W\u00e4hlen Sie die Registerkarte &#8220;Allgemein&#8221;<\/li>\n<li>Geben Sie den API-Schl\u00fcssel Ihres Kontos in das Feld &#8220;API-Schl\u00fcssel&#8221; ein.<\/li>\n<li>Klicken Sie unten auf &#8220;\u00c4nderungen speichern&#8221;<\/li>\n<li>Klicken Sie nun oben auf die Registerkarte &#8220;Erweitert&#8221;<\/li>\n<li>Scrollen Sie nach unten zum WebP-Bilder-Abschnitt und w\u00e4hlen Sie &#8220;Erstellen Sie auch WebP-Versionen der Bilder, kostenlos.&#8221;<\/li>\n<li>W\u00e4hlen Sie dann &#8220;Die WebP-Versionen der Bilder im Front-End bereitstellen&#8221;<\/li>\n<li>Als n\u00e4chstes haben Sie drei verschiedene Optionen&#8230;\n<ul>\n<li>Es sei denn, ShortPixel zeigt Ihnen, dass Sie &#8220;Ohne \u00c4nderung Seitencode (\u00fcber .htatccess)&#8221; verwenden k\u00f6nnen, empfehle ich die Option &#8220;Nur \u00fcber WordPress-Hooks&#8221;.<\/li>\n<li>Ich hatte Probleme mit jeder Konfiguration <strong><em>au\u00dfer<\/em><\/strong> &#8220;Nur \u00fcber WordPress-Hooks&#8221; an einem bestimmten Punkt, so ist es meine prim\u00e4re Empfehlung f\u00fcr die meisten Websites.<\/li>\n<\/ul>\n<\/li>\n<li>Scrollen Sie nach unten und w\u00e4hlen Sie &#8220;Save and Go To Bulk Process&#8221;<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6216 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-1024x201.png\" alt=\"Webp-Bilder f\u00fcr Website-Besucher bereitstellen, ohne JPGs oder Pngs loszuwerden\" width=\"1060\" height=\"208\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-1024x201.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-300x59.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-768x151.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-1536x301.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min-1568x308.png 1568w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101002.158-min.png 1666w\" sizes=\"(max-width: 1060px) 100vw, 1060px\" \/><\/p>\n<p><strong>Wir sind jetzt im Grunde fertig.<\/strong><\/p>\n<p>Der Massenverarbeitungsbildschirm wird nun in diesem Fenster ausgef\u00fchrt. Wenn Sie Credits bezahlt oder andere Bildoptimierungsoptionen ausgew\u00e4hlt haben, kann es eine Weile dauern, alle Bilder zu verarbeiten. Sie m\u00fcssen das Fenster im Hintergrund ge\u00f6ffnet lassen, bis es abgeschlossen ist.<\/p>\n<p>Wenn Sie eine Website mit vielen Bildern haben, kann es einige Stunden dauern. Die Fortschrittsleiste zeigt Ihnen, wie weit sie entfernt ist.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6221 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101428.692-1024x326.png\" alt=\"Stellen Sie Bilder in Next-Gen-Formaten f\u00fcr Seitengeschwindigkeitseinblicke zur Seite\" width=\"971\" height=\"309\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101428.692-1024x326.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101428.692-300x95.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101428.692-768x244.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T101428.692.png 1145w\" sizes=\"(max-width: 971px) 100vw, 971px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sie_bedienen_jetzt_Besucher_Next-Gen-Bildformate\"><\/span>Sie bedienen jetzt Besucher Next-Gen-Bildformate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn Sie alle diese Schritte befolgt haben, sollte Ihre WordPress-Website jetzt alle Ihre Besucher WebP (Next-Gen-Format) Bilder dienen, wenn sie in unterst\u00fctzten Browsern sind. Wenn der Browser des Besuchers WebP nicht unterst\u00fctzt, sollte ihnen Ihr vorhandenes JPEG-, PNG- und GIF-Format zur Verf\u00fcgung gestellt werden. Alle Ihre vorhandenen Bilder sollten genau dort gespeichert werden, wo sie sich im Medienbereich Ihres WordPress-Administrators befanden.<\/p>\n<p>Wenn Sie vorangingen und ShortPixel verwendet haben, um andere Formen der Bildkomprimierung auf dem Weg zu tun, sollten alle Ihre Website-Besucher jetzt Bilder auf die schnellste, optimale und SEO-freundliche Weise geladen haben, egal was passiert.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Stellen_Sie_sicher_dass_Bilder_der_naechsten_Generation_ordnungsgemaess_gerendert_werden\"><\/span>Stellen Sie sicher, dass Bilder der n\u00e4chsten Generation ordnungsgem\u00e4\u00df gerendert werden.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>1.) L\u00f6schen Sie Ihren Website-Cache und sehen Sie sich Ihre Website an.<\/strong><\/p>\n<p>Stellen wir zun\u00e4chst sicher, dass alle Bilder korrekt angezeigt werden. Wenn Sie mit ShortPixel andere Formen der Komprimierung auf Ihre Bilder angewendet haben, sollten Sie sicherstellen, dass die Design- und Kernlayoutkomponenten Ihrer Website nicht ge\u00e4ndert wurden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6231 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-1024x256.png\" alt=\"Bildverarbeitung f\u00fcr Next-Gen\" width=\"1024\" height=\"256\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-1024x256.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-300x75.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-768x192.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-1536x384.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min-1568x392.png 1568w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/download-2019-04-10T103019.852-min.png 1702w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Wenn ein bestimmtes Bild oder Element Ihres Themas ein Problem darstellt, k\u00f6nnen Sie in den Medienbereich gehen und die urspr\u00fcngliche Version dieses Bildes wiederherstellen. Siehe oben.<\/p>\n<p>Wenn alles immer noch wirklich verr\u00fcckt aus irgendeinem Grund aussieht, k\u00f6nnen Sie immer wieder zum Massenverarbeitungsbildschirm zur\u00fcckkehren und alle Bilder mit einem Klick auf eine Schaltfl\u00e4che in ihre urspr\u00fcngliche Form zur\u00fcckbringen. Sie k\u00f6nnen immer wieder den Massenupload machen und die Ausschlussregeln f\u00fcr Plugins verwenden, um zu verhindern, dass bestimmte Bilder verarbeitet werden, die f\u00fcr das Thema Ihrer Website erforderlich sein k\u00f6nnen.<\/p>\n<p><strong>2.) Verwenden Sie ein Tool, um sicherzustellen, dass Ihre Website in allen Browsern gut aussieht<\/strong><\/p>\n<p>Der erste Test ist abgeschlossen. Jetzt m\u00fcssen Sie verstehen, ob alle Ihre Besucher Ihre Website richtig sehen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6236 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/screenshots-min-1024x322.png\" alt=\"Screenshots f\u00fcr mehrere Browser\" width=\"1024\" height=\"322\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min-1024x322.png 1024w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min-300x94.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min-768x241.png 768w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min-1536x483.png 1536w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min-1568x493.png 1568w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/screenshots-min.png 1865w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>F\u00fcr eine einmalige Verwendung empfehle ich die Verwendung <a href=\"https:\/\/crossbrowsertesting.com\/\" target=\"_blank\" rel=\"noopener\">von crossbrowsertesting.com<\/a>. Sie k\u00f6nnen das Tool verwenden, um viele verschiedene Browser, Ger\u00e4tetypen und Versionen gleichzeitig automatisch zu testen. Verwenden Sie die Funktion &#8220;Screenshot&#8221; auf einigen Seiten, um sicherzustellen, dass Ihre Seiten Bilder in den Browsern und Ger\u00e4ten, die am h\u00e4ufigsten von Ihren Besuchern verwendet werden, korrekt anzeigen.<\/p>\n<p>CrossBrowserTesting ist ein kostenpflichtiges Tool\/Service, aber Sie k\u00f6nnen die kostenlose 7-Tage-Testversion ohne Kreditkarte nutzen. Wenn Sie einfach schnell sicherstellen m\u00f6chten, dass das Projekt erfolgreich war, k\u00f6nnen Sie ein Konto einrichten, die Testversion verwenden, um Screenshots zu erstellen, und ein langfristiges Engagement f\u00fcr das Tool vermeiden.<\/p>\n<p>Wenn Sie neugierig sind, welche Browser und Ger\u00e4te Ihre Besucher h\u00e4ufig verwenden, k\u00f6nnen Sie Google Analytics verwenden, um dies zu \u00fcberpr\u00fcfen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6241 aligncenter\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2019\/04\/analytics-browsers-min.png\" alt=\"Google Website Geschwindigkeit\" width=\"851\" height=\"658\" srcset=\"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/analytics-browsers-min.png 964w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/analytics-browsers-min-300x232.png 300w, https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/analytics-browsers-min-768x594.png 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dadurch_werden_%E2%80%9CDienen_von_Bildern_in_Next-Gen-Formaten%E2%80%9D_von_Pagespeed_Insights_los\"><\/span>Dadurch werden &#8220;Dienen von Bildern in Next-Gen-Formaten&#8221; von Pagespeed Insights los.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Jetzt sollten Sie in der Lage sein, Ihre WordPress-Website durch Googles Pagespeed Insights wieder laufen und die Empfehlung, Bilder in Next-Gen-Formaten zu dienen sollte weg sein.<\/p>\n<p>Dar\u00fcber hinaus sollte dies auch den Gro\u00dfteil der zus\u00e4tzlichen Empfehlungen losgeworden sein, die Sie auffordern, &#8220;Bilder effizient zu kodieren&#8221;.<\/p>\n<p>Die einzige Bildoptimierung, die dies m\u00f6glicherweise nicht gel\u00f6st hat, ist <a href=\"https:\/\/blog.ezoic.com\/speed-lazy-loading-images-serving-next-gen-formats\/\" target=\"_blank\" rel=\"noopener\">&#8220;Abschieben von Offscreen-Bildern&#8221;. Das haben wir hier ausf\u00fchrlicher behandelt. <\/a><\/p>\n<p>Schlie\u00dflich, wenn Sie daran interessiert sind, alle Pagespeed Insight Empfehlungen \u00fcber CSS in Ihren Berichten loszuwerden, k\u00f6nnen Sie unseren Blog \u00fcber <a href=\"https:\/\/blog.ezoic.com\/how-to-optimize-critical-css-to-make-your-website-faster\/\" target=\"_blank\" rel=\"noopener\">die Optimierung der CSS-Lieferung hier<\/a>lesen. Die Kombination der obigen Informationen mit unseren Blogs \u00fcber faul ladende Bilder, und die Optimierung von CSS sollte es allen WordPress-Websites erm\u00f6glichen, eine viel schnelle Website-Geschwindigkeitsbewertung innerhalb von Googles beliebtem Tool anzuzeigen.<\/p>\n<p>Wenn Sie irgendwelche Probleme oder Fragen zu diesem Prozess haben, lassen Sie sie bitte unten. Ich bin sicher, dass jemand anderes auf dem Weg von allen Erkenntnissen oder Herausforderungen lernen kann, die Sie erlebt haben, und ich w\u00fcrde mich freuen, sie in den Kommentaren anzusprechen, von denen zuk\u00fcnftige Leser lernen k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wie man Bilder in Next-Gen-Formaten mit WordPress dienen Wenn Sie k\u00fcrzlich einen Google Pagespeed Insights-Bericht auf Ihrer Website ausgef\u00fchrt haben, ist es wahrscheinlich, dass Sie &#8220;Bilder in Next-Gen-Formaten&#8221; als Empfehlung gesehen haben. Bildformate der n\u00e4chsten Generation sind Dateiformate, die h\u00e4ufig Komprimierungsinformationen enthalten, die in moderne Browser eingebettet sind und das schnellere Laden von Website-Bildern erm\u00f6glichen.&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/de-lang\/wie-man-bilder-in-next-gen-formaten-mit-wordpress-dienen\/\"><span class=\"screen-reader-text\">Wie man Bilder in Next-Gen-Formaten mit WordPress dienen<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":4,"featured_media":6248,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"tpgb_global_settings":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-16283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert","entry"],"tpgb_featured_images":{"full":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451.jpg",1000,706,false],"tp-image-grid":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451.jpg",700,494,false],"thumbnail":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451-150x150.jpg",150,150,true],"medium":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451-300x212.jpg",300,212,true],"medium_large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451-768x542.jpg",768,542,true],"large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/04\/shutterstock_688131451.jpg",1000,706,false],"default":"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/plugins\/the-plus-addons-for-block-editor\/assets\/images\/tpgb-placeholder.jpg"},"tpgb_post_meta_info":{"get_date":"5. November 2019","category_list":{"category":[{"term_id":1,"name":"Unkategorisiert","slug":"unkategorisiert","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":169,"filter":"raw"}],"post_tag":false,"post_format":false},"author_name":"Tyler Bishop","author_url":"https:\/\/wp.ezoic.com\/de-lang\/author\/tbishop\/","author_email":"tbishop@ezoic.com","author_website":"","author_description":"","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["administrator"],"author_firstname":"Tyler","author_lastname":"Bishop","user_login":"tbishop","author_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/c6169120a287e2b441f99dab1a6de9f7?s=200&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/c6169120a287e2b441f99dab1a6de9f7?s=400&#038;d=mm&#038;r=g 2x' class='avatar avatar-200 photo' height='200' width='200' loading='lazy' decoding='async'\/>","author_avatar_url":"https:\/\/secure.gravatar.com\/avatar\/c6169120a287e2b441f99dab1a6de9f7?s=96&d=mm&r=g","comment_count":7,"post_likes":0,"post_views":0},"tpgb_post_category":{"category":"<a href=\"https:\/\/wp.ezoic.com\/de-lang\/category\/unkategorisiert\/\" alt=\"Unkategorisiert\" class=\"category-unkategorisiert\">Unkategorisiert<\/a> "},"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/16283"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/comments?post=16283"}],"version-history":[{"count":1,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/16283\/revisions"}],"predecessor-version":[{"id":336092,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/posts\/16283\/revisions\/336092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/media\/6248"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/media?parent=16283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/categories?post=16283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/de-lang\/wp-json\/wp\/v2\/tags?post=16283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}