Jetpack Boost: Leitfaden zur Bildperformance

Stelle mit Jetpack Boost sicher, dass die Bilder auf den Seiten und in den Beiträgen deiner Website die richtige Größe haben, mithilfe des Leitfadens zur Bildperformance.

Bildleitfaden verwendenMD

Der Bildleitfaden berechnet die empfohlenen Abmessungen für Bilder auf deiner Website. Indem du deine Bilder auf diese Abmessungen skalierst, kannst du die Dateigröße und dadurch die Ladezeiten deiner Seiten reduzieren. Unser Bildleitfaden bietet bewährte Vorgehensweisen, hilfreiche Tipps und konkrete Schritte, damit du das Beste aus deinen Bildern herausholst.

1. Navigiere im WP-Admin-Dashboard zu Jetpack → Boost, scrolle auf der Seite nach unten und aktiviere die Image Guide-Funktion.
2. Überprüfe die Bilder auf deiner Website. Besuche deine Website, während du angemeldet bist, und du siehst auf jedem Bild eine Blase mit einer Zahl. Wenn du den Mauszeiger über die Blase bewegst, wird eine Karte mit den Bilddetails wie folgt angezeigt:

• Der Bildname: Wenn du darauf klickst, wird das Bild in einem neuen Tab geöffnet.
• Abmessungen der Bilddatei: Sie zeigen die tatsächliche Größe des Bildes an.
• Erwartete Abmessungen: Dies ist die empfohlene ideale Größe des Bildes, damit es so schnell wie möglich auf der Seite geladen wird.
• Größe auf dem Bildschirm: Sie zeigt die Größe des Bildes an, das beim Besuch der Seite auf dem Bildschirm dargestellt wird.
• Bildgröße: Sie zeigt die tatsächliche Dateigröße des Bildes an.
• Mögliche Einsparung: Sie zeigt, um wie viel die Dateigröße reduziert werden könnte, wenn das Bild exakt auf die erwarteten Abmessungen skaliert wird.

Den Bildleitfaden mit verschiedenen Geräten und Einstellungen testenMD

Der Bildleitfaden zeigt dir Informationen zu deinen Bildern, wie sie auf dem aktuellen Gerät dargestellt werden. Wir empfehlen, deine Website auf verschiedenen Gerätetypen zu testen, um sicherzustellen, dass die Bilder unabhängig davon, wie Nutzer deine Website aufrufen, effizient ausgeliefert werden.

Verschiedene Geräte haben unterschiedliche Pixeldichten. Die Pixeldichte gibt an, wie viele Pixel in einem bestimmten Bildschirmbereich erscheinen. Sie kann beeinflussen, wie viele Pixel auf dem Bildschirm verwendet werden, um ein Bild in einer bestimmten Größe darzustellen.

Da der Bildleitfaden dir zeigt, wie gut deine Bilder zum aktuellen Gerät passen, lohnt es sich, ihn auf mehreren Geräten wie Computern und Smartphones zu testen. So erhältst du ein vollständigeres Bild davon, wie gut deine Bilder auf verschiedenen Bildschirmen optimiert sind.

Auch das Vergrößern oder Verkleinern deiner Website kann die Pixeldichte deines Browsers beeinflussen, was sich wiederum auf die Ergebnisse des Bildleitfadens auswirkt. Wir empfehlen, die Funktion bei der Standardzoomstufe deines Browsers zu verwenden.

Wir verwenden kleine Indikatoren, um relevante Informationen unaufdringlich anzuzeigen. Bei kleineren Bildern wird die eingeblendete Blase stattdessen als kleiner Punkt angezeigt.

Bildleitfaden pausierenMD

Sobald der Bildleitfaden aktiviert ist, kannst du die Funktion nach Bedarf auf Aktiv oder auf Pausiert setzen, indem du in der Adminleiste von WordPress auf Bildleitfaden klickst.

Der Boost-Bildleitfaden funktioniert nicht mit Page-BuildernMD

Einige Page-Builder verwenden iFrames zur Darstellung von Inhalten. Dadurch zeigt der Bildleitfaden Details im Administrationsbereich an. Für eine schlanke Benutzererfahrung haben wir den Bildleitfaden deaktiviert, wenn Page-Builder verwendet werden.

So optimierst du die Bilder auf deiner WebsiteMD

Indem du die Größe deiner Bilder optimierst, kannst du die Gesamtleistung deiner Website verbessern, sodass die Seiten effizienter geladen werden können.

Während Jetpack Boost Bilder, die auf deinem eigenen Server gehostet werden, nicht optimieren kann, kannst du das Jetpack Image CDN unter Jetpack → Boost aktivieren, um stattdessen optimierte Bilder von den Servern von Jetpack auszuliefern. Mehr über das Image CDN erfährst du in unserem Leitfaden zum Website-Beschleuniger. Für eine detailliertere Kontrolle über die Bildqualität und eine verbesserte Bildoptimierung kannst du auf Jetpack Boost upgraden oder ein Abonnement für Jetpack Complete abschließen.

Nachfolgend findest du einige Möglichkeiten, die Bilder auf deiner Website zu optimieren.

Vor dem Hochladen in die MediathekMD

Es gibt mehrere Möglichkeiten, deine Bilder zu optimieren, bevor du sie in deine Mediathek hochlädst:

• Größe ändern: Stelle sicher, dass die Größe des hochzuladenden Bildes für die geplante Verwendung ausreicht. Wenn du ein Bild beispielsweise maximal 800 × 800 Pixel groß verwenden möchtest, lade es in dieser Größe hoch.
• Dateityp: Das hängt stark vom Zweck des Bildes ab:
  • JPG: Wenn du ein schnell ladendes Bild ohne transparenten Hintergrund möchtest und das Bild nicht besonders detailreich sein muss, empfiehlt sich JPG. Das eignet sich beispielsweise für Fotos in einer Galerie oder für andere Anwendungen, bei denen keine besonders hohe Bildqualität erforderlich ist.
  • PNG: Wenn du ein Bild mit transparentem Hintergrund und sehr hoher Qualität benötigst, empfiehlt sich PNG. Das eignet sich beispielsweise für Logos oder andere Bilder, die Nutzer sehr detailliert betrachten könnten, etwa Produktbilder.

Jetpack Site Accelerator aktivierenMD

Das grundlegende Plugin von Jetpack enthält unseren Site Accelerator; einen kostenlosen Dienst, der deine Bilder optimiert und über ein globales Servernetzwerk ausliefert (oft als CDN oder Content Delivery Network bezeichnet). Dadurch werden Bilder von Servern geladen, die näher an den Nutzern liegen, die deine Website aufrufen. Der Site Accelerator passt die Größe deiner Bilder außerdem automatisch an viele Situationen an.

Wir empfehlen, den Site Accelerator zu verwenden, um die Performance deiner Bilder zu verbessern, insbesondere wenn der Bildleitfaden anzeigt, dass sie zu groß sind.

Bilder in der Mediathek skalierenMD

Du kannst Bilder direkt in deiner Mediathek skalieren. Das Bearbeiten und Skalieren von Bildern auf eine passende Größe in deiner Mediathek ist ein nicht destruktiver Vorgang. Das bedeutet, dass eine neue Version deines Bildes in der von dir festgelegten Größe erstellt wird, während das Originalbild unverändert bleibt.

DatenschutzinformationenMD

Der Bildleitfaden ist standardmäßig deaktiviert. Du kannst ihn über dein WP-Admin-Dashboard → Jetpack → Boost aktivieren.

Verwendete Daten
Websitebetreiber/-Nutzer Diese Funktion untersucht die auf deiner Website verwendeten Bilder sowie, wie und wo sie dargestellt werden.	Websitebesucher Keine.
Erfasste Aktivitäten
Website-Betreiber / Benutzer Wir erfassen Statistiken zu den übergroßen Bildern, die vom Image Guide identifiziert wurden, um uns bei der Verbesserung des Dienstes zu unterstützen und Verbesserungen gezielt umzusetzen. Insbesondere erfassen wir die Größe übergroßer Bilder sowie ihre ungefähre Position innerhalb der Seite (z. B. im Beitragsinhalt oder in Theme-Dateien).	Website-Besucher Keine.
Synchronisierte Daten (Mehr erfahren)
Website-Betreiber / Benutzer Keine.	Website-Besucher Keine.