ShortPixel Review: So optimieren Sie die Leistung Ihrer Website durch Bildkomprimierung

Seit 2014 haben bereits mehr als eine halbe Million Nutzer die hervorragende Bildoptimierung von ShortPixel ausprobiert. In Voraussicht, wie wichtig die Optimierung der Webgeschwindigkeit in Zukunft sein würde, hat das in Rumänien ansässige Unternehmen ShortPixel Adaptive Images auf den Markt gebracht, ein extrem einfach zu bedienendes Plugin, das alle Warnungen zu Bildern, die GTmetrix oder Google PageSpeed ​​Insights melden, mit wenigen Klicks auflöst. Dies verbessert Ihre SEO und die Ladegeschwindigkeit Ihrer Website.

Aber wie macht das Plugin das alles? Finden wir es in dieser ausführlichen Überprüfung von Shortpixel Adaptive Images (kurz SPAI ) heraus.

Was tun adaptive ShortPixel-Bilder?

Hier sind die 4 wichtigsten Dinge, die ShortPixel tut:

• Es liefert die Bilder aus einem CDN : ShortPixel Adaptive Images nimmt alle Bilder, die von den Besuchern einer Website angesehen werden, und liefert sie aus dem CDN von ShortPixel. Was ist ein CDN? Es ist ein Content Distribution Network. In einfachen Worten handelt es sich um eine Gruppe von Servern, die auf der ganzen Welt verteilt sind und Kopien einer bestimmten Website enthalten. Somit hat jeder Benutzer gute Ladezeiten, unabhängig davon, in welchem ​​Land oder in welcher Region er sich befindet. Durch das Laden der Bilder aus dem CDN von ShortPixel erhöhen Sie die Ladegeschwindigkeit der Seite (weil das CDN höchstwahrscheinlich schneller lädt als der durchschnittliche Hosting-Provider, zusätzlich zu Servern auf der ganzen Welt) und spart einige Ressourcen vom Server, da die Bilder nicht von dort, sondern von ShortPixels CDN angefordert werden.
• Es komprimiert die Bilder : Die vom ShortPixel-CDN bereitgestellten Bilder werden mit dem leistungsstarken Optimierungsalgorithmus von ShortPixel optimiert, der 3 Optimierungsstufen bietet, verlustbehaftet, glänzend und verlustfrei. Dazu später mehr.
• Es dient adaptiven Bildern : Daher kommt der Name des Plugins. Angenommen, Sie laden ein Bild hoch und fügen es in seiner Vollversion auf einer Seite hinzu. Der Benutzer, der die Seite von einem Smartphone aus besucht, muss das Bild nicht in derselben Größe sehen wie ein Benutzer, der einen Laptop verwendet. Das Plugin kümmert sich darum und stellt die Bilder in der genauen Größe bereit, die das Gerät anfordert. Haben Sie schon einmal GTmetrix verwendet und den Fehler "Bilder in der richtigen Größe" erhalten? Genau darüber beschwert sie sich. ShortPixel Adaptive Images beseitigt diese Nachricht mit wenigen Klicks!

• Es löst alle bildbezogenen Probleme, die Sie möglicherweise benötigen : Neben der Komprimierung der Bilder und der Bereitstellung in der richtigen Größe können Bilder noch in vielerlei Hinsicht weiter verbessert werden. Auch darum kümmert sich ShortPixel Adaptive Images, und mit wenigen Klicks können Sie Folgendes tun:
  • Entfernen Sie die EXIF-Informationen
  • Bilder im WebP-Format bereitstellen
  • Lazy-Load-Bilder
  • Schneiden Sie die Bilder intelligent zu
  • Bilder vom Lazy-Loading ausschließen (nützlich, um ein Bild vorab zu laden)

Wie funktionieren adaptive ShortPixel-Bilder?

Wie wir bereits erklärt haben, analysiert ShortPixel Adaptive Images (SPAI) jedes Mal, wenn eine der Seiten einer Website besucht wird, ihren Code und ersetzt jedes ursprüngliche nicht optimierte Bild durch das richtige und optimierte Bild. Jedes ersetzte Bild wird vom ShortPixel-CDN bereitgestellt.

SPAI berührt keine der Dateien auf dem Server; SPAI optimiert die Bilder im laufenden Betrieb, dh wenn Sie zu den Originalbildern zurückkehren möchten, können Sie diese einfach deaktivieren. Dies ist der detaillierte Prozess, der für alle Benutzer völlig transparent ist:

1. Ein Benutzer besucht eine Seite mit Bildern.

2. Während die Seite geladen wird, sucht SPAI nach Bild-URLs im Code, zum Beispiel:

3. Nach dem Erkennen einer Bild-URL sendet es dieses Bild an die Server von ShortPixel, die es optimieren und im CDN von ShortPixel speichern. Dieser Schritt wird nur ausgeführt, wenn eine bestimmte Bildgröße zum ersten Mal angefordert wird.

4. Dann ersetzt SPAI die URL durch eine neue, die auf das CDN verweist, das das optimierte Bild mit der richtigen Größe enthält:

5. Die Seite ist fertig geladen und die Bilder wurden von ShortPixels schnellem CDN bereitgestellt!

Installieren und Einrichten von adaptiven ShortPixel-Bildern

Installation

Dies ist der einfachste Schritt, es wird wie jedes andere Plugin installiert. Dies ist die Seite, nach der du suchen musst: ShortPixel Adaptive Images – WordPress.org

Einrichten

Onboarding-Assistent

Wenn Sie ShortPixel Adaptive Images zum ersten Mal verwenden, werden Sie jetzt zum Onboarding-Assistenten weitergeleitet:

Dieser 4-Schritte-Assistent hilft Ihnen, SPAI richtig zu konfigurieren, damit alle Bilder vom CDN optimiert bereitgestellt werden.

Wenn Sie beispielsweise SPAI bereits verwendet und auf die neue Version aktualisiert haben, können Sie den Assistenten neu starten, indem Sie zu Einstellungen > ShortPixel AI gehen und auf die Schaltfläche „Setup-Assistent“ im oberen rechten Hilfemenü klicken:

Beachten Sie, dass ShortPixel Adaptive Images keinen API-Schlüssel benötigt , um zu funktionieren (im Gegensatz zu ShortPixel Image Optimizer). Sie müssen nur Ihre Website/Domain mit Ihrem Konto verknüpfen, damit Ihr ShortPixel-Guthaben verwendet wird, und dies wird automatisch vom Onboarding-Assistenten durchgeführt.

Nachdem Sie den Onboarding-Assistenten abgeschlossen haben, müssen Sie den Cache Ihrer Site leeren, damit die optimierten Bilder angezeigt werden!

Einstellungen

ShortPixel Adaptive Images ist sehr einfach zu verwenden, da es sofort nach der Aktivierung und Einrichtung mit dem Onboarding-Assistenten seine Magie entfaltet. Sie müssen nicht auf einen ON-Knopf oder ähnliches klicken. SPAI bietet jedoch auch einige Einstellungen, um die Bildoptimierung abzustimmen. Um darauf zuzugreifen, loggen Sie sich einfach in Ihren WordPress-Administrationsbereich ein und gehen Sie zu Einstellungen > ShortPixel AI. Wir werden die wichtigsten Einstellungen durchgehen, also beginnen wir mit der Registerkarte Komprimierung .

• Komprimierungsstufe : Hier können wir auswählen, welche Komprimierungsstufe unsere Bilder haben sollen.
  • Verlustbehaftet ist für die meisten Benutzer die beste Option. Die mit den Lossy-Algorithmen verarbeiteten Bilder sind die kleinsten optimierten Bilder, die man erhalten kann. Wenn also die Geschwindigkeit Ihrer Website von größter Bedeutung ist und Sie die beste Balance zwischen Optimierung und Bildqualität wünschen, empfehlen wir Ihnen, die verlustbehaftete Optimierung zu verwenden.
  • Glossy ist die beste Wahl, wenn Sie sich immer noch für GTmetrix oder Google PageSpeed ​​Insights interessieren, aber glauben, dass ein leichter Verlust der Seitengeschwindigkeit ein akzeptabler Kompromiss für eine erstklassige Bildqualität ist.
  • Mit Lossless sind Bilder Pixel für Pixel identisch mit den Originalen, bieten jedoch eine geringere Größenreduzierung im Vergleich zu verlustbehafteten oder glänzend verarbeiteten Dateien. Wenn Sie möchten, dass Ihre Bilder unberührt bleiben, wählen Sie diese Option.
• WebP-Unterstützung : Das WebP-Format ist ein von Google erstelltes Bildformat, das hervorragende Komprimierungsergebnisse bei geringem Bildqualitätsverlust erzielt. Ein kurzes Beispiel für das Verhalten von WebP: Wir haben ein Foto aus dem Internet gemacht und mit einem zufälligen Online-JPG-zu-WebP-Konverter sind wir von 1,05 MiB auf 344 KiB gestiegen, eine Reduzierung von 67,93 %, und die Bildqualität ist praktisch identisch! Durch Aktivieren der Option „WebP-Unterstützung“ teilen wir SPAI mit, dass das vom ShortPixel-CDN bereitgestellte Bild im .webp-Format sein sollte, solange der Browser kompatibel ist.

• EXIF entfernen : Das Plugin ermöglicht es, die „zusätzlichen“ Informationen, die im Bild selbst eingebettet sind, wie Standort, Autor, Kameramodell usw. zu entfernen. Diese Informationen sind normalerweise nicht erforderlich und das Entfernen hilft, das Gewicht des Bildes zu reduzieren ein kleines Bisschen. Empfohlen, es zu aktivieren.

Jetzt wechseln wir zur Registerkarte Verhalten . Unter vielen anderen Optimierungen finden wir Folgendes:

• Intelligentes Zuschneiden : Das Plugin erkennt Fälle, in denen nicht das gesamte Bild angezeigt wird, und schneidet es entsprechend zu.
• Angemeldete Benutzer : Standardmäßig liefert und optimiert ShortPixel AI die Bilder, auch wenn Sie angemeldet sind. Wenn Sie jedoch CDN-Verkehr und Credits sparen möchten, können Sie diese Option einfach deaktivieren und SPAI funktioniert dann nur für angemeldete out-Benutzer (die Besucher).
• LQ-Bildplatzhalter : LQIP steht für Low-Quality Image Placeholders. Es handelt sich um Bilder von sehr geringer Qualität (und daher sehr leicht), die beim ersten Laden der Seite geladen werden, und sobald die Seite vollständig geladen ist, werden sie durch die Bilder in voller Qualität ersetzt. Das hilft, die wahrgenommene Ladezeit zu erhöhen.

Als nächstes finden wir auf der Registerkarte Bereiche alle möglichen Einstellungen, um SPAI mitzuteilen, welche Bilder geparst und optimiert werden sollen:

• SVG- Bilder (diese werden nicht optimiert, sondern nur im CDN gespeichert).
• Bilder in CSS In diesem Fall wird auch die CSS-Datei selbst auf dem CDN gespeichert.
• Bilder in JS- Blöcken
• Bilder in JSON- Daten

Schließlich finden wir auf der Registerkarte Ausschlüsse einige Felder, in denen wir Bilder von der Optimierung ausschließen können:

• Ausgeschlossene Selektoren : Hier können wir die CSS-Selektoren schreiben, die SPAI von der Optimierung ausschließen soll.
  • Wenn Sie sie in "Don't lazy load" schreiben, werden solche Selektoren nicht lazy-loaded, aber dennoch optimiert und in der Größe geändert.
  • Wenn Sie sie in „Größe nicht ändern“ schreiben, wird SPAI solche Bilder optimieren, aber nicht skalieren.
  • Wenn Sie sie in „Ganz weglassen“ schreiben, ignoriert SPAI sie vollständig, ohne Optimierung oder Größenänderung.
• Ausgeschlossene URLs : Wenn Sie möchten, dass SPAI einige der Bilder nach URL ignoriert, schließen wir sie hier aus, indem wir reguläre Ausdrücke verwenden (um beispielsweise alle GIFs oder alle PNGs auszuschließen) oder Pfade (um beispielsweise ein einzelnes Bild auszuschließen). . Das Plugin enthält eine gute Erklärung zur Verwendung dieses Felds, sieh es dir unbedingt an!

Nachdem alle Einstellungen vorgenommen wurden, sollten Sie unbedingt das neue Image Checker-Tool ausprobieren, ein einfaches Tool, um den Status der optimierten Bilder auf jeder Seite der Website zu überprüfen . Besuchen Sie einfach eine Ihrer Seiten, während Sie eingeloggt sind; Auf der Symbolleiste werden Sie den berühmten ShortPixel-Roboter bemerken:

Klicken Sie auf dieses Symbol und Sie schalten den Image Checker ein. Für jedes Bild erscheint ein Tag: „CDN“ oder „ORIGIN“. „CDN“ bedeutet, dass das Bild optimiert vom CDN von ShortPixel bereitgestellt wird, und „ORIGIN“, dass es vom Server bereitgestellt wird oder mit anderen Worten, dass ShortPixel Adaptive Images es nicht verarbeitet.

Außerdem ändert sich der Cursor in ein Kreuz (⌖) und wenn wir auf ein Bild klicken, erhalten wir zusätzliche Informationen und Aktionen:

Preise und Pläne

Bevor wir über die Preisgestaltung sprechen, müssen wir uns daran erinnern, dass SPAI im laufenden Betrieb arbeitet. Es verarbeitet die Bilder nur, wenn sie mindestens einmal vom Frontend aus betrachtet werden. Bis dies geschieht, bleibt das Bild unbearbeitet und wird daher kein Guthaben ausgeben.

Ein Bild zu verarbeiten bedeutet, es intelligent zuzuschneiden (falls ausgewählt), die Größe zu ändern und es zu optimieren. Sobald das Bild verarbeitet wurde, wird es auf den ShortPixel-CDN-Servern gespeichert und kann mit dem von Ihnen erworbenen CDN-Traffic-Kontingent an jeden bereitgestellt werden. Solange genügend CDN-Traffic-Kontingent verfügbar ist, werden die optimierten Bilder aus dem CDN von ShortPixel bereitgestellt.

ShortPixel bietet Credits, die in CDN-Kontingente umgewandelt werden. Die Regel ist einfach: 5 MB CDN-Traffic = 1 Credit . Für die Bildbearbeitung können sowohl einmalige als auch monatliche Credits verwendet werden.

Monatspläne

• Kostenloser Plan = 100 Credits = 500 MB CDN-Traffic = ~500 Besuche/Monat
• 4,99 $ /Monat Plan = 5.000 Credits/Monat = 25 GB CDN-Traffic = ~25.000 Besuche/Monat
• 9,99 $ /Monat Plan = 16.000 Credits/Monat = 80 GB CDN-Traffic = ~80.000 Besuche/Monat
• 29,99 $ /Monat Plan = 55.000 Credits/Monat = 275 GB CDN-Traffic = ~275.000 Besuche/Monat
• 99,99 $ /Monat Plan = 220.000 Credits/Monat = 1 TB CDN-Traffic = ~1.100.000 Besuche/Monat

Einmalige Pläne

• 9,99 $ – 10.000 Credits = 50 GB = ~50.000 Besuche
• 19,99 $ – 30.000 Credits = 150 GB = ~150.000 Besuche
• 29,99 $ – 50.000 Credits = 250 GB = ~ 250.000 Besuche
• $99 – 170.000 Credits = 850 GB = ~850.000 Besuche
• 249 $ – 500.000 Credits = 5 TB = ~2.500.000 Besuche

Beispiel: Angenommen, Sie besitzen eine mittelgroße Website mit mehr als 5000 Bildern, die monatlich 10.000 Besuche erhält.

Ein monatlicher Plan von 4,99 USD/Monat ermöglicht 25 GB CDN-Datenverkehr, was unseren Tests zufolge etwa 25.000 Besuche pro Monat bedeutet.

Erfahren Sie hier mehr über Pläne und Preise.

Lohnt es sich?

Wenn man bedenkt, dass der schwerste Teil einer Website immer die Bilder sind und jede zusätzliche Sekunde, die die Website zum Laden der Website benötigt, zu verlorenen Benutzern und Conversions führt, lohnt es sich auf jeden Fall . Es ist ein Install-and-Forget-Plugin, und falls Sie zu Ihren Originalbildern zurückkehren möchten, können Sie es einfach deinstallieren und das wird den Zweck erfüllen.

Darüber hinaus ist ihr Support-Team wunderbar und Dutzende von Benutzern können auf wordpress.org dafür bürgen.

Es ist ein sehr empfehlenswertes Plugin, das hilft, die Geschwindigkeit Ihrer Website zu verbessern, Ihre Position bei Google zu erhöhen und die Anzahl Ihrer Besucher zu erhöhen. Und wenn Sie es mit qualitativ hochwertigem Hosting wie Cloudways kombinieren, werden die Ergebnisse noch spannender.

Wir hoffen, dass diese Überprüfung von ShortPixel Adaptive Images Ihnen helfen wird, Ihre Website superschnell zu machen!