Laut dem HTTP-Archiv machen Bilder im Dezember 2018 sowohl auf Desktop- als auch auf Mobilgeräten über 40% des durchschnittlichen Seitengewichts einer Webseite aus. Das ist enorm! 😮 Wenn es um den neuen Mobile-First-Index und die Performance geht, spielt die Bildoptimierung eine entscheidende Rolle dafür, wie schnell die Webseite von WordPress geladen werden kann. Die Bildkomprimierung ist eine der einfachsten Optimierungen, die man implementieren kann und die wiederum die größte Wirkung haben wird. Im Wesentlichen bedeutet dies, dass die Dateigröße deiner Bilder durch zwei beliebte Komprimierungsformen verringert wird: verlustbehaftet und verlustfrei.

Heute werden wir uns mit diesen beiden Arten der Bildkomprimierung befassen und diskutieren, welche wir empfehlen. Dies kann je nach Art des Unternehmens, das du betreibst, variieren.

Verlustbehaftete Kompression

Die erste Form der Kompression ist verlustbehaftet. Bei der verlustbehafteten Komprimierung werden einige der Daten in einem Bild eliminiert. Das bedeutet, dass es zu einer Verschlechterung kommen kann (Qualitätsminderung oder was manche als pixelig bezeichnen). Du musst also vorsichtig sein, um wie viel du dein Bild reduzierst. Nicht nur wegen der Qualität, sondern auch, weil man den Prozess nicht umkehren kann. Natürlich besteht einer der großen Vorteile der verlustbehafteten Komprimierung und der Grund dafür, dass es sich um eine der beliebtesten Komprimierungsmethoden handelt, darin, dass man die Dateigröße um einen sehr großen Betrag reduzieren kann.

(Empfohlene Lektüre: JPG vs. JPEG: Das gebräuchlichste Bilddateiformat verstehen)

WordPress komprimiert Bilder automatisch

Wusstest du, dass WordPress deine JPEGs automatisch komprimiert, wenn du sie in die Medienbibliothek hochlädst? Standardmäßig komprimiert WordPress Bilder automatisch bis zu 90% ihrer Originalgröße. Ab WordPress 4.5 wurde diese jedoch auf 82% reduziert, um die Leistung in allen Bereichen weiter zu erhöhen. Wenn du dich fragst, warum deine Bilder auf einer neuen WordPress-Installation ein wenig pixelig aussehen, dann ist das der Grund.

Obwohl die automatische Komprimierung großartig ist, haben wir im Allgemeinen gesehen, dass 82% bei weitem nicht ausreichen, um die Leistung der Webseite wirklich zu beeinflussen. Daher kannst du diese Option deaktivieren, wenn du möchtest, indem du den folgenden Filter in die Datei functions.php deines Themes einbaust. Denke daran, dass du immer zuerst ein Backup erstellen solltest, bevor du deine Webseite bearbeitest.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Wenn du die automatische Komprimierungsrate von WordPress erhöhen möchtest, kannst du den Filter hinzufügen und den Prozentsatz der Originaldatei reduzieren, wie z.B. 70% im Beispiel unten.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Denke daran, dass dies keine Auswirkungen auf bereits hochgeladene Bilder hat. Du müsstest ein Plugin wie z.B. „Thumbnails neu generieren“ verwenden, um es auf deine bestehende Medienbibliothek anzuwenden. Oder noch besser, wir empfehlen einfach, dein Theme in Ruhe zu lassen und einfach ein Bildoptimierungs-WordPress-Plugin zu verwenden (auf das wir weiter unten eingehen werden) oder deine Bilder vor dem Hochladen weiter zu komprimieren.

Bilder mit Save for Web komprimieren (Software)

Du kannst Tools wie Adobe Photoshop, Affinity Photo, Affinity Designer oder andere Bildbearbeitungsprogramme verwenden, um die Qualitätseinstellungen eines Bildes anzupassen (siehe unten). Bei den meisten Tools findest du diese unter „Im Web speichern“ oder „Einstellungen exportieren“.

Qualität des Fotos ändern

Qualität des Fotos ändern

Wenn wir einen kleinen Vergleich der verlustbehafteten Kompressionsraten machen, können wir sehen, dass 50 % großartig aussehen. 33% beginnen bei einigen Hintergrunddetails ein wenig verschwommen zu werden (wird aber ziemlich unbemerkt bleiben), und 5% sind offensichtlich nicht akzeptabel. Dies ist nur ein Beispiel dafür, warum die automatischen 82% in WordPress nicht ausreichen. Du kannst und solltest mit viel höheren Raten komprimieren, um die Dateigrößen weiter zu verringern.

Vergleich verlustbehafteter Kompression

Vergleich verlustbehafteter Kompression

Nehmen wir an, du entscheidest dich für die 50% komprimierte Variante. Die Dateigröße beträgt 227 KB, was definitiv viel kleiner als die ursprüngliche 2+ MB-Datei ist. Es ist jedoch immer noch nicht gut, wenn dies nur eines von 15+ anderen Bildern auf einer Seite ist. Im Allgemeinen ist es am besten, alle Bilder unter 100 KB zu halten, wenn möglich. In meinen Fällen solltest du in der Lage sein, viel kleiner zu gehen. Hier ist es also auch wichtig, die Größe deiner Bilder zu ändern. Das 50%ige Bild, das zuerst auf 1251 px mit 916 px verkleinert wird, ist nur 95 KB.

Aber denke daran, dass du deine Bilder vielleicht nicht ganz so klein machen willst, denn seit WordPress 4.4 gibt es jetzt Support für responsive Bilder (nicht durch CSS verkleinert). WordPress erstellt automatisch mehrere Größen von jedem Bild, das in die Medienbibliothek hochgeladen wird. Indem die verfügbaren Größen eines Bildes in ein srcset-Attribut aufgenommen werden, können die Browser nun die am besten geeignete Größe herunterladen und die anderen ignorieren. Sieh dir unten ein Beispiel, wie dein Code tatsächlich aussieht.

Beispiel für srcset-reaktive Bilder im Code

Beispiel für srcset-reaktive Bilder im Code

Mit immer mehr HiDPI-Displays heutzutage kann es also gut sein, einen goldenen Mittelweg zu finden. Sagen wir, 2x oder 3x die Spalten- oder Div-Größe deiner Webseite, aber immer noch weniger als die Originalgröße. Der Browser zeigt die richtige Größe je nach der Auflösung des Geräts an.

Google empfiehlt verlustbehaftete Komprimierung

Benutzt du Google PageSpeed Insights? Wenn ja, kennst du wahrscheinlich den Warnhinweis „Bilder optimieren“. Im Jahr 2017 aktualisierte Google seine Dokumentation und empfiehlt nun die verlustbehaftete Komprimierung, um deine Webseite weiter zu beschleunigen.

Google PageSpeed Insights optimieren Bilder Warnung

Google PageSpeed Insights optimieren Bilder Warnung

Wenn du diese Warnungen entfernen möchtest, ist eine der einfachsten Möglichkeiten, verlustbehaftete Komprimierung zu verwenden, um Google zu beschwichtigen.

Verlustfreie Kompression

Jetzt ist es an der Zeit, in die zweite Form der Kompression einzutauchen, die verlustfrei ist. Die verlustfreie Komprimierung verringert im Gegensatz zur verlustbehafteten nicht die Qualität des Bildes. Wie ist das möglich? Normalerweise wird dies durch das Entfernen unnötiger Metadaten (automatisch generierte Daten, die von dem Gerät, welches das Bild erfasst, erzeugt werden) erreicht. Der größte Nachteil dieser Methode ist jedoch, dass du keine signifikante Reduzierung der Dateigröße feststellen wirst. Mit anderen Worten, es wird mit der Zeit viel Speicherplatz auf der Festplatte verbrauchen.

Wenn wir einen kleinen Vergleich der verlustbehafteten Komprimierungsraten durchführen, können wir sehen, dass man bei der verlustfreien Komprimierung keinerlei Qualität verliert. Allerdings wurde die Dateigröße des Bildes nur um 10,84% reduziert. Dies steht im Vergleich zu über 90% bei verlustbehafteter Komprimierung.

Vergleich verlustfreier Kompression

Vergleich verlustfreier Kompression

Welche Komprimierungsmethode ist besser?

Die Antwort darauf liegt eigentlich bei dir. Für die Mehrheit der Benutzer empfehlen wir die verlustbehaftete Komprimierung, da man ein Bild ohne großen Qualitätsverlust leicht um weit über 70% (manchmal sogar um über 90%!) komprimieren kann. Multipliziere dies mit 15 Bildern auf einer Seite und es wird eine bedeutende Rolle bei der Reduzierung der Ladezeit der Webseite spielen. Nicht nur das, sondern die verlustbehaftete Komprimierung stellt sicher, dass man so wenig Speicherplatz wie möglich verbraucht. Was wiederum bedeutet, dass man beim Hosting Geld sparen kann.

Verlustfreie Komprimierung ist für diejenigen, die sich keinen Qualitätsverlust leisten können. Fotografen, Food-Blogger und Models sind nur einige wenige, die sich auf pixelgenaue Bilder verlassen, um ihren Lebensunterhalt zu bestreiten. In diesen Fällen ist es wichtig, dass du deine Bilder auf einem CDN hostest. Aufgrund der Größe musst du sie möglicherweise sogar auf einen Speicherdienst eines Drittanbieters wie Amazon S3 oder Google Cloud Storage auslagern.

Wie man verlustbehaftete Kompression in WordPress verwendet

Wenn du immer noch zwischen verlustbehaftet und verlustlos verwechselst, mach dir keine Sorgen, es gibt eine Menge großartiger Bildoptimierungs-WordPress-Plugins, aus denen du wählen kannst, die automatisch verlustbehaftete Kompression anwenden:

Hinweis: Alle oben aufgeführten Server nutzen ihre eigenen Server von Drittanbietern für die Komprimierung von Bildern. Aus Performance-Gründen solltest du Bilder immer außerhalb des Unternehmens massenweise komprimieren. 👍

Wir verwenden Imagify auf dem Kinsta-Blog und zeigen dir, wie es funktioniert. Du hast einen kostenlosen Plan, aber auch ihre Pro-Pläne sind sehr preisgünstig. Wir optimieren eine ganze Reihe von Bildern und verwenden den „Lite“-Plan (1 GB pro Monat). Wenn du jährlich zahlst, beträgt der Preis weniger als 4,25 Dollar pro Monat.

Imagify hat drei verschiedene Optimierungsstufen:

Imagify Einstellungen

Imagify Einstellungen

Wir verwenden bei Kinsta den Aggressiv-Modus und erzielen je nach Bild typischerweise 60-70 % Einsparungen. Hinweis: Wir verwenden tatsächlich viel mehr PNGs als JPEGs, da die meisten unserer Bilder Icons und Illustrationen und keine Fotos sind.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an
Einsparung von Bildkomprimierungsdateien

Einsparung von Bildkomprimierungsdateien

Du kannst die automatische Optimierung von Bildern beim Hochladen aktivieren (was wir empfehlen, damit du es nicht vergisst) oder deren Massenbildoptimierung in der Medienbibliothek verwenden. Außerdem kannst du ein Backup des Originalbildes erstellen lassen. Dadurch kannst du dein Bild zu einem späteren Zeitpunkt tatsächlich in andere Optimierungsstufen konvertieren oder sogar dein Originalbild wiederherstellen. Wenn du diese Funktion nicht verwendest, empfehlen wir, sie ausgeschaltet zu lassen, um Speicherplatz zu sparen.

Normalerweise solltest du die Größe deiner Bilder vorher ändern, aber Imagify hat eine Funktion zur Größenänderung größerer Bilder, falls du es vergessen hast oder keine Zeit dafür hast. Neben der verlustbehafteten Komprimierung ist dies ein weiterer großer Dateigrößensparer!

Imagify vergrößert Bilder

Imagify vergrößert Bilder

Erst kürzlich haben wir die Funktion zur Optimierung von Massenbildern in unserer gesamten WordPress-Medienbibliothek genutzt. Wie man sieht, wurden über 700 MB abgespeichert! Das ist ein gewaltiger Betrag, wenn es um die Front-End-Performance geht.

Einsparungen bei der Massenbildoptimierung

Einsparungen bei der Massenbildoptimierung

Geschwindigkeits-Tests

Lasst uns einen kleinen Test machen! Da wir ständig sehen, dass Benutzer Bilder in voller Auflösung ohne Komprimierung hochladen, werden wir einen kleinen Vergleich darüber anstellen, wie sich dies auf die Gesamtleistung der Webseite auswirkt.

Test 1 – Original unkomprimiert

Wir haben zunächst 10 unkomprimierte Bilder hochgeladen. Dann haben wir 5 Tests mit Pingdom durchgeführt und den Durchschnitt ermittelt. Wir können sehen, dass die gesamte Ladezeit 3,04 Sekunden beträgt, bei einer Gesamtseitengröße von 28,4 MB.

Geschwindigkeitstest unkomprimiert

Geschwindigkeitstest unkomprimiert (Pingdom)

Test 2 – Komprimiert

Wir haben dann wieder genau die gleichen Bilder hochgeladen, aber diesmal haben wir die „automatische Optimierung“ im Imagify-Plugin aktiviert. Dann haben wir erneut 5 Tests mit Pingdom durchgeführt und den Durchschnitt ermittelt.

Wie wir sehen, beträgt die gesamte Ladezeit jetzt 522 ms bei einer Gesamtseitengröße von 901,4 KB. Unsere verlustbehafteten komprimierten Bilder haben also die Seitenladezeit um 82,83% verringert! 😮 Die Gesamtseitengröße wurde ebenfalls um satte 96,83% reduziert. Und unsere Bilder sehen dank Imagify immer noch hochwertig aus.

Geschwindigkeitstest komprimiert

Geschwindigkeitstest komprimiert (Pingdom)

Zusammenfassung

Sobald die Qualität der Bilder, die du auf deiner Webseite benötigst, festgelegt ist, kannst du wählen, ob du verlustbehaftete oder verlustfreie Komprimierung verwenden möchtest oder nicht. Auch hier empfehlen wir denjenigen, die mehr auf Geschwindigkeit und weniger auf Qualität achten, die verlustbehaftete Komprimierung zu wählen. Denke daran, dass verlustbehaftete komprimierte Bilder schön aussehen können, wenn du die richtige Balance findest. Wenn du pixelgenaue Bilder benötigst, solltest du immer die verlustfreie Komprimierung verwenden.

Was sind deine Gedanken? Verwendest du verlustbehaftete oder verlustfreie Komprimierung auf deiner WordPress-Seite. Teile uns dies in den Kommentaren unten mit.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an