So optimieren Sie Bilder für WordPress [Ultimate Guide]

Wenn Sie eine WordPress-Site haben, sind Sie sich der Schwierigkeiten bei der Wartung bewusst. Manchmal verbringen Sie Stunden mit etwas, das nur wenige Minuten dauern sollte. Dies kann vorkommen, wenn Ihre Website aufgrund zu großer oder schlecht optimierter Bilder langsam und aufgebläht ist.

Darüber hinaus hilft der Einsatz von Techniken zur Suchmaschinenoptimierung den Besuchern, Sie zu finden und auf Ihrer Website zu halten. Die Optimierung Ihrer Bilder für das Web ist eine dieser Praktiken.

Betrachten Sie jedes Pixel als möglichen Optimierungsbereich, wenn Sie ein Bild entwerfen oder bearbeiten. Es kostet Zeit und Mühe, Pixel als einzelne Teile zu betrachten, aber es lohnt sich.

Es gibt jedoch mehrere Möglichkeiten, Bilder in WordPress zu optimieren. Denken Sie daran, dass das Ziel darin besteht, die Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen.

In diesem Beitrag erfahren Sie, wie Sie Ihre WordPress-Bilder optimieren und mehr Zeit für andere Aktivitäten gewinnen.

Was ist Bildoptimierung?

Es ist ein Prozess, bei dem die Dateigröße eines Bildes reduziert wird, ohne die Qualität zu beeinträchtigen, und die richtigen Bild-SEO-Techniken angewendet werden. Optimierte Bilder lassen sich einfacher auf einer Festplatte speichern oder ins Internet hochladen. Darüber hinaus gibt es weniger potenzielle Probleme aufgrund langsamer Download-Geschwindigkeiten.

Die Größe Ihrer Bilder hat einen erheblichen Einfluss auf die Ladezeit Ihrer Website. Im Allgemeinen gilt: Je größer das Bild, desto länger dauert es, bis der Browser des Besuchers geladen ist. Dies kann für Ihre Besucher frustrierend sein und dazu führen, dass sie Ihre Website verlassen.

Sie sollten einige wichtige Optimierungstipps befolgen, um sicherzustellen, dass Ihre Bilder für die Leistung optimiert sind.

Vorteile der Bildoptimierung

Um ein erfolgreicher Webmaster zu werden, müssen Sie verstehen, wie Bilder auf einer Website funktionieren. Es kann auch erforderlich sein, einige Bilder von Zeit zu Zeit zu optimieren.

Die Vorteile der Bildoptimierung sind:

• Schnellere Seitenladezeiten: Optimierte Bilder werden schnell geladen und führen zu einer schneller ladenden Website. Dies ist besonders wichtig für mobile Benutzer, die eher eine Website verlassen, deren Ladezeit zu lange dauert.
• Verbesserte SEO-Rankings: Optimierte Bilder helfen auch den SEO-Rankings Ihrer Website. Google verwendet die Ladegeschwindigkeit Ihrer Seite als Ranking-Faktor, sodass die Optimierung Ihrer Bilder Ihnen helfen kann, in den Suchergebnissen einen höheren Rang einzunehmen.
• Reduzierte Bandbreitennutzung: Optimierte Bilder verbrauchen weniger Bandbreite, wodurch Sie Geld bei Ihrer Hosting-Rechnung sparen können.
• Verbesserte Benutzererfahrung: Eine gut optimierte Website bietet eine bessere Benutzererfahrung mit schnelleren Seitenladevorgängen und einer besseren Suchmaschinenleistung.
• Verkürzung der Downloadzeiten für Mobilgeräte: Optimierte Bilder können auch dazu beitragen, Ihre Website für Mobilgeräte optimiert zu machen, was für das Google-Ranking bei der mobilen Suche von entscheidender Bedeutung ist.
• Kundenzufriedenheit: Eine bessere Benutzererfahrung erhöht die Kundenzufriedenheit, was zu höheren Umsätzen und mehr Stammkunden führt.

14 grundlegende Dinge zur Optimierung von Bildern für das Web

Es wäre am besten, viele Faktoren zu berücksichtigen, wenn Sie ein Bild für die Verwendung im Internet optimieren. Es gibt viele verschiedene Dateitypen und verschiedene Möglichkeiten, sie zu optimieren. Im Folgenden finden Sie einige Dinge, die Sie bei der Optimierung von Bildern für das Web beachten sollten.

Qualität vs. Größe:

Die Qualität eines Bildes ist immer wichtig, aber Sie sollten auch die Dateigröße berücksichtigen, wenn es um die Optimierung für die Verwendung im Internet geht. Es wäre am besten, die Dateigröße Ihrer Bilder so klein wie möglich zu halten, ohne die Qualität zu beeinträchtigen, um die Ladezeit auf Webseiten zu beschleunigen.

Die Standardauflösung für Bilder im Web beträgt 72 DPI (Dots Per Inch). Daher wird empfohlen, Bilder als JPGs und nicht als PNGs zu speichern, da dieser Dateityp kleiner ist.

Außerdem wäre es am besten, wenn Sie die geringstmögliche Farbtiefe verwenden, ohne die Qualität des Bildes zu beeinträchtigen. Die Standard-Farbtiefe beträgt 24-Bit , was in den Eigenschaften der Datei geändert werden kann.

Bilddateiformat:

Um zu bestimmen, welches Bildformat zu wählen ist, ist es notwendig, die verschiedenen Bilder und ihre Zwecke zu verstehen. Sie sollten Ihre Datei als JPG speichern, aber wenn Sie Bilder für das Web optimieren, wählen Sie PNG-8 oder PNG-24.

Im Allgemeinen eignen sich PNG-Dateien am besten für Bilder mit vielen Farben und transparentem Hintergrund, während JPEG-Dateien am besten für Bilder mit vielen Details geeignet sind.

Verwenden Sie daher das PNG-Format für Bilder mit transparentem Hintergrund und JPEG für Bilder mit vielen Details, um Ihre Bilddateien für das Web zu optimieren.

Dateigröße & Abmessungen:

Bei der Optimierung eines Bildes für das Web sind zwei Hauptfaktoren zu berücksichtigen, die Dateigröße und die Abmessungen. Es ist besser, mit einem dieser Faktoren zu experimentieren, bevor Sie den anderen ändern, damit Sie sehen können, was Ihrem Ziel hilft, eine kleinere Dateigröße oder ein größeres Bild zu haben.

Große Bilddateien können dazu führen, dass eine Website langsam läuft , daher ist es notwendig, die Größe Ihrer Bilder zu ändern, bevor Sie sie hochladen. Die empfohlenen Abmessungen für Bilder auf einer Webseite sind 600-800 Pixel breit und 500-600 Pixel hoch.

Je größer dieser Wert ist, desto wahrscheinlicher wird die Größe des Bildes vom Browser geändert, was zu Qualitätsverlusten führt.

Rank Math ist perfekt, um die Auflösung Ihrer Bilder automatisch anzupassen. Es fügt die Bildabmessungen für Sie hinzu, sodass Sie sich keine Gedanken über die Abmessungen machen müssen.

Bild-SEO verbessern:

Jedes Bild, das Sie auf Ihre Website hochladen, sollte Suchmaschinen als Informationsquelle dienen. Bilddateien mit mehr Details eignen sich besser für die Suchmaschinenoptimierung.

Die überzeugendsten SEO-Praktiken für Bilder sind:

• Bildtiteltext optimieren: Achten Sie beim Speichern Ihrer Bilder darauf, ihnen aussagekräftige Titel zu geben. Es erscheint als Tooltip, wenn der Mauszeiger über dem Bild schwebt. Darüber hinaus ist es für Suchmaschinen von Vorteil, das Bild zu lernen.
• Verwenden Sie Alt-Tags: Suchmaschinen verwenden bei der Indexierung von Bildern auch Alt-Tags. Der Alt-Tag-Text sollte auf jedes Bild zugeschnitten sein und so genau wie möglich beschreiben, was auf dem Bild zu sehen ist.
• Verwenden Sie korrekte Bilddateinamen: Wenn möglich, sollten Ihre Bilddateinamen auch aussagekräftig sein und Schlüsselwörter enthalten. Wenn Sie mit Bildbearbeitungssoftware arbeiten, speichern Sie Ihre Bilder unter einem aussagekräftigen Dateinamen.

Hinweis- Wenn Sie das Rank Math WordPress-Plugin verwenden, werden Ihre Bilder für SEO optimiert, und der Bilddateiname und das Alt-Tag enthalten automatisch Schlüsselwörter.

Richtige Komprimierung:

Dies ist ein weiterer Schlüsselfaktor, den Sie bei der Optimierung Ihrer Bilder berücksichtigen sollten. Sie sollten Ihre Bilder so weit wie möglich komprimieren, bevor Sie sie auf den Server hochladen.

Sie müssen dazu ein Komprimierungstool wie Photoshop oder GIMP verwenden. Alternativ können Sie kostenlose Tools wie TinyJPG und ImageOptim verwenden . Es wird immer empfohlen, komprimierte Bilder auf Ihrer Website zu haben, um die Ladezeit zu beschleunigen.

Alternativ können Sie ein Plugin wie ShortPixel oder WP-Optimize verwenden, um Ihre Bilder automatisch zu komprimieren, wenn sie auf Ihre Website hochgeladen werden. Diese Plugins werden jedem empfohlen, der die Bilder auf seiner Website optimieren möchte.

Folgende Fakten sollten Sie beim Komprimieren von Bildern beachten:

• Verlustbehaftet : Die verlustbehaftete Komprimierung ist eine Art der Komprimierung, bei der einige Daten aus einem Bild entfernt werden, um die Datei kleiner zu machen. Diese Art der Komprimierung wird häufig für Bilder verwendet, die keinen merklichen Qualitätsverlust aufweisen.
• Verlustfrei : Eine verlustfreie Komprimierung ist eine Form der Komprimierung, die einige redundante Informationen entfernt, ohne die Qualität des Inhalts zu beeinträchtigen. Dieser Komprimierungstyp wird häufig für Bilder verwendet, die ihre Qualität nach der Komprimierung beibehalten müssen, z. B. verlustfreie JPEG-Bilder.

Weitere Einzelheiten zur verlustfreien Komprimierung von verlustbehafteten Anzeigen finden Sie im Blog von ShortPixel.

Stellen Sie Bilder in Next-Gen-Formaten bereit:

Standardmäßig versuchen Browser, Bilder in demselben Format zu laden, in dem sie gespeichert wurden. Beispielsweise wird ein JPEG-Bild geladen, wenn die URL .jpg enthält. Sie können Browser jedoch zwingen, ein anderes Bildformat mit der richtigen Dateierweiterung zu laden.

Wenn Sie beispielsweise ein JPEG-Bild haben, können Sie die Erweiterung in .png ändern, und der Browser lädt dann dieses Bild.

Sie können dies tun, indem Sie das JPG-zu-PNG-WordPress-Plugin verwenden. Mit diesem Plugin konvertieren Sie automatisch alle Ihre JPG-Bilder in PNG-Dateien. Sie können einer Anleitung zum Konvertieren von PNG-Bildern in JPG in WordPress folgen.

Mit GtMatrix oder dem Google Page Speed ​​Insight Tool können Sie ganz einfach Bilder im Next-Gen-Format finden.

Hinweis- Im Allgemeinen ist es ratsam, Bilder als beide Dateitypen zu speichern, damit sie von Browsern angezeigt werden können, die unterschiedliche Dateierweiterungen erkennen. Wenn eine Datei nicht geladen werden kann, können Sie auf diese Weise das defekte JPEG durch ein PNG ersetzen, ohne das Bild erneut hochladen zu müssen.

Kombinieren Sie Bilder mit CSS-Sprites:

Die Kombination der Bilder wurde traditionell mit einer Bildbearbeitungssoftware durchgeführt. Jetzt wurde jedoch entdeckt, dass die CSS-Sprites-Methode auch zum Kombinieren von Bildern verwendet werden könnte.

Der Vorgang umfasst das Erstellen eines leeren Bildes und das Laden der Bilder, die Sie kombinieren möchten, an verschiedenen Positionen. Jedes dieser Einzelbilder kann dann per CSS über dem gleichen Bereich des neuen Bildes positioniert werden.

Daher kann der Browser eine einzelne Bilddatei statt mehrerer Bilder herunterladen. Dies ist besonders wichtig für mobile Geräte, da diese in der Regel langsamere Internetverbindungen haben. Sie können dies mit einem CSS-Sprite-Generator tun.

Bild-Hotlinking deaktivieren:

Das Hotlinken eines Bildes impliziert, dass jeder Ihre Bilder nehmen und auf seiner Website veröffentlichen kann. Infolgedessen erleben Sie einen ärgerlichen Bandbreitenverlust, da die Bilder von Ihrem Server auf einen anderen Server heruntergeladen werden. Sie können dies verhindern, indem Sie einen Hotlink-Schutz für Ihre Bilder verwenden.

Sie können den Bild-Hotlink-Schutz über Ihr cPanel-Konto konfigurieren. Der Prozess ist sehr einfach.

• Auf der Registerkarte Sicherheit wird ein Symbol mit der Bezeichnung Hotlink-Schutz angezeigt.
• Klicken Sie auf dieses Symbol, um auf das folgende Fenster zuzugreifen.
• Klicken Sie auf die Schaltfläche Aktivieren, um zu verhindern, dass Ihre Bilder per Hotlink verknüpft werden.

Hinweis – Wenn Sie ein Cloudflare-Benutzer sind, können Sie verhindern, dass Ihre Bilder per Hotlink verknüpft werden, indem Sie die Option „ Hotlink-Schutz “ aktivieren.

Bilder zwischenspeichern:

Für jede Website ist dies unerlässlich. Sie sollten Ihre Bilder zwischenspeichern, damit andere sie schneller anzeigen können. In den meisten Fällen haben bestehende Website-Besucher dies in ihrem Browser zwischengespeichert, aber wenn es ein Problem mit Ihrem Hosting gibt, möchten Sie es vielleicht separat einrichten.

Wann immer Sie WordPress über einen Hosting-Service installieren, kümmert sich der Hosting-Provider um das gesamte Caching für Sie. Sie können auch ein Caching-Plugin installieren.

WP Rocket ist ein ideales Plugin zum Zwischenspeichern von Bildern, da es einfach zu verwenden und zu installieren ist. Sie installieren und aktivieren es einfach und können loslegen. Natürlich gibt es noch andere Caching-Plugins, aber WP Rocket ist für diesen Zweck die erste Wahl.

Cache-Gravatare:

Ein Gravatar ist ein kleines Symbol, das Ihrer E-Mail-Adresse im Internet folgt. Wenn Sie beispielsweise einen Kommentar auf einem anderen WordPress-Blog hinterlassen, wird Ihr Gravatar daneben angezeigt.

Der Gravatar-Dienst generiert Gravatar, der sie auf seinen Servern zwischenspeichert. Wenn Sie also eine große Anzahl von Blogs kommentieren, oder sogar einige Blogs mit hohem Traffic, wird Ihr Gravatar auf den Servern von Gravatar zwischengespeichert.

Infolgedessen wird Ihr Gravatar auf all diesen Blogs schnell geladen. Andererseits kann es aber auch ein Nachteil sein, denn wenn der Gravatar-Dienst nicht verfügbar ist oder Ihr Gravatar aus einem der von Ihnen kommentierten Blogs entfernt wird, verschwindet Ihr Gravatar aus all diesen Blogs.

Es ist unglaublich unattraktiv, einen Gravatar mit einem umfassenden Bild zu personalisieren. Dies liegt daran, dass, wenn Ihr benutzerdefinierter Gravatar in diesen Blogs nicht angezeigt wird, stattdessen der Standard-Gravatar verwendet wird, was möglicherweise nicht angemessen ist.

Es gibt zwei mögliche Lösungen für dieses Problem:

• Machen Sie Ihren Gravatar so klein wie möglich. Kleinere Bilder werden schneller geladen und verbrauchen weniger Bandbreite als größere.
• Sie sollten Ihre eigene Version des Gravatar-Dienstes auf einer Domain hosten, die Sie kontrollieren. Dies erfordert einen Apache-Webserver, PHP und eine MySQL-Datenbank, um Gravatare lokal zu speichern, anstatt sie auf den Gravatar-Servern zwischenzuspeichern.

Bilder von einem CDN bereitstellen:

Wenn Ihre Bilder von einem Content Delivery Network (CDN) bereitgestellt werden, aktivieren Sie unbedingt das Caching. Dadurch müssen Browser und andere Geräte dasselbe Bild nicht mehrmals herunterladen.

Überlegen Sie am besten, wie Ihre Bilder angezeigt werden, wenn Sie ein CDN einrichten. Außerdem sollte ein CDN-Rewrite für Ihre Images aktiviert sein. Sie können dies mit dem Perfmatters-Plugin tun

Mit diesem Plugin können Sie Ihre Website ganz einfach mit einem CDN-Netzwerk verbinden. Wenn Ihre Website also Inhalte über ein Content Delivery Network bereitstellen kann, werden Ihre Bilder von den CDN-Servern ausgeführt.

Sie können eines der folgenden CDN-Netzwerke verwenden.

• CloudFlare
• BunnyCDN

Was Sie bei der Optimierung von Bildern für Ihre Website nicht tun sollten

Bild-URL-Weiterleitungen vermeiden:

Wenn Sie auf Ihrer Website eine URL-Weiterleitung verwenden, verzögert dies das Erscheinen des Bildes. Außerdem wird das Bild nicht vom Browser zwischengespeichert, was zu Verzögerungen beim Laden der Seite führen kann.

Wenn Sie Ihre Bilder für das Web optimieren, sollten Sie daher die Verwendung von URL-Weiterleitungen vermeiden.

Expires-Header vermeiden:

Wenn Sie einen Expires-Header für Ihre Bilder verwenden, werden sie vom Browser möglicherweise nicht zwischengespeichert. Es bewirkt auch, dass der Browser das Bild jedes Mal erneut anfordert, wenn es in eine Seite geladen wird.

Sie sollten es vermeiden, abgelaufene Header auf den Bildern Ihrer Website zu setzen, wenn Sie diese optimieren möchten.

Vermeiden Sie das Einbetten von Bildern:

Es ist wichtig, keine Bilder auf der Seite einzubetten, wenn Bilder für das Web optimiert werden. Dies liegt daran, dass der Browser beim Einbetten eines Bildes das gesamte Bild herunterlädt, bevor er es anzeigt.

Dies kann dazu führen, dass Ihre Website langsam lädt und Ihre Besucher frustriert. Verwenden Sie stattdessen entweder ein <img>-Tag oder ein <object>-Tag, um einen Link zu dem Bild auf Ihrem Server einzufügen. Somit kann der Browser nur die Bilddatei herunterladen, nicht die gesamte Seite.

Beste Bildoptimierungstools:

Hochwertige Inhalte sind für die Entwicklung professioneller Blogs unerlässlich. Darüber hinaus sind hochwertige Bilder erforderlich, damit ein Blog attraktiv erscheint. Es ist jedoch schwierig, kostenlose Tools zum Optimieren von Bildern zu finden, ohne an Auflösung und schön gestalteten Bildern zu verlieren.

Als Ergebnis habe ich eine Liste mit einigen der effektivsten Bildoptimierungstools zusammengestellt, um unsere Arbeit zu erleichtern.

• TinyJPG: TinyJPG ist ein praktisches Online-Tool zum Komprimieren von JPEG-Bildern. Die Komprimierungsrate dieses Tools ist sehr hoch und die Bildqualität ist immer noch ausgezeichnet.
• Toolur: Toolur ist ein hilfreiches Online-Tool, um Bilder für das Web zu optimieren. Es optimiert Bilder, indem es die Dateigröße reduziert, ohne die Bildqualität zu beeinträchtigen.
• ImageOptim: ImageOptim ist eines der besten Tools zur Bildoptimierung. Dieses Tool hilft Ihnen, die Ladegeschwindigkeit Ihrer Website zu verbessern, indem es die Bilder auf der Webseite optimiert. Es kann sogar bereits komprimierte Bilder optimieren.
• GIMP: GIMP ist ein großartiger Bildeditor, mit dem Sie die Dateigröße des Bildes reduzieren und gleichzeitig die Qualität des Bildes beibehalten können. Es ist eine würdige Alternative zu Adobe Photoshop.

Die besten Bildoptimierungs-Plugins für WordPress

Es gibt mehrere verschiedene Bildoptimierungs-Plugins für WordPress. Es kann schwierig sein, das für Ihre Bedürfnisse am besten geeignete auszuwählen. Hier ist eine Liste der Top-Plugins.

• EWWW Bildoptimierer
• Imagify von WP Rocket Team
• ShortPixel-Bildoptimierung
• WP Schmus
• reSmush.it

Sie können die Plugins EWWW Image Optimizer , Imagify by WP Rocket Team und ShortPixel Image Optimizer aus der obigen Liste verwenden.

Sie sollten ein Premium-Plugin zur Bildoptimierung verwenden, um das optimale Ergebnis zu erzielen. Wenn Sie etwas Geld sparen möchten, probieren Sie EWWW Image Optimizer aus .

Häufig gestellte Fragen

Wie erstelle ich WebP-Bilder in WordPress?

Wenn Sie WP Rocket verwenden, um Bilder auf Ihrer Website zu optimieren, werden sie automatisch als WebP gespeichert. Wenn Sie dagegen ein JPG- oder PNG-Bild in ein WebP-Bild konvertieren möchten, können Sie dies mit einem Plugin tun.

Sie können dafür eines der folgenden Plugins verwenden.

• WebP-Konverter für Medien
• WebP Express

Ein großartiges Plugin, das ich für WebP verwende, ist Flying Images von WP Speed ​​Matters. Es funktioniert mit jedem Thema und behandelt alles. Darüber hinaus können Sie damit WebP-Images in beliebiger Größe erstellen und einen kostenlosen Image-CDN-Dienst bereitstellen, was ein erheblicher Vorteil ist.

Wie verschiebe ich Offscreen-Bilder?

Das defer-Attribut kann in JavaScript verwendet werden, um Offscreen-Bilder zu laden, wodurch der Browser das Laden der anfänglichen Seite schneller rendern kann. Dies erfordert die Start- und End-Tags. Zum Beispiel:

<img src=“image-source.png“ alt=““ width=“100px“ height=“100px“ title=“Etwas Tooltip-Text“ data-defer=“offscreen-image.jpg“ />

Hinweis: Defer wird nur in HTML5 unterstützt, nicht in XHTML.

Durch die Verwendung eines JavaScript-Plugins wie Perfmatters können Sie das Laden Ihrer Bilder verzögern. Daher können Sie das img-Tag in ein beliebiges Element ändern, z. B. ein div.

<div data-defer="offscreen-image.jpg"></div>

Wie behebt man das Verschieben von Offscreen-Bildern?

• Bilder faul laden.
• Lazy Load Hintergrundbilder.

Bilder „above the fold“ sollten von Lazy Load ausgeschlossen werden, damit Benutzer sie schnell bemerken. Um jedoch verzögerte Offscreen- oder Lazy-Load-Bilder auf einer WordPress-Site aufzulösen, können Sie das Perfmatters-Plugin verwenden. Mit dem Plugin können Sie die Ladegeschwindigkeit Ihrer WordPress-Site verbessern, indem Sie das Laden von Offscreen-Bildern verschieben.

Hinweis- Sie können das verzögerte Laden von Bildern mit dem WP Rocket-Plugin aktivieren. Sie können also jede davon verwenden.

Abschließend

WordPress ist ein leistungsstarkes Content-Management-System, mit dem Sie Ihre eigene Website erstellen und verwalten können. Die Optimierung von Bildern für WordPress kann jedoch ohne die entsprechenden Tools schwierig sein.

Das Problem bei der Optimierung von Bildern für WordPress ist, dass so viele verschiedene Methoden zur Verfügung stehen. Sie können beispielsweise ein Plugin, ein Online-Tool oder sogar Ihre eigene Software verwenden.

Die effektivste Methode zur Optimierung von Bildern für WordPress ist die Kombination all dieser Techniken . Darüber hinaus können Sie ein Plugin verwenden, das erkennt, welche Bilder in der Größe geändert werden müssen, und Sie können sie auch manuell in der Größe ändern.

Neben der Optimierung der Bildgrößen für WordPress sollten Sie auch die Anzahl der Dateien pro Beitrag optimieren. Versuchen Sie, Premium-Plugins zu verwenden, um die Geschwindigkeit von Bildern und Websites zu optimieren. Als Ergebnis können Sie eine benutzerfreundliche, schnelle und effiziente Website entwickeln.