Wie man Bilder für das Web 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?

Wenn sie einen neuen Blog starten, laden viele Anfänger 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 optimieren können, ohne dabei an Qualität zu verlieren. Wir stellen Ihnen auch 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.

Das klingt zwar kompliziert, ist aber heutzutage ganz einfach: Sie können eines der zahlreichen Plugins und Tools zur Bildoptimierung 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 das gleiche Bild bei richtiger Optimierung bis zu 80 % kleiner sein als das Original, ohne dass es zu Qualitätsverlusten 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 der verlustbehafteten Komprimierung kann es zu einem geringfügigen Qualitätsverlust kommen, der aber im Idealfall für Ihre Besucher nicht spürbar 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 Schritt für Schritt, wie Sie das 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, so das HTTP-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 diese Gründe nicht ausreichen, 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

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. das 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 verwenden wir alle drei Bildformate, je nach Art des Bildes.

2. die Kompression

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

Es gibt verschiedene Arten und Stufen der Bildkomprimierung, deren Einstellungen von Ihrem Bildkomprimierungsprogramm abhängen.

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 vor dem Hochladen in WordPress, und das ist es, was wir auf .

Es gibt auch einige beliebte WordPress-Plugins wie Optimole und EWWW Image Optimizer, die Bilder beim ersten Hochladen automatisch komprimieren können. 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. die Bildabmessungen

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 eine Größe von 2000 Pixeln und mehr. Während sich qualitativ hochwertige Fotos gut für den Druck oder das Desktop-Publishing eignen, sind sie aufgrund ihrer großen Größe für Websites ungeeignet.

Durch Verkleinern der Bildgröße auf ein vernünftiges Maß können Sie die Dateigröße erheblich reduzieren. Sie können die Größe der Bilder 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, dessen ursprüngliche Dateigröße 1,8 MB betrug.

Wir haben das JPEG-Format für eine stärkere Komprimierung gewählt und die Abmessungen auf 1200×795 Pixel geändert. 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 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 Open-Source-Alternative zu Adobe Photoshop, mit der Sie Ihre Bilder für das Web optimieren können. Der Nachteil ist, dass es nicht so einfach zu bedienen ist wie einige andere Lösungen in dieser Liste.

Zuerst müssen Sie Ihr Bild in GIMP öffnen und dann die Option Datei " Exportieren als... Daraufhin wird das Dialogfeld "Bild exportieren" angezeigt, in dem Sie Ihrer Datei einen neuen Namen geben können. Klicken Sie anschließend auf die Schaltfläche "Exportieren".

Für 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. Sie müssen nur auf die Website gehen und Ihre Bilder per Drag & Drop hochladen.

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, mit der Bilder automatisch konvertiert werden können, und für Anfänger gibt es ein WordPress-Plugin, das diese Aufgabe für Sie übernimmt. Wir werden später noch näher darauf eingehen.

JPEGmini

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

Sie können die Webversion kostenlos nutzen oder das Programm für Ihren Computer kaufen. Es gibt 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.

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, können Sie ein WordPress-Plugin für die Bildkomprimierung verwenden.

Hier ist unsere Liste der besten WordPress Plugins zur Bildkomprimierung:

1. Optimole, ein beliebtes Plugin vom Team 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

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 jetzt damit beginnen, denn das wird einen großen Unterschied in der Geschwindigkeit Ihrer Website ausmachen, 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 erheblich 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.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihre Bilder in WordPress optimieren können. Vielleicht interessiert Sie auch unser Leitfaden zur Verbesserung der WordPress-Sicherheit oder unsere Expertenauswahl der besten WordPress-Plugins für Unternehmenswebsites.

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.