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.

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 WordPress-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.

Durchschnittliche Bytes pro Seite

Durchschnittliche Bytes pro Seite

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-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).
Images make up on average 21% of a web page's overall weight. 😮 Optimize them! Click to Tweet

Wie man Bilder für Web und Performance optimiert

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, die zu berücksichtigen sind, sind das Dateiformat und die Art der Kompression, die Du verwendest. Durch die Wahl der richtigen Kombination aus Dateiformat und Kompressionstyp kann die Bildgröße um das bis zu 5-fache reduziert werden. Du musst mit jedem Bild oder Dateiformat experimentieren, um zu sehen, was am besten funktioniert.

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)

Kompressionsqualität vs. Größe

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.

Niedrige Kompression (hohe Qualität)

Niedrige Kompression (hohe Qualität) JPG – 590 KB

Hohe Kompression (niedrige Qualität)

Hohe Kompression (niedrige Qualität) JPG – 68 KB

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.

Mittlere Kompression toll Qualität jpg

Mittlere Kompression (toll Qualität) JPG – 151 KB

Verlustbehaftete vs. verlustfreie Optimierung

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.

Bildoptimierungstools und -programme

There are a lot of tools and programs out there, both premium and free, that you can use to optimize your images. Some give you the tools to perform your own optimizations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.

affinity photo

Compressing photo in Affinity Photo

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

Größenänderung von Bildern zur Skalierung

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.

Beispiel eines srcset reaktionsschnellen Bildes im Code

Beispiel eines srcset reaktionsschnellen Bildes im Code

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.

WordPress-Medieneinstellungen

WordPress-Medieneinstellungen

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

Glücklicherweise musst Du mit WordPress nicht mehr die gesamte Formatierung oder Komprimierung von Hand vornehmen. Du kannst Plugins verwenden, um zumindest einen Teil der Arbeit für Dich automatisch erledigen zu lassen. Es gibt mehrere Plug-Ins, die die Bilddateien optimieren, während Du sie hochlädst. Sie optimieren sogar Bilder, die Du bereits hochgeladen hast. Dies ist eine praktische Funktion – besonders, wenn Du bereits eine Webseite mit Bildern hast. Hier ein Blick auf einige der besten Plug-Ins, um Deine Bilder für eine bessere Leistung zu formatieren.

Es ist jedoch wichtig, dass man sich nicht nur auf die Plug-Ins selbst verlässt. Beispielsweise sollten keine 2 MB großen Bilder in Deine WordPress-Medienbibliothek hochgeladen werden. Dies kann dazu führen, dass der Speicherplatz Deines Webhosters sehr schnell aufgebraucht wird. Die beste Methode ist, das Bild vorher in einem Fotobearbeitungsprogramm schnell in der Größe zu ändern, es dann hochzuladen und mit einem der folgenden Plug-Ins weiter zu reduzieren.

Imagify Image Optimizer

Imagify Image Optimizer Plugin

Imagify Image Optimizer plugin

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.

Ändern der Bildgröße in Imagify

Ändern der Bildgröße in Imagify

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.

ShortPixel Image Optimizer

ShortPixel Plugin

ShortPixel Plugin

ShortPixel Image Optimizer ist ein kostenloses Plug-In, das 100 Bilder pro Monat komprimiert und mehrere Dateitypen wie PNG, JPG, GIF, WebP und sogar PDF-Dateien komprimiert. Es funktioniert sowohl bei verlustbehafteter als auch bei verlustfreier Bildkompression. Es wird CMYK in RGB konvertieren. Deine Bilder und Miniaturansichten werden zur Verarbeitung in die Cloud übertragen und dann wieder auf Deine Webseite zurückgebracht, um die Originale zu ersetzen. Es erstellt ein Backup der Originaldateien, so dass Du sie bei Bedarf manuell wiederherstellen kannst. Es konvertiert Galeriedateien in großen Mengen und es gibt keine Begrenzung der Dateigröße.

Optimole

Optimole

Optimole plugin

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.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud hilft dir, deine Bilder kleiner und deine Website schneller zu machen, ohne den Startaufwand zu belasten. Ohne Größenbeschränkung und mit viel Flexibilität kannst du die Standardeinstellungen verwenden oder das Plugin ganz nach deinen Wünschen anpassen. Alle EWWW IO-Benutzer können den Bulk Optimizer verwenden, um ihre vorhandenen Bilder zu komprimieren, oder den Listenmodus der Medienbibliothek verwenden, um bestimmte Bilder auszuwählen und auszuwählen.

Zusätzliche Ordner können gescannt werden, um sicherzustellen, dass jedes einzelne Bild auf deiner Website richtig optimiert ist. EWWW IO ermöglicht es dir sogar, deine Bilder in Formate der nächsten Generation wie WebP zu konvertieren oder das beste Bildformat für ein Bild mit Multiformat-Konvertierungsoptionen zu finden. Die Bildkompression beginnt bei nur $0.003/Bild.

Die Premium-Komprimierungs-API ermöglicht es dir, die Komprimierung auf eine ganz neue Ebene zu heben, ohne die Qualität zu beeinträchtigen, was die PDF-Komprimierung freischaltet und praktische 30-tägige Image-Backups beinhaltet. Die ExactDN-Funktion, die bei $9/Monat beginnt, bietet automatische Komprimierung (ohne serverseitige Komprimierung erforderlich), automatische Größenanpassung und alle Vorteile eines CDN für schnellere Ergebnisse und noch mehr Leistung bei jeder Gerätegröße.

Optimus Image Optimizer

Optimus Image Optimizer Plugin

Optimus Image Optimizer Plugin

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.

WP Smush

WP Smush Plugin

WP Smush Plugin

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

TinyPNG (auch komprimierte JPGs)

TinyPNG Plugin

TinyPNG Plugin

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.

ImageRecycle

ImageRecycle - Plugin für Bild- und PDF-Optimierung

ImageRecycle – Plugin für Bild- und PDF-Optimierung

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.

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. (Siehe die originalen unkomprimierten JPGs). 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.

Geschwindigkeitstest mit unkomprimierten JPGs

Geschwindigkeitstest mit unkomprimierten JPGs

Komprimierte JPGs

Wir haben dann die JPGs mit dem Imagify WordPress-Plug-in komprimiert, mit der „aggressiven Einstellung“. (Siehe die neuen komprimierten JPGs, die immer noch genauso schön aussehen). 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.

Geschwindigkeitstest mit komprimierten JPGs

Geschwindigkeitstest mit komprimierten JPGs

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.)

PageSpeed Insights Bildoptimierungswarnung

PageSpeed Insights Bildoptimierungswarnung

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

Verwendung von SVGs

Eine weitere Empfehlung ist die Verwendung von SVGs neben den 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)

JPG Bild

JPG Bild

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

PNG Bild

PNG Bild

SVG (optimized size: 6.1 KB)

SVG (optimierte Größe: 6,1 KB)

SVG (optimierte Größe: 6,1 KB)

SVG image

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.

Bewährte Verfahren

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,/a> um Deine Bilder schnell an Besucher auf der ganzen Welt zu verteilen
  • 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 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.
Click to Tweet

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!

476
Mal geteilt