Braucht Ihr Geschwindigkeit? Lernen Sie WebP, AVIF und moderne Bildformate kennen

Veröffentlicht: von Jos Velasco
Braucht Ihr Geschwindigkeit? Lernen Sie WebP, AVIF und moderne Bildformate kennen thumbnail

Es steckt immer noch Wahrheit in dem jahrhundertealten Sprichwort: „Ein Bild sagt mehr als tausend Worte.“

Tatsächlich kann zu einem Zeitpunkt, an dem eine Website der einzige Verbindungspunkt sein könnte, den Unternehmer mit ihrem Zielpublikum haben, Grafiken wichtiger denn je sein, um deine Geschichte zu erzählen.

Was sagt deine Bildsprache über dich aus?

Lädt es schnell und klar, macht einen modernen Eindruck und zieht Kunden tiefer in deinen Konversions-Trichter?

Oder sind deine Bilder ein wenig unscharf oder langsam, was Besucher dazu bringt, an der Vertrauenswürdigkeit deiner Marke zu zweifeln — und ob sie stattdessen zu einem Konkurrenten wechseln sollten?

Die Leistung, der Erfolg und die Benutzererfahrung einer Website für kleine Unternehmen hängen stark von modernen Bildformaten ab. Und das Aktualisieren deiner könnte tatsächlich viel einfacher sein, als du denkst.

In diesem Leitfaden werden wir erkunden, was diese modernen Formate sind, wie Du das für Dich beste auswählst, ein WordPress-Plugin, um das alles mit nur wenigen Klicks umzusetzen, und schließlich — eine Strategie, um die Leistung der Website im Auge zu behalten und sicherzustellen, dass Du mit den aktuellen Verbrauchertrends übereinstimmst.

Verstehen Von WebP- Und AVIF-Bildern

Das WebP-Format kam 2010 auf den Markt, um das JPEG-Bildformat zu verbessern, indem es eine überlegene Qualität und Komprimierbarkeit bietet, ohne die Dateigröße zu erhöhen.

Es unterstützt verlustbehaftete Kompression (deutliche Größenreduzierung bei minimalen Qualitätsverlusten) und verlustfreie Kompression (kein Qualitätsverlust), was kleinere Dateigrößen bei gleichbleibender visueller Klarheit ermöglicht. WebP verarbeitet auch Funktionen wie Transparenz (wie bei PNGs) und Animationen (wie bei GIFs).

Dank seiner Effizienz, Vielseitigkeit und Kompatibilität mit allen modernen Browsern ist WebP zum bevorzugten Format geworden.

AVIF (AV1 Image File Format) wurde 2019 eingeführt, um eine bessere Bildqualität und Kompression als WebP zu bieten. Es bietet noch hochwertigere Visuals mit minimalen Dateigrößen, dank fortschrittlicher Bildkompression und der Fähigkeit, reichere Farben zu erzeugen.

Obwohl AVIF-Dateien aufgrund ihres jüngeren Alters noch nicht so weit verbreitet sind wie WebP, wächst die Beliebtheit des Formats, da immer mehr Plattformen es akzeptieren.

Zusammengefasst, JPEG- und PNG-Bilder sind ältere Formate, die zu größeren Dateigrößen führen und daher längere Ladezeiten verursachen. Die Formate WebP und AVIF sind neuer und stark komprimierbar, was sie kleiner und schneller ladbar macht — in der Regel ohne nennenswerten Qualitätsverlust.

Noch etwas, das Du wissen solltest: Moderne Bildformate ist auch der Name eines Plugins, das für WordPress.org-Seiten entwickelt wurde, um AVIF- und WebP-Unterstützung für Medienuploads zu ermöglichen.

In Kürze führen wir Dich durch die Installation auf Deiner eigenen Website, um die Vorteile dieser modernen Formate zu nutzen.

Warum Moderne Formate Wichtig Sind (Hinweis: Geschwindigkeit!)

Bilder tragen erheblich zum Seitengewicht einer Webseite bei, wobei die durchschnittliche Größe von Desktop-Bildern über 1.000 KB von insgesamt 2.315 KB beträgt. Das sind fast 50%!

Auf Mobilgeräten machen Bilder fast 900 KB von 2.020 KB aus.

Balkendiagramm zum Vergleich des modernen Seitengewichts nach Inhaltstyp, das zeigt, dass Bilder bei weitem am höchsten waren (1,026 für Desktop) bis hin zu HTML mit nur 31 für Desktop.

Da Bilder den größten Teil des Gewichts einer Webseite ausmachen, ist deren Formatierung entscheidend. Dies liegt daran, dass verschiedene Formate die Größe, das Gewicht und letztendlich die Ladezeit der Bilder erheblich beeinflussen können.

Und Du möchtest, dass Deine Bilder so schnell wie möglich laden, da die Auswirkung zweifach ist.

Zuerst ist es entscheidend für die Suchmaschinenoptimierung (SEO).

Google verwendet etwas, das als Core Web Vitals bezeichnet wird, eine Reihe von Metriken, die für jede Website gemessen werden, um zu bewerten, wie benutzerfreundlich deine Seite auf Basis von Stabilität, Reaktionsfähigkeit und, genau — Geschwindigkeit ist!

Es wird Deine Core Web Vitals zusammen mit anderen Faktoren verwenden, um zu bestimmen, wo Deine Website im Vergleich zu Konkurrenten auf den Ergebnisseiten der Suchmaschine erscheint. (Bleib dran, wir werden später noch tiefer in die Core Web Vitals eintauchen!)

Zusätzlich sind Ladezeit und Genauigkeit enorme Bestandteile der Kundenerfahrung und beeinflussen daher stark deine Fähigkeit zu konvertieren. Dies wird dadurch belegt, dass die Konversionen abnehmen, wenn Seiten langsamer werden.

Balkendiagramm zeigt die Konversionsraten für Ladezeiten zwischen 1-10, wobei die höchsten Konversionen bei 1-3 Sekunden liegen.

Wahl Zwischen AVIF Oder WebP

Bevor Du mit der Verwendung von WebP oder AVIF auf Deiner Website beginnst, um die Geschwindigkeit zu erhöhen, solltest Du feststellen, welches Format Du für welche Bilder bevorzugst.

Die Wahrheit ist, dass sowohl AVIF als auch WebP ausgezeichnete Bildformate für das Web sind, daher hängt die Wahl wirklich nur von deinen Prioritäten ab.

Hier ist unser Urteil:

AVIF für Bildqualität

AVIF eignet sich perfekt für scharfe, detaillierte Bilder wie Fotografie-Portfolios, digitale Kunst oder E-Commerce-Websites, die hochwertige Produkte präsentieren. Es liefert beeindruckende Bilder mit minimalen Auswirkungen auf die Ladezeiten.

WebP für Vielseitigkeit

WebP funktioniert gut für die meisten Websites und kann problemlos Fotos, Illustrationen, Logos und Animationen verarbeiten. Es wird weitgehend unterstützt und ist daher eine zuverlässige Wahl für schnell ladende, hochwertige Bilder im Web.

Wir haben tatsächlich bereits einen detaillierten Leitfaden erstellt, um Dir bei dieser Entscheidung zu helfen. Wenn Du mehr Details möchtest, verpasse nicht AVIF vs. WebP: Wie Du das richtige moderne Bildformat wählst.

Vergleich der Funktionen von AVIF und WebP, bei dem beide die Option "Browser-Unterstützung" ankreuzen, sich aber sonst unterscheiden. Wie "schnelle Ladezeit" für AVIF und "verlustfreie Kompression" für WebP.

Lade Deine Besten Bilder Mit Dem Modernen Bildformate WordPress-Plugin Hoch

Das Modern Image Formats-Plugin, von dem wir früher sprachen? Es könnte einfach der beste Weg für kleine Website-Betreiber sein, ihre aktualisierten Grafiken online zu stellen.

Also, lass uns erkunden, welche Funktionen das Werkzeug bietet, wie man es installiert und verwendet, welche Vorteile es bietet und wie man feststellt, ob es die richtige Lösung für dich ist.

Was ist das Modern Image Formats Plugin für WordPress?

WordPress hat gerade 2024 die Unterstützung für AVIF eingeführt in Version 6.5, daher sind einige Websites möglicherweise noch nicht darauf eingestellt, dieses Format zu nutzen.

Hier kommt ein Plugin wie Modern Image Formats ins Spiel (früher Teil des Performance Lab Plugins, dann ausgegliedert und bis 2024 als WebP Uploads bekannt).

Das Modern Image Formats Plugin wurde entwickelt, um die Verwendung der Bildformate WebP und AVIF in WordPress zu ermöglichen. Solange dein Hosting-Server AVIF unterstützt, wird es das Standardformat sein, das das Plugin ausgibt, andernfalls wird WebP verwendet. Wenn beide unterstützt werden, kannst du in dem Menü „Einstellungen“ dein bevorzugtes Ausgabeformat wählen.

Schneller Hinweis: Du kannst nur die Formate neuer Uploads mit diesem Plugin modernisieren, daher funktioniert es nicht rückwirkend auf die Grafiken, die Du bereits auf Deiner Seite hast.

Hast du deinen idealen modernen Dateityp ausgewählt und bist bereit, deine Grafiken und die Geschwindigkeit deiner Website zu verbessern? Perfekt — lass uns in die Nutzung des Modern Image Formats Plugins eintauchen!

Erinnerung: Deine Hosting-Umgebung muss auch WebP und AVIF unterstützen können, wenn Du diese Dateiformate verwenden möchtest. Wenn Du Dir nicht sicher bist, ob sie unterstützt werden, wende Dich an Deinen Anbieter!

Erhalten Sie Inhalte direkt in Ihren Posteingang

Abonnieren Sie jetzt, um alle neuesten Updates direkt in Ihren Posteingang zu erhalten.

Wie Du Moderne Bildformate Verwendest

Wie alle Plugins, wirst Du Modern Image Formats über Dein WordPress-Admin installieren. Melde Dich einfach an und navigiere zu Plugins > Neues Plugin hinzufügen im linken Menü.

Zoom in Screenshot der WP-Navigation hebt den "Neues Plugin hinzufügen"-Link unter "Plugins" hervor

Suche nach „Moderne Bildformate“, klicke auf Jetzt installieren, und warte, bis die Installation abgeschlossen ist, bevor Du auf den Aktivieren-Button klickst.

Nahaufnahme des „Modern Image Formats“-Plugins mit Fokus auf den „Installieren“-Button in der oberen rechten Ecke des Kastens.

Wenn es fertig ist, wirst Du zu Deiner Installierten Plugins-Seite weitergeleitet, die alphabetisch geordnet ist.

Scrolle nach unten, um Moderne Bildformate zu finden, dann klicke auf Einstellungen.

Hier solltest Du einfach mal reinschauen und sicherstellen, dass Dir alle Standardeinstellungen bezüglich Deines bevorzugten Bildausgabeformats, der Ausgabe von Ersatzbildern und mehr gefallen.

Wenn Du mit Deiner Einrichtung zufrieden bist, verwende den Änderungen speichern Button.

Details zu modernen Bildformaten mit Optionen für "Bildausgabeformat" auf WebP gesetzt, Ausgabe von Ersatzbildern aktiviert und Bild-Element deaktiviert. Achte auf den "Änderungen speichern"-Button.

Jetzt, wenn Du ein neues Bild hochlädst, sollte das Plugin es automatisch in Dein ausgewähltes Standardformat umwandeln.

Lass uns das testen, indem wir schnell eine Grafik veröffentlichen. Wir gehen zu Beiträge > Neuen Beitrag hinzufügen und ziehen einfach ein Bild auf die Seite.

WP-Navigations-Screenshot, fokussiert auf "Neuen Beitrag hinzufügen" unter der Überschrift "Beiträge"

Gib ihm einen Titel und drücke den Veröffentlichen-Knopf in der oberen rechten Ecke. Fahre auf dem veröffentlichten Beitrag mit der Maus über das Bild, klicke mit der rechten Maustaste und wähle Untersuchen. Du solltest sehen, dass das Bild in deinem bevorzugten Format vorliegt!

Standardmäßig werden beim Hochladen von JPEG- oder PNG-Bildern die verkleinerten Versionen in modernen Formaten wie WebP oder AVIF erstellt. Keine Sorge – die Originaldatei bleibt im ursprünglichen JPEG- oder PNG-Format!

Schnelle Notiz: Du kannst die Formate neuer Uploads nur mit diesem Plugin modernisieren, daher funktioniert es nicht rückwirkend für die Grafiken, die Du bereits auf Deiner Seite hast.

Verwandter Artikel
Common WordPress Image Upload Issues And How To Fix Them (5 Methods)
Weiterlesen

Vorteile des Modern Image Formats Plugin

Wirklich der größte Vorteil dieses Plugins, und sein ganzes Ziel, ist, dass es für Website-Besitzer aller technischen Hintergründe einfach macht, etwas zu tun, um ihre Seite in das moderne Zeitalter zu bringen. Einmal installiert, macht es deine Seite sofort kompatibel mit den effizientesten Bildformaten von heute, was schnelle Ladezeiten, hohe Qualität und bessere Erlebnisse gewährleistet.

Zweitens liegt der andere wesentliche Vorteil darin, dass dieses Plugin die Formatwahl vereinfacht. Es wählt automatisch das optimale Format basierend auf den Fähigkeiten deines Servers aus. AVIF wird priorisiert, wenn es unterstützt wird, und WebP wird als Ausweichlösung verwendet — es sei denn, du entscheidest dich anders einzustellen. Das bedeutet eine Sorge weniger, wenn es um Website-Verwaltung und -Optimierung geht.

Ist das Tool für Moderne Bildformate das Richtige für Dich?

Wie üblich fällt es uns schwer, genau zu sagen, was für Dich richtig ist. Die Werkzeuge, die Du zur Unterstützung Deines Kleinunternehmens verwendest, sind so persönlich für Deine Marke, Deine Website, Deine und/oder die Fähigkeiten Deines Teams und die Zeit, die Du hast, um all das zu pflegen!

Das gesagt, wir haben im Laufe der Jahre mit vielen kleinen Unternehmern und Websites als unabhängiger (einer der letzten!) Hosting-Anbieter, Website-Bauer und stolzer Anbieter von professionellen Dienstleistungen zusammengearbeitet.

Also, wir haben eine Meinung dazu, für wen das Modern Image Formats Plugin am besten geeignet ist!

Wir empfehlen die Verwendung dieses Tools, wenn der Erfolg Deiner Website und Deines Geschäfts von Bildmaterial abhängt. Dies kann auf Fotografen, digitale Dienstleister, die hochwertige Arbeitsproben zeigen müssen, E-Commerce-Verkäufer usw. zutreffen.

Grundsätzlich, wenn deine Seite voller Grafiken ist, musst du nicht nur darauf achten, dass sie großartig aussehen, sondern auch, dass sie deine Ladezeit auf dem Desktop oder Mobilgerät nicht beeinträchtigen.

Wenn das nach dir klingt, besteht kein Schaden darin, ein Plugin zu verwenden, um das Hochladen deiner Bilder auf deine Website in das beste und schnellste Format zu erleichtern. 

Messe Deine Bemühungen Zur Bildoptimierung Mit Core Web Vitals

Nun, da Du diese große Anpassung vorgenommen hast, ist es, falls noch nicht geschehen, an der Zeit, Deine Core Web Vitals-Werte im Auge zu behalten, um zu verstehen, wie sie die Leistung Deiner Website beeinflussen.

Erinnerung, dies ist eine Reihe von Metriken: Largest Contentful Paint (LCP), Cumulative, Layout Shift (CLS) und Interaction to Next Paint (INP), die Google auf Websites verfolgt, um deren Benutzerfreundlichkeit zu bestimmen und sie für Google-Suchende zu ranken.

LCP vs INP vs CLS zeigt verschiedene Messungen auf einer Skala von Gut-Bedarf Verbesserung-Schlecht

Hier sind drei Möglichkeiten, um deine Core Web Vitals Punkte zu bestimmen, zu verfolgen und die Leistung deiner Website zu steigern:

  • PageSpeed Insights: Besuche Google PageSpeed Insights, gib die URL Deiner Webseite ein und klicke auf Analyse. Es werden Dir die Core Web Vitals-Werte für Mobilgeräte und Desktop angezeigt, zusammen mit Empfehlungen zur Verbesserung.
  • Chrome User Experience Report: Gehe zu Google Search Console > Core Web Vitals > Experience, um wertvolle Einblicke darüber zu erhalten, wie echte Besucher mit Deiner Seite interagieren.
  • Web Vitals Chrome-Erweiterung: Füge die Web Vitals Chrome-Erweiterung zu Chrome hinzu, um sofortigen Zugriff auf die Core Web Vitals-Werte direkt von jeder besuchten Webseite zu erhalten.

Weitere Lösungen, Um Deinen Website-Motor Auf Touren Zu Bringen

OK, OK, nur noch eine Sache, bevor wir zum Ende kommen. Wir schreiben schon eine Weile über Websites für kleine Unternehmen, daher haben wir einen schönen Rückstand an Ressourcen aufgebaut, die alle darauf abzielen, die Geschwindigkeit deiner Website zu steigern.

Für alle, die alles tun möchten, um den Verkauf und das Kundenerlebnis durch die Erhöhung der Website-Geschwindigkeit zu steigern, sind hier einige Artikel, die Du als Nächstes lesen solltest:

Es ist auch wichtig zu wissen, dass das Website-Hosting sehr viel mit der Geschwindigkeit zu tun hat!

Überlastete Server, entfernte Server, begrenzte Bandbreite, schlecht aufgebaute Infrastruktur — all diese Merkmale eines schlechten Hostings können deine Website ernsthaft verlangsamen, egal was du tust, um Grafiken zu optimieren.

Wenn Du besorgt bist, dass dies eine der Ursachen für Deine Leistungsprobleme sein könnte, könnte es an der Zeit sein, sich das preisgekrönte Hosting von DreamHost anzusehen. Wir garantieren 100% Betriebszeit, einfache Installation und Verwaltung sowie menschlichen Support, falls Du einmal ein Problem haben solltest.

Schreibe uns eine Nachricht über unsere Website, wenn Du Fragen hast, oder melde Dich an und träume groß mit DreamHost noch heute!

WordPress Hosting

Unschlagbares WordPress-Hosting

Zuverlässige, blitzschnelle Hosting-Lösungen, speziell optimiert für WordPress.

Mehr Erfahren