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. WEBP unterstützt beide Komprimierungsmethoden!
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
- Verlustfreie Kompression
- Welche Komprimierungsmethode ist besser?
- Wie man verlustbehaftete Kompression in WordPress verwendet
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.
- JPEGs und GIFs sind beides verlustbehaftete Bildformate.
- JPEGs eignen sich hervorragend für Webseiten, die schnelle Ladezeiten benötigen, da man die Qualitätsstufe für ein gutes Gleichgewicht zwischen Qualität und Dateigröße anpassen 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“.
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.
- Original.JPG 2,82 MB (2.000 px mal 1463 px)
- verlustbehaftet komprimiert – 1.JPG: 227 KB (2.000 px mal 1463 px) 91,95% Reduzierung
- verlustbehaftet komprimiert – 2.JPG: 185 KB (2.000 px mal 1463 px) 93,44% Reduzierung
- verlustbehaftet komprimiert – 3.JPG: 5 KB (2.000 px mal 1463 px) 99,82% Reduzierung
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.
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.
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.
- RAW, BMP, GIF, und PNG sind verlustfreie Bildformate.
- Du kannst eine verlustfreie Komprimierung auf deinem Desktop mit Tools wie Photoshop, FileOptimizer oder ImageOptim durchführen.
- Einige Plugins wenden die Gzip-Komprimierung auf Bilder an (verkleinern sie).
Kinsta-Benutzer können die Vorteile der Code-Minifizierung nutzen, die direkt in das MyKinsta-Dashboard integriert ist. Damit können Kunden die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren. So kann eine Seite ohne manuellen Aufwand beschleunigt werden.
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.
- Original.JPG: 227 KB (2.000 px mal 1463 px)
- verlustfrei komprimiert.JPG: 203 KB (2.000 px mal 1463 px)
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.
Bevor du dich für ein Tool eines Drittanbieters entscheidest, solltest du jedoch bedenken, dass einige Hosts Tools oder Leistungen anbieten, mit denen du deine Bilder direkt über dein Hosting-Dashboard optimieren kannst. Kinsta bietet zum Beispiel eine kostenlose Bildoptimierungsfunktion für alle Kunden an, die WebP-Kopien der Bilder einer Seite erstellt (die ohne zusätzliche Kosten gespeichert werden) und dann die kleinere der beiden Dateien an den Besucher ausliefert. Das beschleunigt die Ladezeiten und verbessert die Benutzerfreundlichkeit, vor allem, wenn es mit dem blitzschnellen CDN von Kinsta kombiniert wird.
Wenn dein Host keine solche Leistung bietet, kannst du auch ein Bildoptimierungstool eines Drittanbieters ausprobieren. Einige der am weitesten verbreiteten Optionen sind:
- Imagify (verlustbehaftet und verlustfrei)
- WP Smush (verlustbehaftet und verlustfrei)
- EWWW-Cloud (verlustbehaftet und verlustfrei)
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. 👍
Imagify ist eine der beliebtesten Optionen, die wir aufgelistet haben. Es gibt einen kostenlosen Plan, aber auch die Pro-Pläne sind preislich sehr attraktiv. Schon mit dem „Lite“-Plan (1 GB pro Monat) kannst du eine ganze Reihe von Bildern optimieren, und sie bieten günstige monatliche oder jährliche Zahlungsoptionen an.
Imagify hat drei verschiedene Optimierungsstufen:
- Normal: Dieser Modus verwendet verlustfreie Komprimierung, d.h. deine Bilder verlieren nicht an Qualität, aber sie werden auch nicht so stark verkleinert.
- Aggressiv: Dieser Modus verwendet eine verlustbehaftete Komprimierung und bietet drastische Einsparungen beim Ausgangsgewicht, wobei die Bildqualität geringfügig reduziert wird. Meistens ist sie nicht einmal spürbar.
- Ultra: Dieser Modus verwendet eine verlustbehaftete Komprimierung und wendet alle verfügbaren Optimierungen für eine maximale Bildkomprimierung an. Dies führt zu enormen Einsparungen beim Ausgangsgewicht, aber man wird höchstwahrscheinlich eine gewisse Verschlechterung der Bildqualität feststellen.
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.
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!
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.
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.
- unkomprimiert-1.jpg (2,82 MB)
- unkomprimiert – 2.jpg (2.82 MB)
- unkomprimiert – 3.jpg (2,82 MB)
- unkomprimiert – 4.jpg (2,82 MB)
- unkomprimiert – 5.jpg (2,82 MB)
- unkomprimiert – 6.jpg (2,82 MB)
- unkomprimiert – 7.jpg (2,82 MB)
- unkomprimiert – 8.jpg (2,82 MB)
- unkomprimiert – 9.jpg (2,82 MB)
- unkomprimiert – 10.jpg (2,82 MB)
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.
- komprimiert – 1.jpg (69.3 KB)
- komprimiert – 2.jpg (69.3 KB)
- komprimiert – 3.jpg (69.3 KB)
- komprimiert – 4.jpg (69.3 KB)
- komprimiert – 5.jpg (69.3 KB)
- komprimiert – 6.jpg (69.3 KB)
- komprimiert – 7.jpg (69.3 KB)
- komprimiert – 8.jpg (69.3 KB)
- komprimiert – 9.jpg (69.3 KB)
- komprimiert – 10.jpg (69.3 KB)
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.
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.
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar