Ansprechende, klare und schnell ladende Bilder auf Ihrer WordPress-Seite sind eine der effektivsten Möglichkeiten, um einen Benutzer / Kunden anzuziehen. Es gibt einen Grund, warum Autohäuser so viel Zeit damit verbringen, sicherzustellen, dass die neuen Modelle makellos und glänzend sind. Die visuelle Wirkung eines Produkts kann oft die Entscheidung über Erfolg oder Misserfolg sein. Online-Showrooms sind nicht anders, außerdem gibt es die zusätzliche Komplikation, wie ein Bild Ihre Ladegeschwindigkeit beeinflussen kann. Es ist eine weit verbreitete und berühmte Metrik, dass ein Benutzer eine Website verlässt, wenn das Laden länger als 3 Sekunden dauert. Wenn das Laden einer Website länger als 3 Sekunden dauert, besteht eine gute Chance, dass die Bilder, die Sie auf Ihrer Website haben, Teil dieses Grundes sind.

Was können Sie also als Eigentümer einer WordPress-Website tun, um sicherzustellen, dass die Bilder, die Sie auf Ihrer Website haben, sowohl für Benutzer ansprechend sind als auch ein schnelles Laden Ihrer Website ermöglichen. Ihr anfänglicher Instinkt könnte sein, das Bild von einer Bildgröße von 1800 × 1400 auf eine Bildgröße von 300 × 200 zu verkleinern. Dies wäre die falsche Vorgehensweise, denn obwohl Ihre Bilddateigröße jetzt möglicherweise viel kleiner ist, haben die Qualität des Bildes und die Benutzererfahrung darunter gelitten. Wenn Sie zum Beispiel eine Autohaus-Verkaufswebsite haben, möchten die Kunden einen wirklich guten Blick auf das Auto werfen und alle Funktionen und Details sehen können. Indem das Bild so viel kleiner gemacht wird, ist eine detaillierte Inspektion des Autos jetzt unmöglich – was den potenziellen Kunden frustriert zurücklässt und sich woanders umsieht.

Also, was sind Ihre Optionen? Glücklicherweise gibt es Dutzende von verschiedenen Bilddateioptionen, aus denen Sie wählen können, angefangen von der hochwertigen, aber großen Dateigröße BMP, dem bewährten JPEG bis hin zum neuen und weitgehend unbekannten WebP-Format. Neben der Auswahl des richtigen Formats ist es wichtig, daran zu denken, dass Sie unabhängig davon, welches Format Sie wählen, die Bilddateigröße zusätzlich reduzieren können, indem Sie einen Prozess über WP-Optimize anwenden , der als „Komprimierung“ bekannt ist.

Die Website-Geschwindigkeit ist einer der 10 wichtigsten Faktoren, die Google-Bots beim Crawlen Ihrer Website beobachten, wenn sie Ihre Website in den Suchergebnissen platzieren. Eine schlechte Ladegeschwindigkeit kann sich negativ auf das Ranking Ihrer Website auswirken und Ihre Website leicht von der ersten Seite dazu bringen, von Google nicht indexiert zu werden. Google ist sehr streng bei der Einstufung von Websites in seinem Suchalgorithmus, und wenn sie feststellen, dass die Website aufgrund langsamer Ladezeiten eine schlechte Benutzererfahrung bietet, machen sie sich möglicherweise nicht einmal die Mühe, sie zu crawlen und über die Google-Suche auffindbar zu machen .

Welches Bildformat sollten Sie wählen?

Da qualitativ hochwertige Bilder für jede moderne WordPress-Website so wichtig sind, müssen Sie wissen, welches Format Sie verwenden, wie sie sich auf die Leistung Ihrer Website auswirken und wie Sie das Beste aus Ihrer Dateiauswahl herausholen.

Die beiden beliebtesten Bilddateiformate für Websites sind PNG und JPEG/JPG. Laut w3techs verwenden mehr als 70 % aller Websites diese Dateitypen. Etwa 30 % der Websites verwenden SVG und 22 % verwenden GIF.

Hier kommen Bilddateitypen ins Spiel, da der Dateityp, den Sie zum Hochladen Ihrer Bilder verwenden, eine wichtige Rolle spielt. Da es so viele verschiedene Dateitypen gibt, gehen wir im Folgenden auf die beliebtesten und ihre Vor- und Nachteile ein:

Bevor wir uns mit dem Dateityp befassen, müssen wir zuvor einige Konzepte verstehen, z. B. was ein Raster- und ein Bitmap-Bild sind? Was ist Kompression? Was ist der Unterschied zwischen einer verlustbehafteten und einer verlustfreien Komprimierung?

Komprimierung – verlustbehaftet vs. verlustfrei

Beide Komprimierungsarten zielen darauf ab, die Dateigröße zu reduzieren, aber was sie entfernen, ist wirklich wichtig. Bei verlustbehafteter Komprimierung; wichtige Daten, die für die Bildqualität relevant sind, werden entfernt. Dies kann sich in einigen Fällen darin widerspiegeln, dass das Bild verpixelt ist, da Ihr Computer Probleme haben kann, das Bild zu rekonstruieren.

Bei der verlustfreien Komprimierung werden irrelevante Daten, die im Bild vorhanden sind (z. B. Metadaten), reduziert, was zur Reduzierung der Dateigröße beiträgt. Die Bildqualität wird bei diesem Vorgang überhaupt nicht beeinträchtigt.

Raster gegen Vektor

Die am häufigsten verwendeten Bilddateitypen sind in der Regel rasterbasiert. Dies bedeutet, dass jedem Pixel ein fester RGB-Farbwert zugeordnet ist und alle diese Pixel kombiniert und verwendet werden, um ein ganzes Bild zu erstellen.

Beispiele für solche Dateiformate sind jpg, png und gif.

Alternativ wird ein Vektorbild aus Formen und Linien erstellt, die unendlich skaliert werden können, ohne dass sie jemals verpixelt werden. Die Vektoren werden mithilfe mathematischer Formeln erstellt, die es Benutzern ermöglichen, die Werte zu ändern, ohne die Qualität des Bildes zu beeinträchtigen.

Nachdem wir uns nun mit den Grundlagen der Bilder befasst haben, können wir uns nun die Details der verschiedenen Dateitypen ansehen.

JPEG:

Dies ist ein digitales Bildformat, das komprimierte Bilddaten enthält. Bei einem Komprimierungsverhältnis von 10:1 werden JPEG-Bilder verwendet, da diese sehr kompakt sind. Das JPEG-Format enthält wichtige Bilddetails und ist das beliebteste Bildformat zum Teilen von Fotos und anderen Bildern im Internet. Die geringe Dateigröße von JPEG-Bildern ermöglicht es Benutzern auch, Tausende von Bildern (z. B. auf einer Kunstwebsite) zu speichern, ohne dass zusätzlicher Speicherplatz auf Ihrer Website benötigt wird.

JPEG ist ein verlustbehafteter Komprimierungsdateityp, der sich gut für Fotos eignet, es wird jedoch empfohlen, beim Arbeiten mit Grafiken ein anderes Format zu verwenden, z. B. PNG.

Ein Beispiel für eine JPEG-Bilddatei. Sie können sehen, dass die Details und die Qualität beim Hochladen beibehalten wurden.

PNG:

PNG ist ein beliebtes Bitmap-Bildformat und steht für „Portable Graphics Format“. Dieses Format wurde als Alternative zum Graphics Interchange Format (GIF) erstellt. PNG hat einige großartige Funktionen wie das Enthalten von 24-Bit-RGB-Farbpaletten, Graustufenbildern und das Anzeigen transparenter Hintergründe. Eine verlustfreie Datenkomprimierungsmethode wird auch in PNG-Bildern verwendet, wenn Sie an hochwertigen Bildern oder Grafiken arbeiten. PNG-Bilder werden auch häufig in der Bildbearbeitung verwendet, da sie dem Benutzer im Vergleich zum herkömmlichen JPEG-Format mehr Kontrolle und Optionen für das Bild geben können.

PNG verwendet auch einen verlustfreien Komprimierungsalgorithmus, was bedeutet, dass dieses Format mehr Daten speichern kann als JPG. Bei Verwendung einer PNG-Bilddatei können Benutzer diese Bilder auch mit transparentem Hintergrund speichern. Durch die Verwendung dieses Formats haben Benutzer die Möglichkeit, mit geschichteten Bildern zu arbeiten, die einen klaren Hintergrund zeigen können (z. B. nur die Blumen im Bild unten und nicht die Hintergrundwand), sodass Benutzer das Bild ohne Notwendigkeit zu anderen Bildern hinzufügen können um es auszuschneiden und den vorhandenen Hintergrund zu entfernen – wie Sie es bei einem JPEG-Bild tun müssten. Dies ist einer der Hauptgründe, warum es die bevorzugte Wahl für Grafiken wie Diagramme und Illustrationen ist. PNGs sind bekanntermaßen beliebter für Benutzer, die mit Grafiken arbeiten, als für das Hochladen von Standardfotos.

Ein PNG-Bild behält eine hohe Qualität bei, während Sie gleichzeitig mehr Kontrolle über das Bild haben

GIF:

Den Begriff „GIF“ kennen Sie wahrscheinlich am besten aus den unzähligen kurzen Clips, die Ihnen über Messaging-Apps zugeschickt werden. GIF steht für „Graphics Interchange Format“ und wird hauptsächlich zur Unterstützung von Animationen ohne Ton verwendet

Im Gegensatz zu JPEG und PNG werden GIFs in einem Nischenfall verwendet und werden normalerweise nicht für statische Bilder verwendet (obwohl dies möglich ist). Wenn Sie ein GIF auf Ihrer WordPress-Seite verwenden, ist es höchstwahrscheinlich, um Ihren Besuchern eine einfache Animation oder einen einfachen Prozess zu zeigen. GIFs haben eine begrenzte Farbpalette und werden am besten für einfache Grafiken verwendet. Sie verwenden eine verlustfreie Komprimierung und sind in der Regel kleiner als JPGs. Es wird generell empfohlen, GIFs nur sparsam auf Ihrer Seite zu verwenden, da sie die Ladezeit verlängern können (aufgrund der Dateigröße) und auf 256 Farben begrenzt sind.

Ein Beispiel für ein GIF-Bild. Die Qualität des Originalbildes wurde stark reduziert, um die Animation zu produzieren.

SVG:

Scalable Vector Graphics (SVG) ist ein webfreundliches Vektordateiformat. Im Gegensatz zu pixelbasierten Rasterbilddateien wie JPEGs speichern Vektordateien Bilder über mathematische Formeln, die auf Punkten und Linien auf einem Gitter basieren. Das bedeutet, dass Vektordateien wie SVG ohne Qualitätsverlust erheblich in der Größe verändert werden können, was sie ideal für Logos und komplexe Online-Grafiken macht.

Vektoren eignen sich am besten nur für einfache Grafiken, Formen und Illustrationen. SVGs sind eine gute Wahl für Logos, insbesondere wenn Ihr Logo responsive sein soll und von den meisten Browsern unterstützt wird, einschließlich Chrome, Firefox, Edge und Opera.

Ein Beispiel für die Sonnenblumen im SVG-Format, die Sie für ein Logo verwenden würden.

BMP:

BITMAP gilt mittlerweile als veraltetes Bildformat. BMP lädt die Bilder in einem verlustfreien Bildformat, was aufgrund fehlender Komprimierung zu enormen Dateigrößen führen kann. In Anbetracht der Bedeutung der Ladegeschwindigkeit und der Art und Weise, wie Website-Ersteller die Bildgrößen auf ein Minimum beschränken möchten (ganz zu schweigen von der Beliebtheit von SVG- und JPEG-Formaten), wird dieses Format für Online-Bilder weitgehend ungenutzt.

Die Originalqualität des Bildes wird beim Hochladen im BMP-Format beibehalten, aber die Dateigröße wird Ihre Website stark verlangsamen und wird nicht empfohlen.

WebP:

Dieses Bildformat wurde 2010 von Google entwickelt und erfreut sich zunehmender Beliebtheit bei Personen, die viele Bilder auf ihre Website hochladen, da es mehrere Vorteile gegenüber JPEG und PNG bietet, z. B. eine bessere verlustbehaftete und verlustfreie Komprimierungsleistung.

WebP lädt aufgrund seiner verbesserten Komprimierungsleistung normalerweise auch in kleineren Dateigrößen als JPEG- oder PNG-Formate hoch und nimmt weniger Platz auf Ihrer Website ein, wodurch es schneller geladen werden kann. Obwohl es nicht von allen Browsern unterstützt wird, wird es von allen gängigen Browsern unterstützt – einschließlich Chrome, Firefox, Edge und Opera.

Obwohl nicht so bekannt wie JPEG und PNG, könnte sich WebP in Zukunft als Bildformat der Wahl erweisen.

Fazit:

Es gibt viele Arten von Bildformaten, die auf deiner WordPress-Seite verwendet werden können, aber es ist wichtig, den Zweck des Bildes zu bewerten. Wenn Ihre Website beispielsweise für einen Hochzeitsfotografen bestimmt ist, möchten Sie Bilder in hoher Qualität beibehalten, die dennoch schnell geladen werden und benutzerfreundlich sind ( JPEG ). Wenn Sie jedoch Bilder in einem Online-Postershop verkaufen, sollten Sie so viele Details und Bildinformationen wie möglich beibehalten ( PNG ).

Als allgemeine Faustregel gilt: Wenn Sie nur Standardbilder für Ihren Online-Shop, Ihr Blog, Ihr Portfolio, Ihre sozialen Medien oder Ihre Social-Media-Site hochladen, wird empfohlen, dass Sie Ihre Bilder in einem Standard-JPEG-Format hochladen und dann WP-Optimize verwenden um Ihre Bilder weiter zu komprimieren

Wenn Sie jedoch Ihre Bilder zukunftssicher machen und Ihre Ladegeschwindigkeit so weit wie möglich verbessern möchten, kann WebP eine überlegene verlustbehaftete und verlustfreie Komprimierung bieten und gleichzeitig ein hohes Maß an Details beibehalten. Wie auch immer Sie sich entscheiden, denken Sie daran, Ihre Bilder immer mit WP-Optimize für die marktführende Komprimierung zu komprimieren.