Wie man Bilder für die Web-Performance 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 bewährte Verfahren zur Bildoptimierung als Teil Ihrer regelmäßigen Blogging-Routine verwenden. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Bilder für eine schnellere Web-Performance optimieren können, ohne an Qualität zu verlieren. Außerdem stellen wir Ihnen automatische Bildoptimierungs-Plugins für WordPress vor, die Ihnen das Leben leicht machen können.
Da dies ein umfassender Leitfaden zur Bildoptimierung für das Web ist, haben wir ein einfach zu befolgendes Inhaltsverzeichnis erstellt:
Was ist Bildoptimierung?
(Optimierte vs.nicht optimierte Bilder)
Bei der Bildoptimierung geht es darum, Bilder in der kleinstmöglichen Dateigröße zu speichern und auszuliefern, ohne die Gesamtbildqualität zu verringern.
Während der Prozess komplex klingt, ist er heutzutage eigentlich recht einfach. Sie können eines der vielen Bildoptimierungs-Plugins und -Tools verwenden, um Bilder automatisch um bis zu 80 % zu komprimieren, ohne sichtbare Einbußen bei der Bildqualität.
Hier ist ein Beispiel für ein optimiertes gegenüber einem nicht optimierten Bild: 
Wie Sie sehen können, kann dasselbe Bild bei richtiger Optimierung ohne Qualitätsverlust 75 % kleiner als das Original sein. Wie funktioniert die Bildoptimierung? Vereinfacht ausgedrückt, funktioniert die Bildoptimierung durch die Verwendung von Komprimierungstechnologien wie "Lossy" und "Lossless", die dabei helfen, die gesamte Dateigröße ohne spürbaren Qualitätsverlust zu reduzieren. Was bedeutet es, Bilder zu optimieren? Wenn Sie jemals von Ihrem WordPress-Hosting-Support oder von einem Geschwindigkeitstest-Tool die Empfehlung erhalten haben, Bilder zu optimieren, dann bedeutet das nur, dass Sie die Dateigröße Ihrer Bilder reduzieren müssen, indem Sie sie für das Web optimieren.
Warum ist Bildoptimierung wichtig?
Was sind die Vorteile der Bildoptimierung?
Es gibt zwar viele Vorteile der Optimierung Ihrer Bilder, aber hier sind die wichtigsten, die Sie kennen sollten:
- Schnellere Website-Geschwindigkeit
- Verbesserte SEO-Rankings
- Höhere Gesamtkonversionsrate für Verkäufe und Leads
- Weniger Speicherplatz und Bandbreite (was die Hosting- und CDN-Kosten reduzieren kann)
- Schnellere Website-Backups (reduziert auch die Kosten für Backup-Speicher)
Abgesehen von Videos sind Bilder das zweitwichtigste Element auf einer Webseite. Laut HTTP-Archiv machen Bilder im Durchschnitt 21 % des Gesamtgewichts einer Webseite aus
Da wir wissen, dass schnelle Websites in Suchmaschinen besser ranken (SEO) und bessere Konversionen haben, ist die Bildoptimierung etwas, das jede Unternehmenswebsite tun muss, wenn sie online erfolgreich sein will. Jetzt fragen Sie sich vielleicht, wie groß der Unterschied ist, den eine Bildoptimierung wirklich machen kann? Laut einer Studie von Strangeloop kann eine Verzögerung von einer Sekunde bei der Ladezeit einer Website Sie 7 % des Umsatzes, 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 auch schnell ladende Websites bei der SEO bevorzugt behandeln.
Das bedeutet, dass Sie durch die Optimierung Ihrer Bilder für das Web sowohl die Geschwindigkeit Ihrer Website verbessern als auch das SEO-Ranking von WordPress steigern können.
Wie speichert und optimiert man Bilder für die Web-Performance?
Der Schlüssel zur erfolgreichen Bildoptimierung für die Web-Performance liegt darin, die perfekte Balance zwischen niedrigster Dateigröße und akzeptabler 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 = kleinere Dateigröße)
- Bildabmessungen (Höhe und Breite) Durch die Wahl der richtigen Kombination der drei Faktoren können Sie die Bildgröße um bis zu 80 % reduzieren
Schauen wir uns jeden dieser Punkte genauer an.
1.Bilddateiformat
Für die meisten Website-Betreiber 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. Um die Dinge einfach zu halten, sollten Sie JPEGs für Fotos oder Bilder mit vielen Farben verwenden, PNGs für einfache Bilder oder wenn Sie transparente Bilder benötigen, und GIFs nur für animierte Bilder. Für diejenigen, die den Unterschied zwischen den einzelnen Dateitypen nicht kennen, sei gesagt, dass das PNG-Bildformat unkomprimiert ist, was bedeutet, dass es eine höhere Bildqualität aufweist.
Der Nachteil ist, dass die Dateigrößen viel größer sind. Auf der anderen Seite ist JPEG ein komprimiertes Dateiformat, das die Bildqualität leicht reduziert, um eine deutlich geringere Dateigröße zu erreichen. GIF hingegen verwendet nur 256 Farben zusammen mit einer verlustfreien Komprimierung, was es zur besten Wahl für animierte Bilder macht.
Auf wordpressmonster verwenden wir alle drei Bildformate, je nach Art des Bildes.
2.Komprimierung
Der nächste Punkt ist die Bildkompression, die eine große Rolle bei der Bildoptimierung spielt
Es gibt verschiedene Arten und Stufen der Bildkompression. Die Einstellungen dafür variieren je nach verwendetem 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 Webtool wie TinyPNG oder JPEG Mini für eine einfachere Bildkomprimierung verwenden. Obwohl es ein bisschen manuell ist, erlauben Ihnen diese beiden Methoden, Bilder zu komprimieren, bevor Sie sie in WordPress hochladen, und das ist, was wir auf wordpressmonster tun. Es gibt auch mehrere beliebte WordPress-Plugins wie Optimole, EWWW Image Optimizer und andere, die Bilder automatisch komprimieren können, wenn Sie sie zum ersten Mal hochladen.
Viele Anfänger und sogar große Unternehmen ziehen es vor, diese Plugins zur Bildoptimierung zu verwenden, weil es einfach und bequem ist. Wir werden später in diesem Artikel mehr über diese WordPress-Plugins erzählen.
3.Bild-Dimensionen
Wenn Sie ein Foto von Ihrem Telefon oder einer Digitalkamera importieren, hat es in der Regel eine sehr hohe Auflösung und große Dateigrößen (Höhe und Breite)
Typischerweise haben diese Fotos eine Auflösung von 300 DPI und Abmessungen ab 2000 Pixel und mehr. Diese hochwertigen Fotos sind gut für den Druck oder das Desktop-Publishing geeignet. Für Websites sind sie nicht geeignet.
Eine Reduzierung der Dateigröße auf ein vernünftiges Maß kann die Größe der Bilddatei erheblich verringern. Sie können die Größe von Bildern einfach mit einer Bildbearbeitungssoftware auf Ihrem Computer ändern. Wir haben zum Beispiel ein Foto mit 1,8 MB Originaldateigröße, 300 DPI Auflösung und Bildabmessungen von 4900×3200 Pixel optimiert.
Wir wählten das jpeg-Format für eine höhere Komprimierung und änderten die Abmessungen auf 1200×795 Pixel, wodurch die Größe der Bilddatei auf 103 KB reduziert wurde. Das sind 94 % weniger als die ursprüngliche Dateigröße. Nun, da Sie die drei wichtigen Faktoren bei der Bildoptimierung kennen, lassen Sie uns einen Blick auf verschiedene Bildoptimierungstools für Website-Betreiber werfen.
Die besten Bildoptimierungs-Tools und -Programme
Wie bereits erwähnt, verfügen die meisten Bildbearbeitungsprogramme über Einstellungen zur Bildoptimierung und -komprimierung.
Außerhalb der Bildbearbeitungssoftware gibt es auch einige leistungsstarke kostenlose Bildoptimierungstools, die Sie verwenden können, um Bilder für das Web zu optimieren (mit nur wenigen Klicks). Wir empfehlen, diese Tools zu verwenden, um Bilder zu optimieren, bevor Sie sie in WordPress hochladen, besonders 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 Premium-Software, die über eine Funktion zum Speichern von für das Web optimierten Bildern verfügt.
Öffnen Sie einfach Ihr Bild und klicken Sie auf die Option "Datei " Für Web speichern". Daraufhin öffnet sich ein neues Dialogfeld. Auf der rechten Seite können Sie verschiedene Bildformate einstellen.
Für das JPEG-Format sehen Sie verschiedene Qualitätsoptionen. Wenn Sie Ihre Optionen ausgewählt haben, wird Ihnen unten links auch die Dateigröße angezeigt.
GIMP
GIMP ist eine kostenlose und quelloffene Alternative zum beliebten 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 in dieser Liste. Zunächst müssen Sie Ihr Bild in GIMP öffnen und dann die Option Datei " Exportieren als wählen
Daraufhin wird das Dialogfeld "Datei speichern" angezeigt. Geben Sie Ihrer Datei einen neuen Namen und klicken Sie dann auf die Schaltfläche "Exportieren".
Daraufhin werden die Bildexportoptionen angezeigt. Bei jpeg-Dateien können Sie die Komprimierungsstufe wählen, um die Dateigröße zu reduzieren. Klicken Sie schließlich auf die Schaltfläche "Export", 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-Dateien zu reduzieren.
Alles, was Sie tun müssen, ist auf deren Website zu gehen und Ihre Bilder hochzuladen (einfaches Drag & Drop).
Das Programm komprimiert das Bild und gibt Ihnen einen Download-Link.
Sie können ihre Schwester-Website, TinyJPG, für JPEG-Bildkomprimierung verwenden. Sie haben auch eine Erweiterung für Adobe Photoshop, die wir als Teil unseres Bildbearbeitungsprozesses verwenden, weil sie das Beste von TinyPNG und TinyJPG in Photoshop kombiniert. Für Entwickler haben sie eine API, um Bilder automatisch zu konvertieren, und für Anfänger haben sie ein WordPress-Plugin, das dies automatisch für Sie tun kann (mehr dazu später).
JPEG Mini
JPEGmini verwendet eine verlustfreie Komprimierungstechnologie, die die Größe von Bildern deutlich reduziert, ohne deren Wahrnehmungsqualität zu beeinträchtigen.
Sie können auch die Qualität Ihres Originalbildes und des komprimierten Bildes vergleichen.
Sie können die Web-Version 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 Kompressionsparameter finden und unnötige Farbprofile entfernen. 
Die 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, dann können Sie ein WordPress-Plugin zur Bildkomprimierung ausprobieren.
Abschließende Überlegungen und Best Practices für die Bildoptimierung
Wenn Sie keine für das Web optimierten Bilder speichern, dann sollten Sie jetzt damit anfangen.
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 gut für die
Suchmaschinenoptimierung (SEO) sind, und Sie werden wahrscheinlich einen Anstieg in Ihren Suchmaschinen-Rankings sehen. 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 ein verwaltetes WordPress-Hosting-Unternehmen verwenden, da diese oft sowohl Caching als auch CDN als Teil der Plattform anbieten. Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie Ihre Bilder in WordPress optimieren können.