Wie man Bilder für Web-Performance optimiert, ohne Qualität zu verlieren

Mit einer langsamen Website umzugehen ist unglaublich frustrierend. Nachdem wir Tausenden von WPBeginner-Lesern geholfen haben, ihre Websites zu beschleunigen, haben wir festgestellt, dass ein Problem häufiger auftritt als jedes andere: große, nicht optimierte Bilder.

Viele Website-Besitzer befürchten, dass das Verkleinern ihrer Bilder sie unscharf und unprofessionell aussehen lässt. Das verstehen wir. Die gute Nachricht ist, dass Sie sich nicht zwischen schnell ladenden Seiten und schönen, hochwertigen Bildern entscheiden müssen.

Wir haben einen einfachen Prozess zur Bildoptimierung perfektioniert, den wir auf all unseren eigenen Websites verwenden. Diese Anleitung führt Sie durch genau diese anfängerfreundlichen Schritte. Sie lernen, wie Sie Ihre Bilder verkleinern, ohne die Qualität zu beeinträchtigen.

Da dies ein umfassender Leitfaden zur Bildoptimierung für das Web ist, haben wir ein leicht verständliches Inhaltsverzeichnis erstellt:

1. Was ist Bildoptimierung?
2. Was sind die Vorteile der Bildoptimierung?
3. Bilder für Web-Performance speichern und optimieren
4. Beste Tools und Programme zur Bildoptimierung
5. Beste Plugins zur Bildoptimierung für WordPress
6. Abschließende Gedanken und Best Practices für die Bildoptimierung
7. Video-Tutorial
8. Häufig gestellte Fragen zur Bildoptimierung
9. Zusätzliche Ressourcen zur Verbesserung der WordPress-Leistung

1. Was ist Bildoptimierung?

Bildoptimierung ist der Prozess des Speicherns und Auslieferns von Bildern in der kleinstmöglichen Dateigröße, ohne die Gesamtbildqualität zu verringern.

Obwohl der Prozess komplex klingt, ist er heutzutage eigentlich ganz einfach. Sie können eines der vielen Plugins und Tools zur Bildoptimierung verwenden, um Bilder automatisch um bis zu 80 % zu komprimieren, ohne sichtbaren Qualitätsverlust.

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

Wie Sie sehen können, kann dasselbe Bild bei richtiger Optimierung bis zu 80 % kleiner sein als das Original, ohne Qualitätsverlust. In diesem Beispiel ist das Bild 52 % kleiner.

Wie funktioniert Bildoptimierung?

Vereinfacht ausgedrückt funktioniert die Bildoptimierung durch den Einsatz von Kompressionstechnologie.

Komprimierung kann „verlustbehaftet“ oder „verlustfrei“ sein.

Verlustfreie Komprimierung reduziert die Gesamtdateigröße ohne jeglichen Verlust an Bildqualität. Bei verlustbehafteter Komprimierung kann es zu einem geringfügigen Qualitätsverlust kommen, der aber idealerweise für Ihre Besucher nicht wahrnehmbar ist.

Was bedeutet es, Bilder zu optimieren?

Möglicherweise haben Sie eine Empfehlung zur Bildoptimierung von Ihrem WordPress-Hosting-Support oder einem Geschwindigkeitstest-Tool 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 Schritt für Schritt, wie das geht.

2. Was sind die Vorteile der Bildoptimierung?

Während die Optimierung Ihrer Bilder viele Vorteile hat, sind hier die wichtigsten, die Sie kennen sollten:

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

Bilder sind nach Videos der zweitschwerste Bestandteil einer Webseite. Laut dem HTTP Archive machen Bilder oft den größten Teil der gesamten Dateigröße einer Seite aus.

Da wir wissen, dass schnelle Websites in Suchmaschinen höher ranken (SEO) und bessere Konversionen erzielen, ist die Bildoptimierung etwas, das jede Geschäftswebsite tun muss, wenn sie online erfolgreich sein will.

Nun fragen Sie sich vielleicht, wie groß der Unterschied bei der Bildoptimierung wirklich sein kann.

Eine grundlegende Studie von Strangeloop ergab, dass eine Verzögerung von einer Sekunde bei der Ladezeit 7 % der Verkäufe, 11 % weniger Seitenaufrufe und eine Abnahme der Kundenzufriedenheit um 16 % kosten könnte. Heute, da die Erwartungen der Nutzer noch höher sind, ist die Auswirkung noch bedeutender.

Wenn dies nicht genug Gründe sind, um Ihre Website zu beschleunigen, sollten Sie wissen, dass Suchmaschinen wie Google schneller ladenden Websites auch eine bevorzugte SEO-Behandlung geben.

Das bedeutet, dass Sie durch die Optimierung Ihrer Bilder für das Web sowohl die Website-Geschwindigkeit verbessern als auch die WordPress SEO-Rankings steigern können.

3. Bilder für Web-Performance speichern und optimieren

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

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

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

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

Schauen wir uns jeden einzelnen davon genauer an.

1. Bilddateiformat

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

Um es einfach zu halten, 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 verwendet verlustfreie Komprimierung. Das bedeutet, dass die Dateigröße ohne Qualitätsverlust reduziert wird, was es zu einer guten Wahl für Logos, textlastige Grafiken und Bilder macht, bei denen Sie scharfe Linien und Transparenz benötigen.

• JPEG hingegen ist ein komprimiertes Dateiformat, das die Bildqualität leicht reduziert, um eine deutlich kleinere Dateigröße zu erzielen.

• Während GIF nur 256 Farben zusammen mit verlustfreier Komprimierung verwendet, was es zur besten Wahl für animierte Bilder macht.

Auf WPBeginner verwenden wir eine Mischung aus diesen Formaten. Viele moderne Websites verwenden jedoch jetzt das WebP-Format. WebP bietet oft eine noch bessere Komprimierung als JPEG und PNG (was kleinere Dateien bedeutet) bei ausgezeichneter Qualität. Die meisten Browser unterstützen es inzwischen, und viele Optimierungs-Plugins können Ihre Bilder automatisch in WebP konvertieren, um einen enormen Geschwindigkeitsvorteil zu erzielen.

Weitere Informationen zu Bildformaten finden Sie in unserem Leitfaden zu WebP vs. PNG vs. JPEG: Was ist das beste Bildformat für WordPress.

2. Kompression

Das Nächste ist die Bildkomprimierung, die eine große Rolle bei der Bildoptimierung spielt.

Es gibt verschiedene Arten und Stufen der Bildkomprimierung. Die Einstellungen für jede variieren je nach Ihrem Bildkomprimierungstool.

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

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

Obwohl sie etwas manuellen Aufwand erfordern, ermöglichen Ihnen diese beiden Methoden, Bilder vor dem Hochladen in WordPress zu komprimieren, und genau das tun wir auf WPBeginner.

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 ziehen es vor, diese Bildoptimierungs-Plugins zu verwenden.

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

3. Bildabmessungen

Normalerweise, wenn Sie ein Foto von Ihrem Handy oder einer Digitalkamera importieren, hat es eine sehr hohe Auflösung und große Dateidimensionen (Höhe und Breite).

Wenn Sie Fotos von Ihrem Handy oder einer Digitalkamera erhalten, haben diese oft sehr große Pixelabmessungen (z. B. 4000 Pixel breit) und möglicherweise eine „Auflösungseinstellung“ von 300 DPI.

Hier ist ein wichtiger Tipp für Web-Bilder: Sie können DPI komplett ignorieren. Diese Einstellung ist für den Druck gedacht. Für das Web sind nur die Pixelabmessungen (Höhe und Breite) relevant.

Die Reduzierung der Bildabmessungen auf etwas Angemesseneres kann die Bilddateigröße erheblich verringern. Sie können Bilder einfach mit Bildbearbeitungssoftware auf Ihrem Computer skalieren.

Zum Beispiel haben wir ein Foto mit riesigen Originalabmessungen von 4900×3200 Pixeln aufgenommen. Die ursprüngliche Dateigröße betrug 1,8 MB.

Wir haben das JPEG-Format für eine höhere Komprimierung gewählt und die Abmessungen auf 1200×795 Pixel geändert. Die Dateigröße wurde auf nur 103 KB reduziert. Das ist 94 % kleiner als die ursprüngliche Dateigröße.

Jetzt, da Sie die drei wichtigen Faktoren der Bildoptimierung kennen, werfen wir einen Blick auf verschiedene Bildoptimierungswerkzeuge für Website-Betreiber.

4. Beste Tools und Programme zur Bildoptimierung

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

Abgesehen von 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, diese Tools zu verwenden, um Bilder zu optimieren, bevor Sie sie auf WordPress hochladen, insbesondere wenn Sie ein Perfektionist sind.

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

Adobe Photoshop

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

Über den Exportdialog können Sie ein Bilddateiformat (JPG, PNG, GIF) wählen, das Ihnen die kleinste Dateigröße liefert.

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

GIMP

GIMP ist eine kostenlose 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… auswählen. Daraufhin öffnet sich der Dialog „Bild exportieren“, in dem Sie Ihrer Datei einen neuen Namen geben können. Klicken Sie anschließend auf die Schaltfläche „Exportieren“.

Sie sehen nun die Optionen zum Exportieren von Bildern. Bei JPEG-Dateien können Sie mit dem Schieberegler „Qualität“ die Komprimierungsstufe auswählen und die Dateigröße reduzieren.

Schließlich sollten Sie auf die Schaltfläche 'Exportieren' klicken, um die optimierte Bilddatei zu speichern.

TinyPNG

TinyPNG ist eine kostenlose Web-App, 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 deren Website zu gehen und Ihre Bilder per Drag & Drop hochzuladen.

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

Sie haben auch eine Erweiterung für Adobe Photoshop, die wir als Teil unseres Bildbearbeitungsprozesses verwenden, da sie Ihnen den Zugriff auf TinyPNG direkt aus Photoshop ermöglicht.

Für Entwickler gibt es eine API zur automatischen Konvertierung von Bildern. Zusätzlich gibt es für Anfänger ein WordPress-Plugin, das dies für Sie erledigt. Wir werden später mehr darüber sprechen.

JPEGmini

JPEGmini verwendet eine leistungsstarke verlustbehaftete 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 und des komprimierten Bildes vergleichen, um sich selbst davon zu überzeugen.

Sie können deren 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 der beste Weg, Ihre Bilder zu optimieren, darin besteht, dies vor dem Hochladen in WordPress zu tun. Wenn Sie jedoch eine Website mit mehreren Autoren betreiben oder eine automatisierte Lösung benötigen, können Sie ein WordPress-Bildkomprimierungs-Plugin ausprobieren.

Hier ist unsere Liste der besten WordPress-Bildkompressions-Plugins:

1. Optimole, ein beliebtes Plugin des Teams hinter ThemeIsle
2. EWWW Bildoptimierer
3. JPEG-, PNG- & WebP-Bildkomprimierung, ein Plugin des oben genannten 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 Bildkomprimierung

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

6. Abschließende Gedanken und Best Practices für die Bildoptimierung

Wenn Sie keine für das Web optimierten Bilder speichern, sollten Sie jetzt damit beginnen. Es wird einen großen Unterschied für die Geschwindigkeit Ihrer Website machen, und Ihre Benutzer werden es Ihnen danken.

Ganz zu schweigen davon, dass schnellere Websites großartig für SEO sind und Sie wahrscheinlich eine Verbesserung Ihrer Suchmaschinenrankings feststellen werden.

Abgesehen von der Bildoptimierung sind die beiden Dinge, die Ihnen helfen werden, Ihre Website erheblich zu beschleunigen, die Verwendung eines WordPress-Caching-Plugins und die Verwendung eines WordPress-CDN.

Bei WPBeginner verwenden wir WP Rocket, da es sowohl leistungsstarke Caching- als auch Bildoptimierungsfunktionen, einschließlich Lazy Loading (was bedeutet, dass Bilder erst geladen werden, wenn ein Besucher nach unten scrollt) und WebP-Unterstützung, in einer einzigen Lösung kombiniert.

Wenn Sie das Plugin Envira Gallery verwenden, empfehlen wir auch deren Envira CDN Service. Es ist ein bildspezifisches CDN, das Ihre Fotogalerien unglaublich schnell laden lässt, ohne die Komplexität einer herkömmlichen CDN-Einrichtung.

Alternativ können Sie ein Managed WordPress Hosting-Unternehmen nutzen, da diese oft sowohl Caching als auch CDN als Teil der Plattform anbieten.

Video-Tutorial

WPBeginner abonnieren

Häufig gestellte Fragen zur Bildoptimierung

Im Laufe der Jahre, in denen wir Benutzern geholfen haben, die Geschwindigkeit ihrer Websites zu verbessern, haben wir viele Fragen zur Bildoptimierung beantwortet. Hier sind die Antworten auf einige der häufigsten.

1. Welches ist das beste Bildformat für das Web?

Das hängt vom Bildtyp ab. Für Fotografien mit vielen Farben ist JPEG normalerweise die beste Wahl. Für einfache Grafiken, Logos oder Bilder, die einen transparenten Hintergrund benötigen, ist PNG ideal. GIFs sollten nur für Animationen verwendet werden. Das neuere WebP-Format ist ebenfalls eine ausgezeichnete Option, die eine hohe Qualität bei kleinen Dateigrößen bietet.

2. Reduziert die Optimierung von Bildern deren Qualität?

Nicht immer. Eine „verlustfreie“ Komprimierung verkleinert Dateien ohne Qualitätsverlust. Selbst bei einer „verlustbehafteten“ Komprimierung ist das Ziel, ein Gleichgewicht zu finden, bei dem die Dateigröße drastisch reduziert wird, aber jede Qualitätsänderung für das bloße Auge praktisch unsichtbar ist.

3. Was ist eine gute Dateigröße für Web-Bilder?

Es gibt keine perfekte Größe, aber ein guter Richtwert für die meisten Bilder liegt unter 150 KB. Bei großen, bildschirmfüllenden Bildern können Sie bis zu 500 KB gehen. Das Hauptziel ist immer, die kleinstmögliche Datei zu erhalten und gleichzeitig sicherzustellen, dass das Bild auf Ihrer Website gestochen scharf und klar aussieht.

4. Wie verbessert die Bildoptimierung die SEO?

Suchmaschinen wie Google nutzen die Seitenladegeschwindigkeit als Rankingfaktor. Da Bilder oft die größten Dateien auf einer Seite sind, beschleunigt deren Optimierung die Ladezeit Ihrer Website. Diese Geschwindigkeitsverbesserung kann zu besseren SEO-Rankings und einer besseren Erfahrung für Ihre Besucher führen.

5. Kann ich bereits in WordPress hochgeladene Bilder optimieren?

Ja. Die meisten Bildoptimierungs-Plugins für WordPress verfügen über eine Funktion zur „Massenoptimierung“. Dieses Tool kann Ihre gesamte Mediathek durchsuchen und alle Ihre vorhandenen Bilder komprimieren, was perfekt ist, um die Geschwindigkeit einer etablierten Website zu verbessern.

Zusätzliche Ressourcen zur Verbesserung der WordPress-Leistung

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihre Bilder in WordPress optimieren. Möglicherweise möchten Sie auch einige andere Artikel zur Verbesserung der WordPress-Leistung sehen:

• Der ultimative Leitfaden zur Steigerung von WordPress-Geschwindigkeit & Leistung
• So beschleunigen Sie die WooCommerce-Leistung
• So lagern Sie WordPress-Medien aus, um die Website-Geschwindigkeit zu verbessern
• Die besten WordPress-Caching-Plugins, um Ihre Website zu beschleunigen
• So optimieren Sie Core Web Vitals für WordPress (Ultimativer Leitfaden)
• So reduzieren Sie die Zeit bis zum ersten Byte (TTFB) in WordPress – Expertentipps
• So verwenden Sie das GTmetrix-Plugin zur Verbesserung der WordPress-Website-Leistung
• Schnellstes WordPress Hosting (Performance-Tests)
• Wichtige Metriken, die Sie auf Ihrer WordPress-Website messen sollten
• So führen Sie einen Website-Geschwindigkeitstest richtig durch
• So belasten Sie eine WordPress-Website

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.