Wie optimiert man Bilder in WordPress?

Bilder sind ein wichtiger Bestandteil jeder Website. Sie können verwendet werden, um eine Stimmung zu erzeugen, Produkte zu präsentieren oder einer Seite visuelles Interesse zu verleihen. Aber manchmal haben Sie möglicherweise nicht die besten Bilder für Ihre Website, die sie optimal aussehen lassen würden.

Glücklicherweise verfügt WordPress über einige integrierte Funktionen, die dazu beitragen, Bilder zu optimieren, damit sie schneller geladen werden und weniger Platz auf deiner Website beanspruchen, ohne die Qualität zu beeinträchtigen!

Finden Sie nicht optimierte Bilder in GTmetrix + PSI

Der beste Weg, um Bilder auf Ihrer Website zu finden, die optimiert werden müssen, ist die Verwendung eines kostenlosen Online-Tools wie GTmetrix oder PSI. Beide Tools durchsuchen die Dateien Ihrer Website und geben Ihnen einen leicht verständlichen Bericht darüber, was optimiert werden muss, damit sie schneller geladen wird.

Optimieren Sie Bilder mit WordPress-Plugins + -Diensten

Es gibt auch einige WordPress-Plugins zur Bildoptimierung (sowohl kostenpflichtig als auch kostenlos), wie z. B. EWWW Image Optimizer, die sehr gut beim Komprimieren von Bildern funktionieren, um schneller auf Ihrer Website geladen zu werden.

Es gibt auch Dienste, die dies für Sie tun, wie TinyPNG und Kraken Image Optimizer, die Bilder komprimieren, ohne die Qualität zu beeinträchtigen.

Verwenden Sie die richtige Bildgröße

So wie Sie Ihre Grafiken, Videos und anderen Medien vor dem Hochladen im WordPress-Editor an die Breite des Blogs anpassen müssen, müssen Sie auch sicherstellen, dass die Größe der Bilddateien angepasst wird. Dadurch wird sichergestellt, dass keines Ihrer Bilder mehr Platz benötigt, als sie sollten!

Bilder zwischenspeichern

Eine andere Möglichkeit, Bilder zu optimieren, besteht darin, sie zwischenzuspeichern. Dadurch wird sichergestellt, dass Ihre Site schneller geladen wird, auch wenn sie von mehreren Personen gleichzeitig besucht wird, da Besucher, die eine Seite mit zwischengespeicherten Bildern aufrufen, nicht warten müssen, bis diese Dateien heruntergeladen wurden, bevor sie etwas sehen können!

Das WP Smush-Plugin macht dies tatsächlich automatisch, sobald Sie es installieren und aktivieren (und Sie sollten auf jeden Fall beides tun!). Sie können auch Plugins wie Autoptimize oder Wp Super Cache verwenden, die nicht nur zwischenspeichern, sondern auch Code minimieren.

Verwenden Sie LazyLoad, um Offscreen-Bilder zu verschieben

LazyLoad ist eine neuere und weniger bekannte Funktion in WordPress, mit der Sie das Laden von Bildern verschieben können, bis der Benutzer zu seiner Position auf Ihrer Website scrollt. Wenn dies der Fall ist, werden diese Bilder dann schnell geladen, da sie beim ersten Abrufen der Seite nicht geladen wurden!

Bildkomprimierung verwenden

Sie können zwei verschiedene Arten der Bildkomprimierung verwenden: LZW oder JPEG. Der Unterschied zwischen ihnen hat mehr mit der Art der Grafikdatei zu tun als mit allem anderen. Wählen Sie also diejenige aus, die für Ihre Situation sinnvoll ist!

Dies funktioniert, indem die Anzahl der in einem Bild verwendeten Farben reduziert wird, was bedeutet, dass beim Browsen weniger Daten von der Server- zur Client-Seite übertragen werden müssen. Dies reduziert die Bandbreitennutzung sowie die Ladezeit.

Die Bildkomprimierung ist ein unverzichtbarer Bestandteil jeder Website, und WordPress verfügt über eine Reihe von Komprimierungs-Plugins, die es einfacher machen, Websites mit hochwertigen Bildern zu erstellen, ohne die Leistung zu beeinträchtigen!

Bereitstellen von Bildern in Formaten der nächsten Generation

Es ist wichtig zu wissen, dass es viele verschiedene Bildformate gibt und nicht alle davon für Ihre Website geeignet sind. Wenn Sie die Leistung einer Website verbessern möchten, müssen Sie Formate der nächsten Generation wie WebP oder JPEG XR verwenden, die normalerweise eine bessere Komprimierung aufweisen als andere Typen.

Bildabmessungen angeben

Indem Sie die Abmessungen von Bildern angeben, teilen Sie WordPress mit, wie viel Platz benötigt wird, wenn sie auf Ihrer Website platziert werden. Dies ist wichtig, da es die Bandbreitenbelastung reduziert, was eine schnellere Seitenladezeit bedeutet!

Bilder von einem CDN bereitstellen

Ein CDN ist eine schnelle und effiziente Möglichkeit, die Bilder Ihrer Website von geografisch näher gelegenen Servern bereitzustellen. Dies reduziert die Latenz, was schnellere Ladezeiten für die Benutzer bedeutet!

Bilder mit CSS-Sprites kombinieren

CSS-Sprites sind ein Bildtyp, der alle Ihre kleineren Bilder in einer großen Datei kombiniert. Dies ist nützlich, da es die Anzahl der Anfragen nach Dateien reduziert, was eine schnellere Ladezeit bedeutet – insbesondere auf mobilen Geräten! Sie können einen CSS-Sprite-Generator verwenden, um einen zu erstellen und ihn dann mit CSS zu Ihrem Thema hinzuzufügen.

Verwenden Sie adaptive Bilder für Mobilgeräte

Adaptive Bilder sind eine großartige Möglichkeit, Benutzern auf verschiedenen Geräten unterschiedliche Bildgrößen bereitzustellen. Dies reduziert Bandbreitennutzung und Ladezeiten! Sie können dies mit einem WordPress-Plugin tun, aber es gibt auch viele andere Möglichkeiten, dies kostenlos selbst zu tun.

Bild-Hotlinking deaktivieren

Wenn Sie ein Bild per Hotlink verknüpfen, verlinken Sie im Grunde genommen mit der Originaldatei auf dem Server einer anderen Person. Wenn Sie dies deaktivieren, können Sie Ihre Bandbreite nicht stehlen. Daher sollten Sie dies tun.

Sie können dies mit vielen WordPress-Plugins wie WP Rocket tun. Sie können normalerweise auch Ihren Gastgeber bitten, dies für Sie zu tun (wenn Sie bei einem guten Gastgeber sind).

EXIF-Daten entfernen

EXIF-Daten sind versteckte Informationen, die Sie in Ihrem WordPress-Editor nicht sehen können, aber möglicherweise von anderen gesehen werden. Es enthält Informationen wie die Marke und das Modell einer Kamera sowie deren Datums- und Uhrzeiteinstellungen. Wenn Sie dies entfernen, wird die Bandbreitennutzung reduziert!

Dieser Vorgang beinhaltet die Verwendung eines Bild-Scrubber-Tools wie JPEGsnoop oder jhead, mit dem Sie alle EXIF-Daten von Bildern auf Ihrer Site entfernen können – ohne sie zuerst herunterladen zu müssen!

Bereitstellung von Bildern mit geringerer Qualität für Benutzer mit langsamen Verbindungen

Dies ist etwas, was Sie mit Ihren Bildern tun können, aber nicht jedes Thema bietet die Möglichkeit, dies auszublenden. Im Grunde liefert es Personen mit langsamen Verbindungen (mobil oder anderweitig) Bilder mit geringerer Qualität. Sie können dies mit dem Optimole-Plugin tun.

Warum ist es wichtig, optimierte Bilder zu verwenden?

Bilder können einen großen Teil der Leistung Ihrer Website ausmachen, daher ist es wichtig, sie zu optimieren! Dadurch wird sichergestellt, dass Bilder so schnell und effizient wie möglich geladen werden.

Je schneller Ihre Website lädt, desto besser ist sie für Nutzer und Suchmaschinen! Der Ladezeit wird in den Google-Rankings in letzter Zeit mehr Gewicht beigemessen (aber nur geringfügig), aber selbst wenn dies nicht der Fall wäre, möchten Sie dennoch sicherstellen, dass alles so schnell wie möglich geladen wird.

Die Leute hassen das Warten auf Websites, insbesondere mobile Benutzer – was die Optimierung von Bildern zu einem wesentlichen Bestandteil jeder WordPress-Site macht. Es hilft auch bei der SEO, da Google auch schnell ladende Websites mag (aus gutem Grund).

Fazit

Zusammenfassend lässt sich sagen, dass Bilder ein wichtiger Bestandteil jeder Website sind. Sie können verwendet werden, um eine Stimmung zu erzeugen, Produkte zu präsentieren oder einer Seite visuelles Interesse zu verleihen.

Manchmal sind die Originalbilder jedoch nicht gut genug optimiert und nehmen möglicherweise mehr Platz als nötig ein. WordPress verfügt über eine Reihe von Funktionen, um diese Dateien zu optimieren, damit sie schneller geladen werden, ohne die Qualität zu beeinträchtigen! Am besten installieren Sie ein Bildkomprimierungs-Plugin wie LazyLoad oder PSI, das Ihre Bilder bei Bedarf automatisch komprimiert und in der Größe ändert. Sie können Bilder auch optimieren, indem Sie ihre Abmessungen angeben, CSS-Sprites verwenden, Bilder zwischenspeichern und