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

Die Optimierung Ihrer Bilder vor dem Hochladen in WordPress verbessert die Geschwindigkeit Ihrer Website erheblich. Dennoch haben viele Anfänger langsame Websites, einfach weil sie nicht optimierte Bilder hochladen.

Bei WPBeginner gehören die besten Praktiken zur Bildoptimierung zu unserer regelmäßigen Blogging-Routine. Wir stellen sicher, dass alle unsere Autoren Bilder mit den richtigen Abmessungen erstellen und dann die Dateigröße der Bilder mit einer Vielzahl von Grafik-Tools reduzieren.

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:

1. 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.

2. 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. Nach Angaben des HTTP-Archivs machen Bilder 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 sowohl die Geschwindigkeit Ihrer Website verbessern als auch die SEO-Rankings von WordPress steigern können.

Video-Anleitung

Subscribe to WPBeginner

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

3. 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 Kompression, 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 wie Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo und andere haben integrierte Bildkomprimierungsfunktionen.

Sie können Bilder auch normal speichern und dann ein Webtool wie TinyPNG oder JPEGmini zur einfacheren Bildkomprimierung verwenden.

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 wie Optimole und EWWW 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.

Durch Verkleinern der Bildgröße auf ein vernünftiges Maß kann die Dateigröße erheblich reduziert werden. Sie können die Größe von Bildern einfach mit einer Bildbearbeitungssoftware auf Ihrem Computer ändern.

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.

4. 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 erstklassige 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. Es 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 Option Datei “ Exportieren als... wählen. 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, die Website zu besuchen und Ihre Bilder per Drag & Drop 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 deren 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 ist Trimage.

5. Beste Bildoptimierungs-Plugins für WordPress

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

Hier ist unsere Liste der besten WordPress Plugins zur Bildkomprimierung:

1. Optimole, ein beliebtes Plugin des Teams hinter ThemeIsle
2. EWWW Image Optimizer
3. JPEG, PNG & WebP Image Compression, ein Plugin des oben erwähnten TinyPNG-Teams
4. Imagify, ein Plugin des beliebten WP Rocket-Teams
5. ShortPixel Bildoptimierer
6. Smush
7. reSmush.it
8. Envira Gallery ist ein WordPress-Galerie-Plugin mit integrierter Bildkompression

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

6. 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 (SEO) 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 eines WordPress-Caching-Plugins und die Verwendung eines WordPress-CDN.

Alternativ können Sie auch ein verwaltetes WordPress-Hosting-Unternehmen verwenden, da diese häufig sowohl Caching als auch CDN als Teil der Plattform anbieten.

Expertenanleitungen zur Verbesserung der WordPress-Leistung

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Ihre Bilder in WordPress optimieren können. Vielleicht interessieren Sie sich auch für einige andere Artikel zur Verbesserung der WordPress-Leistung:

• Der ultimative Leitfaden zur Steigerung der Geschwindigkeit und Leistung von WordPress
• Wie man die Leistung von WooCommerce beschleunigt
• Beste WordPress Caching Plugins zur Beschleunigung Ihrer Website
• Optimieren von Core Web Vitals für WordPress (ultimative Anleitung)
• Verkürzung der Zeit bis zum ersten Byte (TTFB) in WordPress – Expertentipps
• Verwendung des GTmetrix-Plugins zur Verbesserung der Leistung von WordPress-Websites
• Schnellstes WordPress-Hosting (Leistungstests)
• Wichtige Metriken, die Sie auf Ihrer WordPress-Website messen sollten
• Wie man einen Website-Geschwindigkeitstest richtig durchführt
• Wie man eine WordPress-Website einem Stresstest unterzieht

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.