Wie man Bilder für Web und Performance optimiert

Vertrau uns, Du willst nicht, dass Google Deine Webseite hasst. Glücklicherweise kannst Du die Dateigrößen Deines Bildes reduzieren, um die Leistung Deiner Webseite zu verbessern.

Ein Problem bei der Formatierung ist, dass Änderungen oft die Qualität beeinträchtigen (was wiederum dazu führen kann, dass der Besucher Deine Webseite hasst). Das ist keine schlechte Sache, solange man sie nicht hässlich macht.

Es gibt einige Tricks und Techniken, mit denen Du die Dateigröße des Bildes reduzieren und trotzdem schön genug halten kannst, um sie stolz auf Deiner Webseite anzuzeigen.

Lass uns also einen Blick darauf werfen, wie Du Deine Bilder formatieren kannst, ohne sie zu verunstalten, und wie Du Bilder für Web und Performance optimieren kannst.

Schau dir unseren Video-Leitfaden zur Optimierung von Bildern für SEO an

Die Vorteile der Formatierung Deiner Bilder

Erstens, warum musst du Deine Bilder formatieren? Was sind die Vorteile? Es gibt zahlreiche Vorteile bei der Optimierung Deiner Bilder für die Leistung. Laut HTTP Archive machen Bilder per November 2018 durchschnittlich 21% des Gesamtgewichts einer Webseite aus. Wenn es also darum geht, deine Seite zu optimieren, nach Video Content, sind Bilder der erste Anlaufpunkt!

Sie sind wichtiger als Skripte und Schriften. Und ironischerweise ist ein guter Bildoptimierungs-Workflow eines der am einfachsten zu implementierenden Mittel, aber viele Webseitenbetreiber übersehen dies.

Hier ist ein Blick auf die wichtigsten Vorteile:

• Es wird die Ladegeschwindigkeit Deiner Seite verbessern (unsere Fallstudie unten belegt, wie sehr sie Deine Geschwindigkeit beeinflusst). Wenn Deine Seite zu lange braucht, um geladen zu werden, werden Deine Besucher es vielleicht leid, zu warten und zu etwas Anderem übergehen. Weitere Informationen findest Du in unserem ausführlichen Leitfaden zur Optimierung der Seitengeschwindigkeit.
• Kombiniert mit einem großartigen SEO WordPress Plug-In verbessert es die SEO. Die Webseite wird in den Suchmaschinenergebnissen einen höheren Rang einnehmen. Große Dateien verlangsamen Deine Webseite und Suchmaschinen hassen langsame Websites. Google wird die Bilder wahrscheinlich auch schneller für die Google-Bildsuche durchsuchen und indizieren. Du bist neugierig, wieviel Prozent Deines Traffics von der Google-Bildsuche kommt? Du kannst ein Google Analytics WordPress plugin oder segment verwenden, um den Traffic der Google-Bildsuche zu überprüfen.
• Die Erstellung von Backups wird schneller ablaufen.
• Kleinere Bilddateigrößen verbrauchen weniger Bandbreite. Netzwerke und Browser werden dies zu schätzen wissen.
• Benötigt weniger Speicherplatz auf deinem Server (abhängig davon, wie viele Miniaturansichten Du optimierst).

Als Kinsta-Kunde kannst du kostenlos von der Bildoptimierung profitieren, indem du die automatische Bildoptimierung mit nur wenigen Klicks aktivierst. Darauf gehen wir weiter unten näher ein.

Wie optimiere ich Bilder für das Web und die Leistung?

Das Hauptziel der Formatierung der Bilder ist es, das Gleichgewicht zwischen der niedrigsten Dateigröße und einer akzeptablen Qualität zu finden.

Es gibt mehr als eine Möglichkeit, fast alle dieser Optimierungen durchzuführen. Eine der beliebtesten Methoden ist es, sie einfach zu komprimieren, bevor sie auf WordPress hochgeladen werden. Normalerweise kann dies mit einem Tool wie Adobe Photoshop oder Affinity Photo erfolgen. Einige dieser Aufgaben können auch mit Plug-Ins durchgeführt werden, auf die wir im Folgenden näher eingehen werden.

Die beiden wichtigsten Punkte sind das Dateiformat und die Art der Komprimierung, die du verwendest. Wenn du die richtige Kombination aus Dateiformat und Komprimierungsart wählst, kannst du die Bildgröße bis zum Fünffachen reduzieren. Du musst mit jedem Bild oder Dateiformat experimentieren, um herauszufinden, was am besten funktioniert.

1. Das richtige Dateiformat auswählen

Bevor Du anfängst, Deine Bilder zu bearbeiten, stelle sicher, dass Du den besten Dateityp ausgewählt hast. Es gibt mehrere Arten von Dateien, die Du verwenden kannst:

• PNG – erzeugt Bilder in höherer Qualität, hat aber auch eine größere Dateigröße. Wurde als verlustfreies Bildformat erstellt, kann aber auch verlustbehaftet sein.
• JPEG – verwendet verlustbehaftete und verlustfreie Optimierung. Die Qualitätsstufe kann für ein ausgewogenes Verhältnis von Qualität und Dateigröße angepasst werden.
• GIF – verwendet nur 256 Farben. Es ist die beste Wahl für animierte Bilder. Es wird strikt verlustfreie Kompression verwendet

Es gibt noch einige andere, wie JPEG XR und WebP, aber sie werden nicht von allen Browsern unterstützt. Im Idealfall solltest Du JPEG oder JPG für Bilder mit viel Farbe und PNG für simple Bilder verwenden.

(Empfohlene Lektüre: JPG vs. JPEG: Das gängigste Bilddateiformat verstehen)

2. Qualität und Größe der Komprimierung im Auge behalten

Hier ist ein Beispiel dafür, was passieren kann, wenn Du ein Bild zu stark komprimierst. Das erste Bild zeigt die Verwendung einer sehr niedrigen Kompressionsrate, was zu höchster Qualität (aber größerer Dateigröße) führt. Das zweite wiederum arbeitet mit einer sehr hohen Komprimierungsrate, was zu einer sehr geringen Bildqualität (aber auch einer geringeren Dateigröße) führt. Hinweis: Das unveränderte Originalbild beträgt 2,06 MB.

Wie man sieht, ist das erste Bild oben 590 KB groß. Das ist ziemlich groß für ein Foto! Es ist im Allgemeinen am besten, wenn Du das Gesamtgewicht einer Webseite unter 1 oder 2 MB Größe halten kannst. 590 KB wären schon ein Viertel davon. Das zweite Bild sieht offensichtlich schrecklich aus, aber dann sind es nur noch 68 KB. Was Du tun solltest, ist, eine goldene Mitte zwischen der Kompressionsrate (Qualität) und der Dateigröße zu finden.

Also haben wir das Bild wieder mit einer mittleren Kompressionsrate aufgenommen und wie Du unten sehen kannst, sieht die Qualität jetzt gut aus und die Dateigröße beträgt 151 KB, was für ein hochauflösendes Foto akzeptabel ist. Dies ist fast 4x kleiner als das Originalfoto bei geringer Kompression. Normalerweise sollten einfachere Bilder wie PNGs unter 100 KB oder weniger liegen, um die beste Leistung zu erzielen.

3. Verlustbehaftete vs. verlustfreie Optimierung verstehen

Es ist auch wichtig zu verstehen, dass es zwei Arten von Kompression gibt, die Du verwenden kannst, verlustbehaftet und verlustfrei.

Verlustbehaftet: Dies ist ein Filter, der einen Teil der Daten eliminiert. Dies führt zu einer Verschlechterung des Bildes, so dass man darauf achten muss, wie stark man das Bild verkleinern kann. Die Dateigröße kann um ein Vielfaches reduziert werden. Mit Werkzeugen wie Adobe Photoshop, Affinity Photo oder anderen Bildbearbeitungsprogrammen kann man die Qualitätseinstellungen eines Bildes anpassen. Bei dem oben dargestellten Beispiel handelt es sich um eine verlustbehaftete Kompression.

Verlustfrei: Dies ist ein Filter, der die Daten komprimiert. Dies verringert nicht die Qualität, aber es erfordert, dass die Bilder dekomprimiert werden, bevor sie gerendert werden können. Du kannst eine verlustfreie Kompression auf Deinem Desktop mit Tools wie Photoshop, FileOptimizer oder ImageOptim durchführen.

Am besten probierst Du Deine verschiedenen Kompressionstechniken aus, um zu sehen, was für jedes Bild oder Format am besten funktioniert. Wenn Deine Tools die Option haben, stelle sicher, dass Du das Bild für das Web speicherst. Diese Option ist in vielen Bildbearbeitungsprogrammen enthalten und bietet Dir die Möglichkeit, die Qualität anzupassen, damit Du eine optimale Komprimierung durchführen kannst. Qualitätsverluste sind meist unausweichlich, also experimentiere, um die beste Balance zu finden, ohne die Bilder zu sehr zu verzerren.

4. Use Image Optimization Tools and Programs

Es gibt eine Vielzahl von kostenlosen und kostenpflichtigen Tools und Programmen, mit denen du deine Bilder optimieren kannst.

Einige geben dir die Werkzeuge an die Hand, um deine eigenen Optimierungen vorzunehmen, andere übernehmen die Arbeit für dich. Wir persönlich sind große Fans von Affinity Photo, da es günstig ist und dir fast identische Funktionen wie Adobe Photoshop bietet.

Hier sind einige zusätzliche Tools und Programme zum Ausprobieren:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org
• Die Bildoptimierungsfunktion von Kinsta

Vergiss nicht, dass deine Methoden zur Bereitstellung von Bildern genauso wichtig sind wie die Dateigröße. Viele Premium Hosts wie Kinsta setzen ein CDN ein, um Bilder und andere Dateien schnell an die Nutzer/innen auszuliefern. Die kostenlose Cloudflare-Integration von Kinsta schützt alle Seiten auf der Plattform und macht sie sowohl schnell als auch sicher.

5. Bilder skalieren

In der Vergangenheit war es sehr wichtig, dass man Bilder hochlädt, um sie zu skalieren und sie nicht von CSS skalieren zu lassen. Dies ist jedoch unbedeutsamer geworden, da WordPress 4.4 nun reaktionsschnelle Bilder unterstützt (nicht durch CSS verkleinert).

Grundsätzlich erstellt WordPress automatisch mehrere Größen von jedem Bild, das in die Medienbibliothek hochgeladen wird. Durch die Einbeziehung der verfügbaren Größen eines Bildes in ein srcset-Attribut können Browser nun die am besten geeignete Größe herunterladen und die anderen ignorieren. Nachfolgend siehst Du ein Beispiel dafür, wie Dein Code tatsächlich aussieht.

So kann es mit immer mehr HiDPI-Displays heutzutage gut sein, eine geeignete Mitte 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 Wahl an, basierend auf der Auflösung des Geräts.

Die WordPress-Medienbibliothek erstellt Miniaturansichten basierend auf den Einstellungen. Das Original bleibt jedoch erhalten und unberührt. Wenn Du die Größe Deiner Bilder ändern und Speicherplatz sparen möchtest, indem Du das Original nicht speicherst, kannst du ein kostenloses Plugin wie Imsanity verwenden.

Imsanity erlaubt es Dir, eine Vernunftgrenze festzulegen, so dass alle hochgeladenen Bilder auf eine angemessene Größe beschränkt werden, die immer noch mehr als ausreichend für die Bedürfnisse einer typischen Webseite ist. Imsanity klinkt sich unmittelbar nach dem Hochladen des Bildes, aber vor der WordPress-Verarbeitung in WordPress ein. WordPress verhält sich also in jeder Hinsicht genau gleich, außer dass es so ist, als hätte der Mitwirkende sein Bild vor dem Hochladen auf eine angemessene Größe skaliert.

Bildoptimierungs-Plug-Ins, die Du verwenden kannst

Zum Glück musst du bei WordPress nicht alle Formatierungen und Komprimierungen von Hand vornehmen. Du kannst Plugins verwenden, die zumindest einen Teil der Arbeit automatisch für dich erledigen.

Es gibt mehrere Plugins, die deine Bilddateien automatisch optimieren, wenn du sie hochlädst. Sie können sogar Bilder optimieren, die du bereits hochgeladen hast. Das ist eine praktische Funktion – vor allem, wenn du bereits eine Website mit vielen Bildern hast. Hier findest du einige der besten Plugins, mit denen du deine Bilder für eine bessere Leistung formatieren kannst.

Es ist jedoch wichtig, dass du dich nicht nur auf die Plugins selbst verlässt. Du solltest zum Beispiel keine 2 MB großen Bilder in deine WordPress-Mediathek hochladen. Das kann dazu führen, dass der Speicherplatz deines Hosts sehr schnell aufgebraucht ist.

Die beste Methode ist, das Bild vorher in einem Bildbearbeitungsprogramm zu verkleinern, es dann hochzuladen und eines der folgenden Plugins zu verwenden, um es weiter zu verkleinern.

Bevor du dich für eines dieser Tools oder Plugins entscheidest, solltest du jedoch überprüfen, ob dein Hosting-Anbieter nicht integrierte Tools anbietet, die die Arbeit für dich erledigen. Kinsta-Kunden haben zum Beispiel Zugang zu einer kostenlosen Bildoptimierungsfunktion, die automatisch optimierte Kopien aller WordPress-Bilder erstellt, die kostenlos gespeichert werden. Die kleinere der beiden Bilddateien wird dann über das blitzschnelle Kinsta’s CDN ausgeliefert, um die Geschwindigkeit noch weiter zu erhöhen. Die Kunden können sogar zwischen verlustfreier und verlustbehafteter Komprimierung wählen, je nachdem, was sie brauchen.

1. Imagify Image Optimizer

Imagify wird von demselben Team entwickelt, das auch WP Rocket entwickelt hat, was den meisten von Euch wahrscheinlich bekannt ist. Es ist WooCommerce, NextGen Gallery und WP Retina kompatibel. Es hat auch eine Massenoptimierungsfunktion und Du kannst zwischen drei verschiedenen Stufen der Kompression, normal, aggressiv und ultra, wählen. Es hat auch eine Wiederherstellungsfunktion, so dass man, wenn man mit der Qualität unzufrieden ist, mit einem Klick wiederherstellen und neu komprimieren kann, und zwar auf einem Niveau, das seinen Bedürfnissen besser entspricht. Es gibt eine kostenlose und eine Premium-Version. Bei einem kostenlosen Konto ist die Anzahl der Bilder auf 25 MB pro Monat begrenzt.

Das Entfernen des Originalbildes und die Größenänderung Deiner größeren Bilder kann auch mit diesem Plug-In durchgeführt werden.

Imagify komprimiert auch Bilder auf ihren Servern von Drittanbietern, nicht auf Deinem, was sehr wichtig ist, um die Leistung hoch zu halten. Imagify sollte Deine WordPress-Seite nicht verlangsamen.

2. Optimole

Optimole ist ein Bildoptimierungs-Plugin von WordPress, das die Größe Ihrer Bilder automatisch reduziert, ohne dass auf der anderen Seite Arbeit anfällt. Es hat einen großen Vorteil, wenn es um die Ladegeschwindigkeit deiner Website geht, da es vollständig Cloud-basiert ist und nie Bilder liefert, die größer sind als sie sollten, d.h. es zeigt die perfekte Bildgröße für den Ansichtsfenster und Browser des Besuchers.

Darüber hinaus bietet das Plugin ein verzögertes Laden und einen effizienten Bildersatz – es verschlechtert die Bildqualität, wenn der Besucher eine langsamere Internetverbindung hat – was es von der Masse abhebt. Es erkennt auch automatisch den Browser des Benutzers und bedient WebP, wenn es unterstützt wird.

Alle Bilder, die Optimole komprimiert, werden über ein schnelles CDN bereitgestellt. Du kannst Optimole kostenlos ausprobieren oder auf den Premium-Plan upgraden, wenn du zusätzliche Bandbreite und Verarbeitungsplatz benötigst.

3. Optimus Image Optimizer

Der Optimus WordPress Image Optimizer verwendet eine verlustfreie Kompression, um Deine Bilder zu optimieren. Verlustfrei bedeutet, dass keine Qualitätsverluste zu verzeichnen sind. Es unterstützt WooCoomerce und Multi-Site und hat eine nette Massenoptimierungsfunktion für diejenigen mit bereits großen bestehenden Medienbibliotheken. Es ist auch mit dem WP Retina WordPress Plug-In kompatibel. Du kannst zwischen einer kostenlosen und einer Premium Version wählen. In der Premium-Version bezahlst Du einmal jährlich und kannst eine unbegrenzte Anzahl von Bildern komprimieren. Wenn Du es mit dem Cache Enabler Plug-In kombinierst, kannst Du auch in WebP-Bilder eintauchen, ein neues leichtes Bildformat von Google.

4. WP Smush

WP Smush bietet sowohl eine kostenlose als auch eine Premium-Version an. Es reduziert die verborgenen Informationen aus Bildern, um die Größe zu reduzieren, ohne die Qualität zu beeinträchtigen. Es scannt Bilder und reduziert sie, während Du sie auf Deine Webseite hochlädst. Außerdem werden Bilder gescannt, die Du bereits hochgeladen hast, und diese werden ebenfalls reduziert. Es kann bis zu 50 Dateien auf einmal verarbeiten. Du kannst auch manuell arbeiten, wenn Du willst. Die Bildtypen JPEG, GIF und PNG können komprimiert werden. Die Dateigrößen sind auf 1 MB begrenzt.

• Es ist kompatibel mit einigen der beliebtesten Plugins für Medienbibliotheken wie WP All Import und WPML.
• Die gesamte Bildoptimierung erfolgt mit verlustfreien Komprimierungstechniken, die die Bildqualität auf hohem Niveau halten.
• Es spielt keine Rolle, in welchem Verzeichnis Du Deine Bilder speicherst. Smush findet sie und komprimiert sie.
• Smush hat die Möglichkeit, Breite und Höhe für alle Bilder automatisch einzustellen, so dass alle Deine Bilder in der gleichen Größe dargestellt werden

5. TinyPNG (auch komprimierte JPGs)

TinyPNG verwendet die Dienste TinyJPG und TinyPNG (mit dem kostenlosen Konto kannst Du etwa 100 Bilder pro Monat komprimieren), um Deine JPG- und PNG-Bilder zu optimieren. Das Programm komprimiert automatisch neue Bilder und komprimiert Deine vorhandenen Bilder. Es wird CMYK in RBG konvertieren, um Platz zu sparen. JPEG-Bilder werden bis zu 60% und PNG-Bilder bis zu 80% komprimiert, ohne dass die Bildqualität sichtbar beeinträchtigt wird. Eine Größenbeschränkung für Dateien gibt es nicht.

6. ImageRecycle

Das ImageRecyle Plug-In ist ein automatischer Bild- und PDF-Optimierer. Dieses Plug-In konzentriert sich nicht nur auf die Bildkompression, sondern auch auf PDFs. Eine wirklich praktische Funktion ist die Möglichkeit, die minimale Dateigröße für die Kompression einzustellen. Wenn man beispielsweise Bilder mit einer Größe von 80 KB hat, kann man sie automatisch von der Komprimierung ausschließen lassen. Dadurch wird sichergestellt, dass Bilder und Dateien nie zu stark komprimiert werden. Es beinhaltet auch Massenoptimierung und automatische Bildgrößenanpassung. Sie bieten eine kostenlose 15-tägige Testversion, aber dies ist ein Premium-Service, und Bilder werden über ihre Server hochgeladen und komprimiert. Sie berechnen nicht pro Monat, sondern nach der Gesamtzahl der komprimierten Bilder, beginnend bei $10 für 10.000.

7. EWWW Image Optimizer

Der EWWW Image Optimizer hilft dir dabei, deine Bilder zu verkleinern und deine Seite schneller zu machen – und das mit weniger Aufwand. Es gibt keine Größenbeschränkungen und viel Flexibilität für fortgeschrittene Nutzer. Du kannst die Standardeinstellungen verwenden oder das Plugin ganz nach deinen Wünschen anpassen.

Der kostenlose Modus erlaubt eine unbegrenzte JPG-Komprimierung und WebP-Konvertierung und ist ideal für Hobbyseiten oder Blogs, die gerade erst anfangen. Alle EWWW IO-Nutzer können den Bulk Optimizer verwenden, um ihre vorhandenen Bilder zu komprimieren, oder den Listenmodus der Medienbibliothek nutzen, um bestimmte Bilder auszuwählen, die komprimiert werden sollen. Zusätzliche Ordner können gescannt werden, um sicherzustellen, dass jedes einzelne Bild auf deiner Seite richtig optimiert ist.

EWWW IO ermöglicht es dir sogar, deine Bilder in die Formate der nächsten Generation wie WebP zu konvertieren oder das beste Bildformat für ein Bild mit Multi-Format-Konvertierungsoptionen zu finden.

Fallstudie zur Optimierung von Bildern

Wir haben uns entschieden, unsere eigene kleine Fallstudie und Tests durchzuführen, um Dir zu zeigen, wie sehr die Optimierung Deiner Bilder für das Web die Gesamtgeschwindigkeit Deiner WordPress-Seite beeinflussen kann.

Unkomprimierte JPGs

Zuerst haben wir 6 unkomprimierte JPGs, die alle über 1 MB groß waren, auf unsere Testseite hochgeladen. Dann haben wir 5 Tests mit Pingdom durchgeführt und den Durchschnitt genommen. Wie Du am Geschwindigkeitstest unten sehen kannst, betrug unsere Gesamtladezeit 1,55 Sekunden und die gesamte Seitengröße 14,7 MB.

Komprimierte JPGs

Wir haben dann die JPGs mit dem Imagify WordPress-Plug-in komprimiert, mit der „aggressiven Einstellung“. Wir haben dann wieder 5 Tests mit Pingdom absolviert und den Durchschnitt genommen. Wie Du am Geschwindigkeitstest unten sehen kannst, wurde unsere Gesamtladezeit auf 476 ms und die gesamte Seitengröße auf 2,9 MB reduziert. Unsere Gesamtladezeiten wurden um 54,88% und die Seitengröße um 80,27% reduziert.

Es gibt fast keine andere Optimierung, die Du auf Deiner Webseite vornehmen kannst, die Dir eine Verkürzung der Ladezeiten um über 50% bringt. Deshalb ist die Bildoptimierung so wichtig, obendrein wurde der Prozess durch das Plug-in automatisiert. Es ist ein praktischer Ansatz für eine schnellere WordPress-Seite. Die einzige andere drastische Optimierung, die Du machen könntest, wäre, Deine WordPress-Hosts zu ändern. Viele Kunden, die zu Kinsta übersiedeln, sehen mehr als 45% Geschwindigkeitssteigerungen. Stell Dir vor, du ziehst zu Kinsta und optimierst Deine Bilder!

Durch die Optimierung der Bilder, sei es mit einem Fotobearbeitungsprogramm oder einem WordPress-Plug-in, kannst Du auch die Warnung „Bilder optimieren“ beheben, die Du in Google PageSpeed Insights erhältst (wie unten gezeigt.)

Wenn Du andere Optimierungswarnungen von Geschwindigkeitstest-Tools hast, schau Dir unseren Beitrag bei Google PageSpeed Insights und unsere ausführliche Pingdom-Anleitung an.

Wir haben unser Wissen über die effektive Verwaltung von Websites in großem Maßstab in einem E-Book und einem Videokurs zusammengefasst. Klicke hier, um den Leitfaden zur Verwaltung von 60+ WordPress-Seiten herunterzuladen!

SVGs verwenden: Die Vorteile, die du kennen musst

Eine weitere Empfehlung ist die Verwendung von SVG-Dateien neben deinen anderen Bildern. SVG ist ein skalierbares Vektorformat, das sich hervorragend für Logos, Symbole, Text und einfache Bilder eignet. Hier sind ein paar Gründe, warum:

• SVGs sind sowohl in Browsern als auch in Bildbearbeitungswerkzeugen automatisch skalierbar. Das ist der Traum eines Web- und Grafikdesigners!
• Google indiziert SVGs, so wie es PNGs und JPGs macht, sodass du Dir keine Sorgen um SEO machen musst.
• SVGs sind traditionell (nicht immer) kleiner in der Dateigröße als PNGs oder JPGs. Dies kann zu schnelleren Ladezeiten führen.

Genki hat einen großartigen Artikel geschrieben, in dem er die Größe von SVG vs. PNG vs. JPEG vergleicht. Nachfolgend findest Du einige Beispiele aus seinem Test, in denen er die drei verschiedenen Bildtypen vergleicht.

JPG (optimized size: 81.4 KB)

PNG (optimierte Größe: 85,1 KB)

SVG (optimized size: 6.1 KB)

Wie man oben sehen kann, ist die SVG eine Verringerung der Dateigröße um 92,51% im Vergleich zum JPG. Und im Vergleich zum PNG, 92,83%. Schau Dir unser Tutorial an, wie man SVGs auf deiner WordPress-Seite verwendet.

Best Practices für die Optimierung von Bildern für das Web

Hier sind einige der gängigsten Vorgehensweisen, wenn es darum geht, wie man Bilder für das Web optimiert:

• Wenn Du ein WordPress-Plug-in verwendest, benutze eines, das Bilder extern auf ihren Servern komprimiert und optimiert. Dies wiederum reduziert die Belastung der eigenen Webseite.
• Verwende nach Möglichkeit Vektorbilder neben Deinen PNGs und JPGs.
• Nutze ein CDN, um Deine Bilder schnell an Besucher auf der ganzen Welt zu verteilen. Das Kinsta CDN verfügt über eine Code-Minifizierungsfunktion, die direkt in das MyKinsta Dashboard integriert ist. Damit können Kinsta-Kunden die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.
• Entferne unnötige Bilddaten.
• Beschneide den weißen Bereich und erstelle ihn neu, indem du CSS verwendest, um das Padding bereitzustellen.
• CSS3-Effekte so weit wie möglich nutzen.
• Speichere Deine Bilder in den richtigen Maßen, obwohl WordPress jetzt reaktionsschnelle Bilder unterstützt, um sie bereitzustellen, ohne die Größe mit CSS zu ändern.
• Verwende immer das .ico Dateiformat für dein Favicon.
• Verwende Webfonts, anstatt Text in Bildern zu platzieren – sie sehen besser aus, wenn sie skaliert werden und benötigen weniger Platz.
• Rasterbilder nur für Szenen mit vielen Formen und Details verwenden.
• Reduziere die Bit-Tiefe auf eine kleinere Farbpalette.
• Verwende nach Möglichkeit verlustbehaftete Komprimierung.
• Experimentiere, um die besten Einstellungen für jedes Format zu finden.
• Verwende GIF, wenn sie Animation benötigen (aber komprimiere Deine animierten GIFs).
• Verwende PNG, wenn Du hohe Details und hohe Auflösungen brauchst.
• Verwende JPG für allgemeine Fotos und Screenshots.
• Entferne nicht benötigte Metadaten von Bildern.
• Automatisiere den Prozess so weit wie möglich.
• In einigen Fällen solltest du Bilder für ein schnelleres Rendering der ersten Seite lazy loaden.
• Speichere Bilder als „optimiert für das Web“ in Tools wie Photoshop.
• Verwende WebP in Chrome, um kleinere Bilder bereitzustellen.
• Nutze die integrierte Bildoptimierungsfunktion von Kinsta

Sobald Du Deine Bilder für eine bessere Leistung und nach den besten Praktiken formatiert hast, wird Deine Webseite von Suchmaschinen, Browsern und Netzwerken besser angenommen und für Deine Leser schneller geladen werden. Oh, und stelle sicher, dass Du unser Tutorial über Hotlinking liest, um zu verhindern, dass Leute Deine Bilder und Bandbreite stehlen.

Sind die Bilder für eine bessere Leistung formatiert? Formatierst Du sie von Hand, benutzt Du ein Plugin oder beides? Gibt es ein anderes Tool oder Plugin, das Du empfehlen würdest? Hast Du etwas hinzuzufügen? Lass uns über Deine Techniken und Vorgehensweisen unten in den Kommentaren Bescheid wissen!

Brian Jackson

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.

• LinkedIn
• Twitter