Der ultimative Leitfaden zur Bildoptimierung für WordPress

1 … 2 … 3 … – Ihr potenzieller Kunde hat gerade Ihre Seite geschlossen, weil sie noch lädt. Klingt vertraut? Ich glaube, Sie waren viele Male dieser ungeduldige und frustrierte Besucher. Ich weiß, dass ich es war. Aus diesem Grund habe ich eine ultimative Liste mit Dingen zusammengestellt, die Sie über die Bildoptimierung wissen müssen. Es wird lang, aber ich hoffe, Sie finden es lesenswert.

Inhaltsverzeichnis

• Der Inhalt dieses Artikels in einem 3-minütigen Video
• Vorteile der Bildoptimierung
• Bildformate
• Ändern Sie die Größe von Bildern vor dem Hochladen
  • Imsanity WordPress Plugin zur automatischen Größenanpassung von Bildern
• Bilder komprimieren
  • Beste Online-Tools für die Bildkomprimierung
    • TinyPNG
    • Optimizilla
    • Kompressor
    • ImageOptim
    • ImageSmaller
    • Krake
    • JPEG.io
    • PageSpeed-Einblicke
    • Ergebnisse für das beste Online-Komprimierungstool
    • Bestes Online-Komprimierungstool für JPEGs
    • Bestes Online-Komprimierungstool für PNGs
    • Insgesamt das beste Online-Bildkomprimierungstool
  • Die besten WordPress-Plugins für die Bildkomprimierung
    • WP Smush (kostenlose Version)
    • Komprimieren Sie JPEG- und PNG-Bilder mit TinyPNG
    • ShortPixel
    • Stellen Sie sich vor
    • EWWW Image Optimizer (kostenlose Version)
    • Ergebnisse für das beste WordPress-Plugin zur Bildkomprimierung
    • Bestes WordPress-Plugin zum Komprimieren von JPEGs
    • Bestes WordPress-Plugin zum Komprimieren von PNGs
    • Insgesamt das beste WordPress-Plugin für die Bildkomprimierung
• Fazit

Der Inhalt dieses Artikels in einem 3-minütigen Video

Hier ist ein sehr kurzer Videoüberblick über diesen Artikel. Ich empfehle immer noch das Lesen, aber nur um Sie genug zu necken, los geht's:

Vorteile der Bildoptimierung

Sind Sie immer noch nicht von der ganzen Bildoptimierung überzeugt? Schauen wir uns alle Vorteile an, die Sie erhalten, wenn Sie nur dieses kleine und triviale Problem beheben:

• Ihre Website wird schneller
• Ihr Google PageSpeed-Score wird besser sein
• Google wird Sie mehr mögen und Ihre Suchmaschinen-Rankings werden sich verbessern
• Ihre Absprungrate wird geringer sein und mehr Besucher werden Ihre Seite sehen
• Sie benötigen weniger Speicherplatz auf Ihren Servern und geben weniger Ressourcen für Server aus, wodurch Sie Geld sparen
• Sie sparen Geld für mobile Datentarife für sich und Ihre Besucher

Ich habe jetzt deine Aufmerksamkeit, richtig? Jetzt können wir mit der eigentlichen Arbeit beginnen.

Bildformate

Die Bildoptimierung beginnt mit einigen Grundkenntnissen über Bildformate. Die beiden gängigsten Formate im Internet sind PNG mit der Endung .png und JPEG mit der Endung .jpg . Ich werde in den meisten Fällen JPEG verwenden, da es das beste Format für Fotos, Bilder mit Farbverläufen und Bilder mit Millionen von Farben ist. Auf der anderen Seite ist PNG besser mit begrenzten Farbbildern wie Logos und mit Bildern mit Transparenz.

Das nächste Beispiel zeigt Ihnen, wie wichtig die Wahl des richtigen Bildformats für die beste Bildoptimierung ist.

Ich werde unser nicht optimiertes child.jpg-Bild sowohl im .jpg- als auch im .png -Format speichern. Wir können sehen, dass das Bild child-saved-as-jpeg.jpg 3,1 MB groß ist und das Bild child-saved-as-png.png 4,5 MB groß ist. In diesem Fall wurde das PNG-Bild um 45 % größer als das JPEG-Bild, ein Unterschied, der sich einfach aus der Auswahl eines bestimmten Bildformats ergibt. Es gibt keinen einfacheren Weg, mit so wenig Aufwand so viel Platz zu sparen. Nun, vielleicht gibt es das. Werfen wir einen Blick auf den nächsten Schritt.

Ändern Sie die Größe von Bildern vor dem Hochladen

In unserem vorherigen Beispiel haben wir mit der Auswahl des richtigen Bildformats etwas Platz gespart, aber wir können noch mehr Platz sparen , wenn wir die Größe des Bilds vor dem Hochladen ändern. Aber wie stark sollten wir die Größe ändern? Es hängt wirklich von der Breite und dem Container Ihrer Website ab.

Auf unserer ProteusThemes-Site beträgt die maximale Breite für das Bild 1110 px, daher verkleinere ich das aktuelle Bild child.jpg , das 1800 px breit ist, auf 1110 px in der Breite. In diesem Fall sind wir lediglich von 3,1 MB auf 1,1 MB Größe gestiegen, was weitere 65 % eingesparten und reduzierten Speicherplatz bedeutet .

Hinweis: Sie können Bilder direkt in Ihrer WordPress-Medienbibliothek skalieren. Klicken Sie auf Medien -> Bild auswählen -> Bild bearbeiten und wählen Sie neue Abmessungen für Ihr Bild:

Imsanity WordPress Plugin zur automatischen Größenanpassung von Bildern

Wenn Sie nicht über die Größenänderung von Bildern nachdenken möchten oder wenn viele verschiedene Benutzer Bilder auf Ihre Website hochladen, sollte das Imsanity-Plugin perfekt für Sie funktionieren. In den Plugin-Einstellungen können Sie die maximale Breite oder Höhe der Bilder auswählen und das Plugin passt alle größeren Bilder auf diese Größe an. Sie können auch die Bulk-Resize-Funktion auswählen, um die Größe aller vorhandenen Bilder zu ändern. Ich empfehle dieses Plugin auf jeden Fall jedem, der Probleme damit hat, die Größe jedes Bildes einzeln zu ändern, bevor es hochgeladen wird. Sie können das Imsanity-Plugin kostenlos herunterladen.

Bilder komprimieren

Nachdem wir nun die Grundlagen der Bildoptimierung gelernt haben, wollen wir sehen, wie wir unser Spiel verbessern können. Wir finden zahlreiche Online-Tools zur Bildkomprimierung im Internet und sogar WordPress-Plugins , die die Größe Ihres Bildes reduzieren. Aber wir müssen hier vorsichtig sein, einige der Tools werden fast keinen Unterschied machen und einige der Einstellungen werden unser Bild zerstören und unbrauchbar machen. Wie findet man also die perfekte Balance? Keine Sorge, zum Zeitpunkt des Schreibens (Juni 2017, aktualisiert 2018) haben wir alle beliebtesten Online-Tools/-Dienste und WordPress-Plugins zur Bildoptimierung getestet und eine Auswahl der besten getroffen.

Wir haben 3 verschiedene JPEG-Bilder und 1 PNG-Bild verwendet, um unseren Test durchzuführen.

Alle 3 JPEG-Bilder stammen von Unsplash, von den Autoren Mi Pham, Breather, Denise Chan und Niko Virtanen. Sie wurden zu Testzwecken beschnitten und auf 1110 x 624 px verkleinert.

Für das PNG-Bild haben wir unser eigenes Bild mit dem ProteusThemes-Logo und einem Muster dahinter erstellt. Genau wie JPEG-Testbilder wird auch dieses auf 1110 x 624 px skaliert.

Wir werden nun alle Bilder durch alle ausgewählten Tools und Plugins zur Komprimierung schicken und herausfinden, welches für Sie am besten geeignet ist. Beginnen wir mit Online-Tools.

Beste Online-Tools für die Bildkomprimierung

Zum Zeitpunkt der Erstellung dieses Artikels (Juni 2017, aktualisiert 2018) finden Sie hier eine vollständige Liste der beliebtesten Online-Tools und -Dienste für die Bildkomprimierung:

• TinyPNG
• Optimizilla
• Kompressor
• ImageOptim
• ImageSmaller
• Krake
• JPEG.io
• PageSpeed-Einblicke

Wenn Sie der Meinung sind, dass ein anderes Tool es verdient, auf dieser Liste zu stehen, lassen Sie es uns wissen, wir werden es testen und der Liste hinzufügen. Nachfolgend finden Sie meine Rezensionen zu jedem Tool sowie meine Einschätzung der besten. Wenn Sie nicht jedes einzelne Tool lesen möchten, klicken Sie hier – Zeig mir die Gewinner!

TinyPNG

TinyPNG war eines der ersten Bildkomprimierungswerkzeuge, das ich verwendet habe, und ich verwende es manchmal immer noch. Es gibt keine Optionen, Sie laden einfach die Bilder hoch und erhalten sie komprimiert. Mit diesem Online-Tool können Sie bis zu 20 Bilder mit einer Größe von 5 MB in großen Mengen hochladen.

Optimizilla

Optimizilla ist ein weiteres einfaches, aber leistungsstarkes Online-Tool. Die Nutzung ist kostenlos und es besteht die Möglichkeit, bis zu 20 Bilder in großen Mengen hochzuladen. Für das beste Komprimierungs-/Qualitätsverhältnis belassen wir die Qualitätseinstellung bei 90, wie es standardmäßig der Fall ist. Wenn Sie die Komprimierung noch weiter vorantreiben möchten, ändern Sie einfach diese Einstellung und Sie werden sofort Änderungen in der Qualität sehen.

Kompressor

Compressor hat das Potenzial, eines der besten Tools für die Bildkomprimierung zu werden, aber es hat einen großen Fehler. Es gibt derzeit keine Option für den Massen-Upload, was bedeutet, dass Sie jeweils nur 1 Bild komprimieren können. Abgesehen davon ist es kostenlos, einfach zu bedienen und mit zwei Komprimierungsoptionen. Wir verwenden in unserem Test die verlustbehaftete Option, da die Bildqualität nach der Komprimierung immer noch gleich bleibt.

ImageOptim

ImageOptim ist ein Tool mit vielen Einstellungen. Sie können zwischen 3 verschiedenen Qualitätsoptionen und 3 verschiedenen Farbqualitätsoptionen wählen. Wir haben herausgefunden, dass die besten Komprimierungs-/Qualitätsergebnisse mit den Standardeinstellungen erzielt werden. Stellen Sie die Qualität auf Mittel und die Farbqualität auf Auto ein. Was mich am ImageOptim am meisten gestört hat, neben dem etwas veralteten Design, war, dass es JPEGs exportiert, selbst wenn ich PNGs hochlade . Ich habe Kornel (Ersteller von ImageOptim) eine E-Mail zu diesem Problem geschickt und er hat es bereits behoben.

ImageSmaller

Genau wie bei Compressor hat ImageSmaller den gleichen Fehler. Es gibt keine Option für den Massen-Upload. Es hat jedoch mit 50 MB eines der größten Upload-Limits. Wenn Sie größere Dateien zu optimieren haben, könnte ImageSmaller das richtige Tool für Sie sein.

Krake

Kraken ist ein erstklassiges Bildkomprimierungstool mit dem besten Dashboard unter allen Tools, die ich getestet habe. Sie finden eine schöne Weboberfläche zum Hochladen Ihrer Bilder und viele verschiedene Einstellungen für die besten Ergebnisse. Wir haben in unserem Test ihre standardmäßigen verlustbehafteten Einstellungen verwendet.

JPEG.io

JPEG.io ist eine kostenlose Version des gleichen Tools wie Kraken . Es hat die gleichen Komprimierungsfunktionen, aber wie die URL der Website uns sagt, ist es nur für JPEGs.

PageSpeed-Einblicke

Sie haben nicht erwartet, diesen hier zu sehen, oder? PageSpeed ​​Insights gibt uns auch eine ZIP-Datei mit komprimierten Dateien, wenn wir unsere Website testen. Dies ist nicht der benutzerfreundlichste Weg, da Sie Ihre Website bereits mit allen Bildern online haben und sie dann durch die neuen komprimierten ersetzen müssen, aber Sie erhalten Bilder, die so komprimiert sind, wie Google sie möchte.

Ergebnisse für das beste Online-Komprimierungstool

Nachfolgend finden Sie Diagramme mit den Ergebnissen all unserer Tests. Weitere Informationen finden Sie auch in unserer detaillierten Tabelle.

Bestes Online-Komprimierungstool für JPEGs

Die meisten Tools haben unsere Test-JPEGs um etwa 80 % komprimiert. Werfen wir einen Blick auf unser child.jpg -Bild. Wir begannen mit einem Bild mit einer Größe von 3,1 MB und nach der Größenanpassung und Komprimierung war unser Bild nur noch 165 KB groß, was 95 % kleiner ist . Nun, das ist ein Unterschied! Wir haben mit Compressor und ImageOptim die gleichen Ergebnisse erzielt. Es sieht also so aus, als hätten wir hier zwei Gewinner.

Bestes Online-Komprimierungstool für PNGs

Für unseren PNG-Test haben wir mit allen Tools eine durchschnittlich 50% reduzierte Größe erhalten. Optimizilla war jedoch etwas besser als die anderen, mit einer um 56 % reduzierten Größe unseres pt-logo.png- Bildes.

Insgesamt das beste Online-Bildkomprimierungstool

Selbst wenn Optimizilla nicht das beste Komprimierungstool für JPEGs gewesen wäre, hätte ich es als das beste derzeit online verfügbare Komprimierungstool empfohlen. JPEGs, die mit 79 % komprimiert sind, sind immer noch großartig und Sie können das mit einer einfachen Qualitätseinstellung auf der Seite noch weiter steigern. Es hat auch eine Option für den Massen-Upload, bei dem Compressor fehlt, und einen zuverlässigeren Upload als ImageOptim , bei dem alle Bilder als JPEGs exportiert werden, auch wenn PNGs darunter sind. Aufgrund all dieser Dinge denke ich, dass Optimizilla den Titel des besten Online-Bildkomprimierungstools verdient.

Als nächstes wollen wir sehen, ob WordPress-Plugins Online-Bildkomprimierungstools schlagen können.

Die besten WordPress-Plugins für die Bildkomprimierung

Was ist der Unterschied zwischen Online-Bildtools und WordPress-Plugins? Nun, wenn Sie Online-Bildtools für die Bildkomprimierung verwenden, müssen Sie diese Bilder trotzdem auf Ihre WordPress-Site hochladen und sie dann verwenden. Wenn Sie es vorziehen, alles an einem Ort zu haben, dann könnte das WordPress-Plugin für die Bildkomprimierung der richtige Weg sein. Die meisten Plugins haben auch eine Option zum Optimieren von Bildern beim Hochladen, sodass Sie diese Einstellung aktivieren und jegliche zusätzliche Arbeit vergessen können.

Ich habe für jedes Plugin eine neue WordPress-Seite erstellt und jedes Mal die gleichen 4 Bilder hochgeladen. Verschiedene Plugins haben unterschiedliche Einstellungen, daher suchte ich nach der perfekten Balance zwischen Komprimierung und Bildqualität.

Folgende Plugins habe ich getestet:

• WP Smush (kostenlose Version)
• Komprimieren Sie JPEG- und PNG-Bilder mit TinyPNG
• ShortPixel
• Stellen Sie sich vor
• EWWW Image Optimizer (kostenlose Version)

Wie ich bereits erwähnt habe, wenn Sie ein anderes Plugin kennen, das wir testen sollten, lassen Sie es uns wissen und wir werden es der Liste hinzufügen. Wenn Sie nicht mehr über diese Plugins erfahren möchten, klicken Sie hier – Zeig mir die Gewinner!

WP Smush (kostenlose Version)

WP Smush ist eines der ältesten mir bekannten Plugins zur Bildkomprimierung. Es hat einen netten Vorteil gegenüber allen anderen Plugins, da keine Registrierung erforderlich ist, um eine kostenlose Version zu verwenden. Es hat auch eine Option zum automatischen Komprimieren neu hochgeladener Bilder. Sobald das Plugin also eingestellt ist, können Sie es vergessen und es erledigt die ganze Arbeit für Sie im Hintergrund. Leider waren die Komprimierungsergebnisse in der kostenlosen Version eines der schlechtesten, daher würde ich die Verwendung nicht empfehlen. Sie haben auf ihrer Seite angegeben, dass die Pro-Version viel besser komprimiert, also werde ich diese auch in der nächsten Aktualisierung des Artikels testen.

Komprimieren Sie JPEG- und PNG-Bilder mit TinyPNG

Genau wie das Online-Komprimierungstool TinyPNG ist auch das WordPress-Plugin sehr einfach. Sobald Sie die Registrierung durchlaufen haben, hat sie minimale Einstellungen und funktioniert im Grunde sofort. Alle neu hochgeladenen Bilder können auch automatisch komprimiert werden, sodass Sie das Plugin aktivieren und es vergessen können.

ShortPixel

ShortPixel war persönlich eine der größten Überraschungen. Ich habe vor meiner Recherche noch nie davon gehört und war wirklich beeindruckt. Mit den standardmäßig empfohlenen verlustbehafteten Einstellungen hat es die besten Komprimierungsergebnisse zwischen WordPress-Plugins und es hat auch eine glänzende Option. Diese Option ist für Fotografen oder andere Profis gedacht, die Bilder in sehr hoher Qualität benötigen und keine Kompromisse bei der Qualität eingehen können.

Stellen Sie sich vor

Imagify ist ein Plugin, das von berühmten WP Rocket -Plugin-Autoren erstellt wurde. Nach der Registrierung erhalten Sie einige übersichtliche Optionen zur Auswahl. Wählen Sie für die beste Komprimierung und Bildqualität den aggressiven Modus. Eine nette Sache in den Einstellungen ist auch die Option, einen separaten Ordner für Originalbilder zu haben, falls bei der Komprimierung etwas schief gelaufen ist. Das einzige, was ich nicht ganz verstanden habe, ist, warum wir in Medien zur Listenansicht wechseln müssen, um die Komprimierungsergebnisse zu sehen. Abgesehen davon ist Imagify ein wirklich nettes und solides Plugin.

EWWW Image Optimizer (kostenlose Version)

EWWW Image Optimizer war das einzige Plugin, das mir einige Fehler gab. Zuerst habe ich es auf meinem eigenen Hosting ausprobiert und eine Fehlermeldung erhalten, dass der EWWW Image Optimizer exec() oder einen API-Schlüssel benötigt. Als ich das nächste Mal das Plugin auf meiner lokalen WordPress-Entwicklungsseite ausprobierte, erhielt ich eine Fehlermeldung, dass mir pngout fehlt. Ich folgte der Anleitung zur Installation und das Plugin war endlich bereit zum Testen. Da ich die kostenlose Version getestet habe, gab es nur eine verlustfreie Option, die nicht zu den besten Ergebnissen führte. Genau wie beim WP Smush werde ich auch die EWWW Image Optimizer Pro-Version im nächsten Artikel-Update testen und sehen, ob sie besser abschneidet.

Ergebnisse für das beste WordPress-Plugin zur Bildkomprimierung

Wie zuvor finden Sie unten Grafiken mit den Ergebnissen all unserer Tests. Weitere Informationen finden Sie auch in unserer detaillierten Tabelle.

Bestes WordPress-Plugin zum Komprimieren von JPEGs

ShortPixel war der Gewinner mit einer durchschnittlichen Komprimierung von 84 % . Dasselbe wie Compressor und ImageOptim in der Kategorie für das beste Online-Komprimierungstool. Das zweitbeste Plugin war Imagify mit einer durchschnittlichen Komprimierung von 70 % . Ich erkläre, dass ShortPixel derzeit der absolute Gewinner dieser Kategorie ist.

Bestes WordPress-Plugin zum Komprimieren von PNGs

Das beste Plugin für die PNG-Komprimierung heißt Compress JPEG & PNG images von TinyPNG mit einer Komprimierung von 56 % . Interessanterweise ist das beste Ergebnis wieder dasselbe wie in der Kategorie für das beste Online-Komprimierungstool. Andere Plugins waren hier jedoch mit einer Komprimierung von etwa 50% etwas konkurrenzfähiger.

Insgesamt das beste WordPress-Plugin für die Bildkomprimierung

Meiner Meinung nach war das beste Verhältnis zwischen Benutzererfahrung, verschiedenen Einstellungen und Komprimierung das ShortPixel- Plugin. Insgesamt ist es ein sehr solides Plugin mit vielen Optionen, aber auch mit bereits großartigen Standardeinstellungen. Sie können das Plugin sofort nach der Registrierung verwenden und vor allem ist die Komprimierung großartig. Im Moment würde ich für meine eigene Website zum ShortPixel- Plugin greifen, vor allem, wenn die meisten Bilder JPEGs sind.

Fazit

Das war eine lange Reise, oder? Inzwischen haben wir es geschafft, unser child.jpg -Bild um bis zu 95 % zu komprimieren. Ihre Website kann viel schneller funktionieren, wenn Sie nur diese 3 einfachen Schritte befolgen. Wiederholen wir sie noch einmal:

• Wählen Sie das richtige Bildformat
• Ändern Sie die Bildgröße vor dem Hochladen
• Bild mit den Online-Tools oder WordPress-Plugins komprimieren

Eine weitere wichtige Sache ist, dass Sie nur ein Tool oder WordPress-Plugin für jedes Bild verwenden, da die meisten von ihnen eine Art verlustbehaftete Komprimierung haben, was bedeutet, dass die Qualität Ihres Bildes mit jeder zusätzlichen Komprimierung schlechter werden könnte, und das ist etwas, was wir tun nicht wollen. Wir haben auch alle Testbilder auf GitHub hinzugefügt, wenn Sie einen Qualitätsvergleich zwischen ihnen überprüfen oder einige andere Tools und Plugins selbst testen möchten.

Sie sollten keine Ausreden mehr haben, Ihre Bilder nicht zu komprimieren. Es gibt viele Tools und verschiedene Möglichkeiten, dies zu tun, und wir haben bewiesen, dass es sich am Ende lohnt. Wählen Sie Ihren persönlichen Gewinner für Online-Komprimierung oder WordPress-Plugin und überprüfen Sie den Google PageSpeed-Score Ihrer Website vor und nach der Optimierung. Teilen Sie die Informationen über die Geschwindigkeit Ihrer Website und die Verbesserung der Punktzahl in unserem Kommentarbereich. Außerdem würde ich gerne wissen, ob dir dieser Artikel bei der Bildoptimierung geholfen hat und was du davon hältst.