Wie man Bilder für die Webleistung optimiert, ohne an Qualität zu verlieren

Wussten Sie, dass die Optimierung Ihrer Bilder vor dem Hochladen in WordPress einen großen Einfluss auf die Geschwindigkeit Ihrer Website haben kann?

Wenneinen neuen Blog startenViele Anfänger laden einfach Bilder hoch, ohne sie für das Web zu optimieren. Diese großen Bilddateien machen Ihre Website langsamer.

Sie können dies beheben, indem Sie die besten Praktiken zur Bildoptimierung als Teil Ihrer regelmäßigen Blogging-Routine anwenden.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Bilder für eine schnellere Web-Performance ohne Qualitätsverlust optimieren können. Außerdem stellen wir Ihnen automatische Bildoptimierungs-Plugins für WordPress vor, die Ihnen das Leben erleichtern können.

Da dies ein umfassender Leitfaden zur Bildoptimierung für das Web ist, haben wir ein übersichtliches Inhaltsverzeichnis erstellt:

Was ist Bildoptimierung?

Bei der Bildoptimierung geht es darum, Bilder in der kleinstmöglichen Dateigröße zu speichern und bereitzustellen, ohne die Bildqualität insgesamt zu beeinträchtigen.

Dieser Prozess klingt zwar kompliziert, ist aber heutzutage eigentlich ganz einfach. Sie können eines der vielen Bildoptimierungs-Plugins und -Tools verwenden, um Bilder automatisch um bis zu 80 % zu komprimieren, ohne dass die Bildqualität sichtbar leidet.

Hier ist ein Beispiel für ein optimiertes und ein nicht optimiertes Bild:

Wie Sie sehen, kann dasselbe Bild bei richtiger Optimierung bis zu 80 % kleiner sein als das Original, ohne dass es zu Qualitätseinbußen kommt. In diesem Beispiel ist das Bild 52 % kleiner.

Wie funktioniert die Bildoptimierung?

Vereinfacht gesagt, funktioniert die Bildoptimierung mit Hilfe der Komprimierungstechnik.

Die Komprimierung kann „verlustbehaftet“ oder „verlustfrei“ sein.

Bei der verlustfreien Komprimierung wird die Gesamtgröße der Datei verringert, ohne dass die Bildqualität beeinträchtigt wird. Bei verlustbehafteter Komprimierung kann es zu einem geringfügigen Qualitätsverlust kommen, der aber im Idealfall für Ihre Besucher nicht wahrnehmbar ist.

Was bedeutet es, Bilder zu optimieren?

Vielleicht haben Sie von Ihrem WordPress-Hosting-Support oder einem Geschwindigkeitstest-Tool eine Empfehlung zur Optimierung von Bildern erhalten und fragen sich, was Sie tun müssen.

Sie müssen die Dateigröße Ihrer Bilder reduzieren, indem Sie sie für das Web optimieren. Wir zeigen Ihnen, wie Sie das Schritt für Schritt tun können.

Was sind die Vorteile der Bildoptimierung?

Die Optimierung Ihrer Bilder hat viele Vorteile, aber hier sind die wichtigsten, die Sie kennen sollten:

• Schnellere Website-Geschwindigkeit
• Verbesserte SEO-Rankings
• Eine höhere Gesamtumwandlungsrate für Verkäufe und Leads
• Weniger Speicherplatz und Bandbreite (was die Hosting- und CDN-Kosten senken kann)
• Schnellere Website-Backups (was die Kosten für die Speicherung von Backups senken kann)

Bilder sind nach Videos das zweitwichtigste Element auf einer Webseite. Laut derHTTP-Archiv,Bilder machen 42 % des Gesamtgewichts einer durchschnittlichen Webseite aus.

Da wir wissen, dass schnelle Websites in Suchmaschinen (SEO) besser ranken und bessere Konversionen haben, ist Bildoptimierung etwas, das jede Unternehmenswebsite tun muss, wenn sie online erfolgreich sein will.

Jetzt fragen Sie sich vielleicht, wie groß der Unterschied ist, den die Bildoptimierung wirklich machen kann.

Laut einer Studie von Strangeloop kann eine Verzögerung von einer Sekunde bei der Ladezeit einer Website Sie 7 % Umsatz, 11 % weniger Seitenaufrufe und 16 % weniger Kundenzufriedenheit kosten.

Wenn das nicht genug Gründe sind, um Ihre Website zu beschleunigen, dann sollten Sie wissen, dass Suchmaschinen wie Google schnell ladende Websites auch bei der Suchmaschinenoptimierung bevorzugen.

Das bedeutet, dass Sie durch die Optimierung Ihrer Bilder für das Web sowohlVerbesserung der Website-Geschwindigkeit und erhöhenWordPress SEO-Rankings.

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter.

Speichern und Optimieren von Bildern für die Webleistung

Der Schlüssel zu einer erfolgreichen Bildoptimierung für die Web-Performance liegt darin, die perfekte Balance zwischen der kleinsten Dateigröße und einer akzeptablen Bildqualität zu finden.

Die drei Dinge, die bei der Bildoptimierung eine große Rolle spielen, sind:

• Bilddateiformat (JPEG vs. PNG vs. GIF)
• Komprimierung (höhere Komprimierung = geringere Dateigröße)
• Bildabmessungen (Höhe und Breite)

Durch die Wahl der richtigen Kombination dieser drei Faktoren können Sie die Bildgröße um bis zu 80 % reduzieren.

Schauen wir uns jede dieser Möglichkeiten einmal genauer an.

1. Bilddateiformat

Für die meisten Website-Besitzer sind die einzigen drei Bilddateiformate, die wirklich wichtig sind, JPEG, PNG und GIF. Die Wahl des richtigen Dateityps spielt eine wichtige Rolle bei der Bildoptimierung.

Der Einfachheit halber sollten Sie JPEGs für Fotos oder Bilder mit vielen Farben, PNGs für einfache oder transparente Bilder und GIFs nur für animierte Bilder verwenden.

Für diejenigen, die den Unterschied zwischen den einzelnen Dateitypen nicht kennen: Das PNG-Bildformat ist unkomprimiert, was bedeutet, dass es eine höhere Bildqualität aufweist. Der Nachteil ist, dass die Dateigrößen viel größer sind.

JPEG hingegen ist ein komprimiertes Dateiformat, bei dem die Bildqualität leicht reduziert wird, um die Dateigröße deutlich zu verringern.

GIF hingegen verwendet nur 256 Farben und eine verlustfreie Komprimierung, was es zur besten Wahl für animierte Bilder macht.

Auf WPBeginner verwenden wir alle drei Bildformate, je nach Art des Bildes.

2. Komprimierung

Der nächste Punkt ist die Bildkomprimierung, die eine große Rolle bei der Bildoptimierung spielt.

Es gibt verschiedene Arten und Stufen der Bildkomprimierung. Die jeweiligen Einstellungen hängen von Ihrem Bildkomprimierungsprogramm ab.

Die meisten Bildbearbeitungsprogramme wieAdobe Photoshop,ON1 Foto, GIMP, Affinity Photo und andere verfügen über integrierte Bildkomprimierungsfunktionen.

Sie können Bilder auch normal speichern und dann ein Webtool wieTinyPNG oderJPEGmini für eine einfachere Bildkomprimierung.

Obwohl sie einen gewissen manuellen Aufwand erfordern, ermöglichen diese beiden Methoden die Komprimierung von Bildern, bevor sie in WordPress hochgeladen werden, und das ist es, was wir auf WPBeginner tun.

Es gibt auch mehrere beliebte WordPress-Plugins wieOptimole undEWWW Image Optimizer die Bilder automatisch komprimieren können, wenn Sie sie zum ersten Mal hochladen. Das ist praktisch, und viele Anfänger und sogar große Unternehmen bevorzugen die Verwendung dieser Plugins zur Bildoptimierung.

Wir werden später in diesem Artikel mehr über die Verwendung von WordPress-Plugins berichten.

3. Bild Abmessungen

Wenn Sie ein Foto von Ihrem Handy oder einer Digitalkamera importieren, hat es in der Regel eine sehr hohe Auflösung und große Dateigrößen (Höhe und Breite).

Diese Fotos haben in der Regel eine Auflösung von 300 DPI und Abmessungen ab 2000 Pixel und mehr. Hochwertige Fotos eignen sich zwar gut für den Druck oder das Desktop-Publishing, sind aber aufgrund ihrer großen Größe für Websites ungeeignet.

Wenn Sie die Bildabmessungen auf ein vernünftiges Maß reduzieren, können Sie die Größe der Bilddatei erheblich verringern. Sie können einfachBilder in der Größe ändern mit einer Bildbearbeitungssoftware auf Ihrem Computer.

Wir haben zum Beispiel ein Foto mit einer Auflösung von 300 DPI und einer Bildgröße von 4900×3200 Pixeln optimiert. Die ursprüngliche Dateigröße betrug 1,8 MB.

Wir wählten das JPEG-Format für eine höhere Komprimierung und änderten die Abmessungen auf 1200×795 Pixel. Die Dateigröße wurde auf nur 103 KB reduziert. Das sind 94 % weniger als die ursprüngliche Dateigröße.

Nachdem Sie nun die drei wichtigen Faktoren bei der Bildoptimierung kennen, wollen wir uns nun verschiedene Tools zur Bildoptimierung für Website-Betreiber ansehen.

Beste Bildoptimierungs-Tools und -Programme

Wie bereits erwähnt, verfügen die meisten Bildbearbeitungsprogramme über Einstellungen zur Bildoptimierung und -komprimierung.

Neben der Bildbearbeitungssoftware gibt es auch mehrere leistungsstarke kostenlose Bildoptimierungstools, mit denen Sie Bilder für das Web optimieren können (mit nur wenigen Klicks).

Wir empfehlen die Verwendung dieser Tools, um Bilder zu optimieren, bevor Sie sie in WordPress hochladen, insbesondere wenn Sie ein Perfektionist sind.

Diese Methode hilft Ihnen, Speicherplatz auf Ihrem WordPress-Hosting-Konto zu sparen, und sie garantiert das schnellste Bild mit der besten Qualität, da Sie jedes Bild manuell überprüfen.

Adobe Photoshop

Adobe Photoshop ist eine hochwertige Bildbearbeitungsanwendung, mit der Sie Bilder mit einer kleineren Dateigröße für das Web exportieren können.

Im Exportdialog können Sie ein Bilddateiformat (JPG, PNG, GIF) wählen, das die kleinste Dateigröße ergibt.

Sie können auch die Bildqualität, die Farben und andere Optionen reduzieren, um die Dateigröße weiter zu verringern.

GIMP

GIMP ist eine kostenlose und Open-Source-Alternative zu Adobe Photoshop. Sie kann verwendet werden, um Ihre Bilder für das Web zu optimieren. Der Nachteil ist, dass es nicht so einfach zu bedienen ist wie einige andere Lösungen auf dieser Liste.

Zuerst müssen Sie Ihr Bild in GIMP öffnen und dann die OptionDatei “ Exportieren als… Option. Daraufhin wird das Dialogfeld „Bild exportieren“ angezeigt, in dem Sie Ihrer Datei einen neuen Namen geben können. Als nächstes müssen Sie auf die Schaltfläche „Exportieren“ klicken.

Sie sehen nun die Optionen für den Bildexport. Bei JPEG-Dateien können Sie mit dem Schieberegler „Qualität“ die Komprimierungsstufe auswählen und die Dateigröße reduzieren.

Abschließend sollten Sie auf die Schaltfläche „Exportieren“ klicken, um die optimierte Bilddatei zu speichern.

TinyPNG

TinyPNG ist eine kostenlose Webanwendung, die eine intelligente verlustbehaftete Komprimierungstechnik verwendet, um die Größe Ihrer PNG- und JPEG-Dateien zu reduzieren. Alles, was Sie tun müssen, ist, auf die Website zu gehen und Ihre Bilder durch einfaches Ziehen und Ablegen hochzuladen.

Sie komprimieren das Bild und geben Ihnen einen Download-Link.

Es gibt auch eine Erweiterung für Adobe Photoshop, das wir für unsere Bildbearbeitung verwenden, weil es den Zugriff auf TinyPNG aus Photoshop heraus ermöglicht.

Für Entwickler gibt es eine API zur automatischen Konvertierung von Bildern. Außerdem gibt es für Anfänger ein WordPress-Plugin, das diese Aufgabe für Sie übernimmt. Wir werden später mehr darüber sprechen.

JPEGmini

JPEGmini verwendet eine verlustfreie Komprimierungstechnologie, die die Größe von Bildern erheblich reduziert, ohne ihre wahrgenommene Qualität zu beeinträchtigen. Sie können auch die Qualität des Originalbildes mit der des komprimierten Bildes vergleichen.

Sie können die Webversion kostenlos nutzen oder das Programm für Ihren Computer kaufen. Sie haben auch eine kostenpflichtige API, um den Prozess für Ihren Server zu automatisieren.

ImageOptim

ImageOptim ist ein Mac-Dienstprogramm, mit dem Sie Bilder ohne Qualitätsverlust komprimieren können, indem Sie die besten Komprimierungsparameter finden und unnötige Farbprofile entfernen.

Eine Windows-Alternative dazu istTrimage.

Beste Bildoptimierungs-Plugins für WordPress

Wir glauben, dass Sie Ihre Bilder am besten optimieren, bevor Sie sie in WordPress hochladen. Wenn Sie jedoch eine Website mit mehreren Autoren betreiben oder eine automatisierte Lösung benötigen, dann können Sie eineWordPress Plugin zur Bildkomprimierung.

Hier ist unsere Liste der besten WordPress Plugins zur Bildkomprimierung:

1. Optimole, ein beliebtes Plugin des Teams hinterThemeIsle
2. EWWW Image Optimizer
3. JPEG, PNG & WebP Bildkomprimierungein Plugin des oben erwähnten TinyPNG-Teams
4. Imagify, ein Plugin des beliebtenWP Rakete Team
5. ShortPixel Bildoptimierer
6. Smush
7. reSmush.it

Diese WordPress-Plugins zur Bildoptimierung helfen Ihnen, Ihre Website zu beschleunigen.

Abschließende Überlegungen und bewährte Praktiken für die Bildoptimierung

Wenn Sie keine für das Web optimierten Bilder speichern, sollten Sie dies jetzt tun. Es wird einen großen Unterschied in der Geschwindigkeit Ihrer Website machen, und Ihre Nutzer werden es Ihnen danken.

Ganz zu schweigen davon, dass schnellere Websites gut für die Suchmaschinenoptimierung sind, und Sie werden wahrscheinlich einen Anstieg Ihrer Platzierungen in den Suchmaschinen feststellen.

Abgesehen von der Bildoptimierung sind die beiden Dinge, die Ihnen helfen werden, Ihre Website zu beschleunigen, die Verwendung einesWordPress-Caching-Plugin und die Verwendung einesWordPress CDN.