So optimieren Sie WordPress-Bilder und machen Ihre Website SCHNELLER

Wenn Sie Ihren Besuchern eine großartige Benutzererfahrung bieten möchten, müssen Sie sicherstellen, dass Ihre Website schneller geladen wird, damit sie nicht frustriert werden. Tatsächlich kann die Geschwindigkeit Ihrer Website Ihr Online-Geschäft beeinträchtigen oder beeinträchtigen. Sie MÜSSEN WordPress-Bilder optimieren, um Ihre Website schneller zu machen - da Bilder normalerweise den größten Teil Ihres Inhalts ausmachen.

Walmart hat eine gefunden Erhöhung der Conversion-Rate um 2% wann immer sie die Geschwindigkeit um 1 Sekunde verbesserten.

Und Amazon verzeichnete alle 1 Millisekunden eine Umsatzsteigerung von 100% der Verbesserung ihrer Site-Geschwindigkeit. Diese Statistiken zeigen, dass es für Ihre Website von entscheidender Bedeutung ist, Ihre Website schnell zu machen. Eine einfache Möglichkeit, Ihre Website schneller zu machen, besteht darin, alle Bilder auf Ihrer WordPress-Website zu optimieren.

Inhalt[Anzahl Artikel]
 

Optimieren Sie WordPress-Bilder für verbesserte Conversion-Raten

Wenn Sie die Geschwindigkeit Ihrer WordPress-Website noch nicht als wichtige Komponente Ihres Unternehmens angesehen haben, müssen Sie erneut darüber nachdenken und Maßnahmen ergreifen, um die Geschwindigkeit Ihrer WordPress-Website zu verbessern.

Leseempfehlung: So erhalten Sie eine schnelle WordPress-Website - eine vollständige Anleitung [25 Aktionen]

Es gibt viele Möglichkeiten, Ihre Website schneller zu machen. Einige von ihnen sind unten aufgeführt.

  • Vermeiden Sie zu viele WordPress-Plugins
  • Verwenden Sie WordPress CDN-Dienste
  • Optimieren Sie die CSS-Bereitstellung
  • Optimieren Sie WordPress-Bilder

Bilder, die nicht für das Web optimiert wurden, sind normalerweise groß. Das Laden dieser Bilder dauert länger. Es ist wichtig, dass Sie Ihre Bilder optimieren, indem Sie sie so klein wie möglich machen. In den meisten Fällen ist die Optimierung von Bildern für WordPress und Ihre Website jedoch langwierig oder behindert die Erstellung von Inhalten.

In diesem Beitrag werden verschiedene Möglichkeiten erläutert, wie Sie Ihre WordPress-Bilder optimieren und so das Laden Ihrer Website beschleunigen können.

Komprimieren Sie Bilder oder speichern Sie sie für das Web

Es ist ein Kinderspiel, dass die Größe Ihres Bildes die Ladezeit Ihrer WordPress-Website beeinflussen kann. Da hochauflösende Bilder eine größere Datei haben, ist es immer besser, dies zu tun komprimiere die Bilder vor dem Hochladen.

Jetzt haben Sie vielleicht eine Frage: Was ist die WordPress-Bildkomprimierung und wie kann sie verkleinert werden, ohne die Qualität zu beeinträchtigen?

Bei der Komprimierung wird die Bildgröße drastisch verringert, indem Bildinformationen, die ein menschliches Auge nicht wahrnehmen kann, algorithmisch entfernt werden. Dies ist eine sehr effektive Methode zur Optimierung von WordPress-Bildern.

Obwohl die Bildkomprimierung eine sichere Methode zur Reduzierung der Bildgröße ist, verliert der Prozess beim Komprimieren von JPEG-Dateien manchmal den tatsächlichen Inhalt der Bilder während des Prozesses. Dies ist der einzige Nachteil dieses Ansatzes. Denken Sie daran, die Ergebnisse nach der Komprimierung sorgfältig zu überprüfen, um sicherzustellen, dass Sie mit den Ergebnissen der Komprimierung zufrieden sind.

WP Smush ist ein beliebtes WordPress-Plugin, mit dem Sie die Größe der Bilddatei einfach reduzieren können, indem Sie jedes hochgeladene Bild scannen und unnötige Dateninformationen entfernen. Mit der kostenlosen Version dieses Plugins können Sie Bilder mit einer Größe von bis zu 1 MB komprimieren, während Sie mit der Pro-Version Bilder mit einer Größe von bis zu 32 MB komprimieren können.

Sie können downloaden WP Smush hier.

wp smush zur Optimierung von WordPress-Bildern

Bitte beachten Sie auch, dass Sie mit diesem Plugin alle neu hochgeladenen Bilder auf Ihre WordPress-Website optimieren können. Wenn Sie die vorhandenen Bilder komprimieren möchten, können Sie den Link Bulk Smush.it auf der Registerkarte Medienbibliothek verwenden, um vorhandene WordPress-Bilder zu optimieren.

Lazy Loading: Optimieren Sie die Ladezeit von WordPress-Bildern

[AKTUELL: In WordPress 5.4 ist ein verzögertes Laden im Kern integriert, sodass Sie diese Aktion nur ausführen müssen, wenn Ihre WordPress-Version unter dieser Version liegt.]

Wir alle wissen, dass "Ein Bild mehr sagt als tausend Worte".

Wenn Sie jedoch zu viele Bilder auf einer Seite verwenden, wird Ihre Website möglicherweise langsamer geladen.

Eine einfache Möglichkeit, die Ladezeit zu verbessern, besteht darin, unnötige Bilder zu entfernen und nur das beizubehalten, was unbedingt erforderlich ist. Allerdings möchte nicht jeder die Anzahl der auf einer Webseite verwendeten Bilder reduzieren, nur um das Laden der Seite zu beschleunigen.

Wie kann dieses Problem gelöst werden?

Möglicherweise haben Sie es bereits bemerkt - Websites, die auf jeder Seite viele Bilder verwenden, lösen dieses Problem, indem das Bild nur geladen wird, wenn es für den Benutzer sichtbar ist. Diese Taktik reduziert nicht nur die Ladezeit der Seite, sondern spart auch Serverbandbreite. Dies wird als verzögertes Laden bezeichnet. Da das Bild "faul" ist, wird es nur angezeigt, wenn es benötigt wird.

Wenn Sie mit WordPress arbeiten, ist es einfacher, das Bild nur dann zu laden, wenn es sichtbar ist. Sie müssen lediglich ein Lazy Load Plugin installieren. Dies ist wiederum eine hervorragende Möglichkeit, WordPress-Bilder für eine verbesserte Geschwindigkeit zu optimieren.

Ist Sie können die Lazy Load Plugin hier.

Optimieren Sie WordPress-Bilder mit Lazy Load

Dieses Plugin benötigt keine zusätzliche Konfiguration, da es bei Installation und Aktivierung sofort einsatzbereit ist.

Lesen Sie mehr: Divi gegen Elementor

Verwenden Sie das optimierte und korrekte Bildformat

JPEG, PNG und GIF sind die beliebtesten Bildformate.

Wenn Sie die Unterschiede zwischen den einzelnen Bildformaten kennen, können Sie das richtige Format auf Ihrer Website verwenden, was Ihnen sogar bei der Bildoptimierung hilft.

Welches Format ist für optimierte WordPress-Website-Bilder besser und wann sollten Sie es verwenden? Nachfolgend einige Tipps:

  • GIF: Verwenden Sie GIF, wenn Ihr Bild zu klein ist und relativ less Anzahl von Farben. GIF ist beispielsweise eine gute Wahl für ClipArts, Aufzählungszeichen und Diagramme. Andererseits konnten komplexe Bilder mit Verbesserungen wie Schlagschatten mit GIF nicht richtig angezeigt werden.
  • JPEG / JPG: Es eignet sich für komplexe Bilder mit vielen Farbvariationen oder wenn es fotografische Bilder enthält.
  • PNG: Das PNG-Format eignet sich am besten für transparente Bilder.
  • WebP: Dies ist heutzutage das beste Format. Für die Erstellung dieser Bilder ist jedoch Serverunterstützung auf Ihrer Website erforderlich

Bitte beachten Sie, dass dies nur allgemeine Empfehlungen sind. Wie bei allen Regeln gibt es Ausnahmen, und einige dieser Regeln sollen verletzt werden.

Nutzen Sie den Browser-Cache effektiv

Wenn Sie Bilder auf eine Webseite hochladen, stellen Sie sicher, dass Sie sie in ein einzelnes Verzeichnis hochladen. Durch das Hochladen Ihrer Bilder in ein einzelnes Verzeichnis auf einer Webseite kann der Browser diese Bilder bei wiederholten Besuchen problemlos über den Browser-Cache laden.

Es ist in Ordnung, wenn Sie Bilder über den Standard-WordPress-Bild-Uploader hochladen. Wenn Sie beispielsweise HTML-Zielseiten in WordPress erstellen, verwenden Sie wahrscheinlich nicht den Standard-WordPress-Bild-Uploader. Stellen Sie in diesen Fällen sicher, dass Sie alle Bilder einer Webseite in ein einziges Verzeichnis hochladen, anstatt sie in verschiedene Verzeichnisse hochzuladen.

Wenn Sie mehr über das Zwischenspeichern von Browsern und deren Nutzung erfahren möchten, lesen Sie unseren ausführlichen Artikel hier: So nutzen Sie das Browser-Caching in WordPress mit oder ohne Plugin [5 Möglichkeiten]

 

Verwenden Sie dasselbe Bild mehrmals

Eine andere Möglichkeit, das Browser-Caching zum Reduzieren der Bildbandbreite zu verwenden, besteht darin, dieselben Bilder auf der gesamten Website mehrmals zu verwenden.

Wenn Sie beispielsweise Logos oder Menüelemente von einer Seite verwenden, stellen Sie sicher, dass Sie auf der gesamten Website dieselben Bilder aufrufen, damit Benutzer sie nicht mehrmals, sondern nur einmal herunterladen müssen und Browser die Bilder über den Browser anzeigen können Zwischenspeicher.

Stellen Sie bei Verwendung eines strukturierten Hintergrunds sicher, dass Sie wiederholt kleinere Bilder verwenden, anstatt ein einzelnes großes Bild zu verwenden. Dies kann auch dazu beitragen, die Ladezeit zu verkürzen.

Wenn Sie Bilder mit dem Medien-Uploader im WordPress-Dashboard hochladen, wird sie standardmäßig in den Ordner verschoben, je nachdem, wann Sie sie hochladen. Das heißt, alle Bilder, die in einem Monat hochgeladen werden, befinden sich in einem einzigen Verzeichnis.

Wenn Sie beispielsweise ein Bild im Januar 2021 hochladen, befindet es sich in folgendem Verzeichnis: wp-content / uploads / 2021/01.

Schauen wir uns die Vorteile des Hochladens über den Medien-Uploader an und sagen Ihnen dann, was Sie beachten sollten, wenn Sie nicht auf Ihren Medien-Uploader hochladen, um Ihre Website zu beschleunigen.

Der Medien-Uploader beschleunigt das Laden des Bildes: Das Laden wird schneller, wenn die Bilder beim Surfen auf einer Webseite im selben Ordner gespeichert werden. Wenn die Bilder wiederholt aufgerufen werden, kann der Browser sie problemlos aus dem Browser-Cache abrufen, wenn sie sich in einem einzelnen Ordner befinden.

Oft verwenden WordPress-Blogger jedoch nicht den Standard-Medien-Uploader, insbesondere wenn sie an einer benutzerdefinierten Zielseite arbeiten. Der Einfachheit halber laden sie Bilder in ein separates Verzeichnis hoch.

Stellen Sie in solchen Fällen sicher, dass Sie alle Bilder dieser Seite in einem einzigen Verzeichnis hochladen, anstatt sie in mehrere Verzeichnisse hochzuladen. Diese Taktik kann die Ladezeit verbessern, da das Zwischenspeichern von Dateien bei wiederholten Besuchen einfacher wird.

Verwenden Sie CSS anstelle von Bildern

Wissen Sie, dass Sie die Ladezeit verbessern können, indem Sie überhaupt kein Bild verwenden?

Beispielsweise ist es durchaus möglich, bestimmte Formen mithilfe von einfachem CSS anstelle von Bildern wie abgerundeten Rechtecken, Verläufen, Schlagschatten und transparenten Bildern zu generieren. Stellen Sie jedoch sicher, dass Sie die Browserkompatibilitätsprüfung im Auge behalten, wenn Sie ein Bild durch CSS ersetzen, da nicht alle Browser diese Techniken unterstützen können.

Über den Autor
Shahzad Saeed
Autor: Shahzad SaeedWebsite: http://shahzadsaeed.com/
Shahzaad Saaed wurde als WordPress-Experte auf einer Vielzahl von Websites von Behörden vorgestellt. Er ist auf Content-Marketing spezialisiert, um Unternehmen dabei zu helfen, ihren Traffic zu steigern.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...