So laden Sie Bilder schneller auf Ihre WordPress-Site

04.06.2020
WordPress 'So laden Sie Bilder schneller auf Ihre WordPress-Site
0 10 мин.

Sie möchten also, dass Ihre Bilder schneller geladen werden?


Nun, ich werde nicht fleißig sein. Tauchen wir gleich in die guten Sachen ein!

Es gibt drei Möglichkeiten, um das Laden von Bildern in WordPress zu beschleunigen:

  • Größe ändern
  • Komprimieren
  • Faule Ladung

In diesem Beitrag werde ich erklären, wie jede dieser Techniken funktioniert und warum Ihre Website dadurch schneller geladen wird. Ich werde Ihnen auch zeigen, wie Sie jede Taktik mit manuellen Lösungen und Plugin-Empfehlungen implementieren.

Diese erste Technik ist extrem einfach, wird aber von WordPress-Neulingen oft übersehen.

So optimieren Sie Bilder in WordPress

Ändern Sie die Größe Ihrer Bilder

Der absolut einfachste Weg, um das Laden Ihrer Bilder zu beschleunigen, besteht darin, die Größe zu ändern. Lassen Sie mich erklären.

Was ist die Größenänderung??

Wenn ich “Größe ändern” sage, möchte ich die Abmessungen eines Bildes ändern. In diesem Fall möchten Sie die Abmessungen zu großer Bilder reduzieren.

Zum Beispiel machen Blogger manchmal Fotos auf ihren Handys oder ihrer Digitalkamera und laden sie in ihre Blogs hoch. Die unbearbeiteten Kopien der Fotos können bis zu 5.000 Pixel breit sein. Denken Sie jetzt darüber nach …

Die Breite des Post-Abschnitts auf Ihrer Website ist wahrscheinlich nicht breiter als 800 Pixel. Der Text, den Sie gerade lesen, erstreckt sich nur über ca. 700 Pixel auf der Seite. Stellen Sie sich also vor, Sie fügen hier ein Bild mit einer Breite von 5.000 Pixel hinzu. Es wäre viel größer als es sein muss und obwohl es verkleinert würde, um auf die Seite zu passen, ist die geladene Bilddatei immer noch massiv und äußerst verschwenderisch. Und das liegt daran, dass …

Bilder mit größeren Abmessungen haben auch größere Dateien.

Wenn es um die Leistung und das schnellere Laden Ihrer Bilder geht, können Sie durch Verringern der Bildabmessungen die Dateigröße drastisch verringern. Dadurch wird das Laden des Bilds beschleunigt.

Kehren wir zu meinem Beispiel zurück und nehmen an, dass das Bild 5.000 Pixel breit und hoch ist. Wenn Sie es von 5.000 Pixel auf nur 700 Pixel reduzieren, würde das Bild tatsächlich 99% weniger Pixel verbrauchen. Mit anderen Worten würde sich die Dateigröße um etwa 99% verringern. Wenn das Bild 5 MB groß wäre, würde es nur 50 KB groß sein und 99% schneller auf Ihrer Website geladen werden.

Ändern Sie die Größe von Bildern

Wenn Sie nicht vorhaben, die Größe Ihrer Bilder sorgfältig zu ändern, müssen mit ziemlicher Sicherheit einige Gewinne erzielt werden.

Es gibt verschiedene Möglichkeiten, die Größe Ihrer Bilder so zu ändern, dass sie perfekt zur Website passen.

Ändern Sie die Größe Ihrer Bilder manuell

Bevor Sie ein neues Bild auf Ihre Site hochladen, ändern Sie die Größe manuell mithilfe der integrierten Bildbearbeitungswerkzeuge auf Ihrem Computer.

Wenn Sie ein extrem großes Bild wie in meinem Beispiel haben, macht dies sofort einen großen Unterschied. Nachdem die Größe des Bildes geändert wurde, können Sie es in Ihre Medienbibliothek hochladen.

Selbst wenn Sie das Bild in einem Leuchtkasten oder Schieberegler verwenden, gibt es normalerweise keinen Grund dafür, dass es breiter als 2.000 Pixel ist. Wenn sich das Bild in einem Post- oder Seiteninhaltsbereich befindet, können Sie wahrscheinlich gut damit umgehen, dass das Bild 800 Pixel breit ist.

Diese Methode zum Ändern der Bildgröße funktioniert einwandfrei, hilft jedoch nicht bei Bildern, die bereits auf Ihre Website hochgeladen wurden. Eine einfache Technik für vorhandene Bilder besteht darin, einfach eine andere Größe zu wählen.

Verwenden Sie kleinere Größen

Wenn Sie ein Bild in Ihre Medienbibliothek hochladen, erstellt WordPress bis zu drei zusätzliche Versionen: Miniaturansicht, Mittel und Groß.

Wenn Sie Ihre Seite mit den Medieneinstellungen besuchen, werden Sie feststellen, dass Sie diese Größen hier auswählen können:

WordPress-Medieneinstellungen

Während Sie die Einstellungen ändern können, beträgt die Standardgröße 1024px, was groß genug ist, um für Posts verwendet zu werden, ohne zu verschwenderisch zu sein. Sie können diese Größe für alle Bilder verwenden, die Sie in Ihre Beiträge aufnehmen.

Um die Größe eines Bildes zu ändern, das Sie einem Beitrag hinzugefügt haben, klicken Sie im Editor darauf. In der rechten Seitenleiste wird das Dropdown-Menü “Bildgröße” angezeigt.

WordPress Image Resize

Wählen Sie die Größe “Groß” und aktualisieren Sie den Beitrag. Wenn Sie übergroße Bilder haben, können Sie mit dieser Technik schnell eine geeignetere Größe bereitstellen, die schneller geladen wird, ohne dass das Original erneut hochgeladen und ersetzt werden muss.

Das heißt, dies kann furchtbar langweilig sein, wenn Sie Dutzende von Posts mit Dutzenden von Bildern haben. Es gibt eine noch schnellere und effektivere Methode.

Automatische Größenänderung mit einem Plugin

Anstatt die Größe der Bilder selbst zu ändern, können Sie dies von einem Plugin automatisch für Sie erledigen lassen. Wenn es um die automatische Größenänderung von Bildern geht, ist nichts besser als das Optimole Plugin.

Optimole Image Optimizer

Es funktioniert nicht so, wie Sie es erwarten.

Anstatt die Bilder in Ihrer Medienbibliothek zu bearbeiten, behält Optimole seine eigenen Kopien Ihrer Bilder bei und stellt sie von einem Hochleistungs-CDN bereit. Auf diese Weise werden Ihre Originale in keiner Weise verändert.

Darüber hinaus müssen Sie Optimole keine einzige Größe für Ihre Bilder zuweisen. Vielmehr erhält es die Größe des Besucherbildschirms und generiert im Handumdrehen eine optimal dimensionierte Version jedes Bildes. Das bedeutet, dass jemand auf einem mobilen Gerät möglicherweise eine 400-Pixel-Version eines Bildes lädt, während ein anderer Besucher auf einem Laptop eine 700-Pixel-Version desselben Bildes erhält.

Diese Methode zur Größenänderung ist für mobile Geräte viel einfacher zu implementieren und effektiver, was besonders wichtig ist, da mobile Besucher häufig langsamere Verbindungen haben.

Wenn Sie lernen möchten, wie Sie Optimole verwenden, können Sie meinem vollständigen exemplarischen Video folgen:

Ich habe empfohlen, zuerst die Größe zu ändern, da dies einfach ist und enorme Vorteile bieten kann, unabhängig davon, ob Sie es manuell oder mit einem Plugin automatisieren.

Wenn Ihre Bilder bereits eine angemessene Größe für Ihre Website haben, können Sie die Leistung Ihrer Website durch Komprimierung noch erheblich verbessern.

Komprimieren Sie Ihre Bilder

Durch die Komprimierung können Sie die Dateigröße eines Bildes reduzieren, ohne dessen Abmessungen zu ändern.

Es gibt zwei Arten der Bildkomprimierung.

Die erste Art der Bildkomprimierung wird als “verlustfreie” Komprimierung bezeichnet.

Verlustfreie Kompression

Bei einer verlustfreien Optimierung wird das Bild selbst tatsächlich nicht bearbeitet. Diese Technik entfernt vielmehr alle in der Bilddatei gespeicherten Metadaten. Beispielsweise speichern Bilder häufig den Namen des Geräts, mit dem das Bild aufgenommen wurde, das Datum, an dem das Foto aufgenommen wurde, und manchmal sogar die GPS-Koordinaten der Aufnahme.

Da diese Daten normalerweise sehr begrenzt sind, reduziert die verlustfreie Optimierung möglicherweise nur die Größe Ihres Bildes um 1 bis 5%. Es gibt jedoch keinen Grund, sie nicht zu verwenden, da dies keinen Einfluss auf die Bildqualität hat.

Die wirklichen Gewinne ergeben sich aus der verlustbehafteten Optimierung.

Verlustbehaftete Komprimierung

Wie zu erwarten ist, optimiert eine verlustbehaftete Komprimierung das Bild selbst und führt zu einer Qualitätsminderung. Aber hier ist die Sache …

Komprimierungsalgorithmen sind heutzutage so gut, dass Sie die Dateigröße des Bildes häufig ohne erkennbaren Unterschied um 50-70% reduzieren können. Wenn Sie kein professioneller Fotograf sind und Ihre Bilder auf 4k-Monitoren perfekt gestochen haben müssen, werden Sie nicht einmal den Qualitätsverlust bemerken.

So komprimieren Sie Ihre Bilder

Sie können Ihre Bilder manuell mit einem Tool wie komprimieren TinyPNG bevor Sie sie hochladen oder ein Plugin verwenden, um Dinge zu automatisieren.

ShortPixel ist ein großartiges Plugin zur Optimierung der Bilder auf Ihrer Website. Sie können sie sofort beim Hochladen optimieren und alle Bilder, die sich bereits in Ihrer Medienbibliothek befinden, in großen Mengen optimieren.

Shortpixel

Ich habe Optimole für die Größenänderung von Bildern empfohlen und es komprimiert Bilder auch sehr effektiv. Auch hier werden die in Ihrer Medienbibliothek gespeicherten Originale nicht optimiert, sondern die Kopien komprimiert, die Ihren Besuchern zur Verfügung gestellt werden.

Hier finden Sie einige weitere Plugins zur Bildoptimierung.

Wenn Ihre Bilder in der Größe geändert und komprimiert werden, wird Ihre Website viel schneller geladen, aber es gibt noch eine letzte Optimierung für Bilder, die Sie vornehmen können.

Implementieren Sie das verzögerte Laden

Lazy Loading ist eine wirklich clevere Möglichkeit, Ihre Bilder weiter zu optimieren.

Angenommen, Sie haben einen Blog-Beitrag mit 12 Bildern. Wenn jemand Ihre Website besucht, werden nicht alle diese Bilder sofort auf dem Bildschirm angezeigt. Sie müssen weiter nach unten scrollen, damit die meisten von ihnen angezeigt werden. Warum also alle 12 sofort laden??

Beim verzögerten Laden werden nur die Bilder geladen, die auf dem Bildschirm angezeigt werden. Anstatt 12 Bilder zu laden, werden möglicherweise nur 2-3 geladen. Wenn der Besucher die Seite nach unten scrollt, werden die verbleibenden Bilder geladen, sobald sie auf den Bildschirm gelangen. Dies bedeutet, dass das anfängliche Laden viel schneller ist und da die meisten Besucher nicht ganz nach unten scrollen, werden viele Bilder nie geladen, wodurch Sie wertvolle Serverressourcen sparen.

Dieses Video verfügt über eine Visualisierung, die es besser erklärt, wenn Sie ein klareres Bild davon erhalten möchten, wie das verzögerte Laden funktioniert:

Nachdem Sie das Konzept verkauft haben, können Sie hier das verzögerte Laden auf Ihrer Website implementieren.

Wie benutzt man Lazy Loading?

Wieder einmal kann diese Technik zur Leistungsoptimierung einfach mit einem Plugin zu WordPress hinzugefügt werden.

Wenn Sie nach einer kostenlosen Option suchen, probieren Sie Optimole oder aus a3 Lazy Load.

Mit Optimole wird das verzögerte Laden automatisch aktiviert und das a3-Plugin ist einfach zu konfigurieren.

Wenn es Ihnen nichts ausmacht zu zahlen, checken Sie aus WP Rocket. Es verfügt über Hochleistungs-Caching und eine Vielzahl anderer Geschwindigkeitstools.

Um das verzögerte Laden mit WP Rocket zu aktivieren, müssen Sie nur diesen Schalter umlegen:

WP Rocket Media

Einfacher geht es nicht!

Viel Spaß beim schnelleren Laden von Bildern

Um zusammenzufassen, was Sie gerade gelernt haben …

Übergroße Bilder, die auf Ihre Website hochgeladen werden, sind extrem langsam. Nur eines dieser Bilder kann Ihre Website zum Stillstand bringen.

Das Wichtigste, was Sie tun können, um Ihre Bilder zu beschleunigen, ist, die Größe zu großer Bilder so zu ändern, dass sie eine für Ihre Website geeignete Größe haben. Sie können dies manuell tun oder mit Optimole automatisieren.

Als nächstes haben Bildkomprimierungsalgorithmen einen langen Weg zurückgelegt. Heutzutage können Sie die Dateigröße eines Bildes um 50-70% reduzieren, ohne die Qualität merklich zu beeinträchtigen. Das ist kein Problem. Verwenden Sie ShortPixel oder Optimole, um jedes Bild auf Ihrer Site zu komprimieren.

Schließlich ist das verzögerte Laden eine großartige Möglichkeit, Bilder selektiv zu laden. Sie können Optimole, a3 Lazy Load oder WP Rocket verwenden, um das Lazy Loading auf Ihrer Site sofort zu implementieren.

Wenn Sie keine dieser Techniken verwendet haben, wird Ihre Website nach der Implementierung erheblich schneller geladen. Es wird dich umhauen.

Haben Sie Fragen zu den Konzepten und Techniken in diesem Beitrag? Haben Sie noch einen Tipp zu teilen? Poste in den Kommentaren unten!

Sie können auch mögen,

So reparieren Sie eine langsame WordPress-Site und ein Admin-Panel (dauerhaft)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector