Die Bildoptimierung ist laut Lighthouse eines der häufigsten Probleme bei schlechter Website-Geschwindigkeit und -Leistung.

Es ist möglich, dass nicht optimierte Bilder die Ladegeschwindigkeit Ihrer Seite um mehr als 9 Sekunden verlangsamen, in einigen Fällen sogar noch mehr.

Langsame Seiten führen zu einer höheren Absprungrate und einer niedrigeren SERP-Positionierung, was im Gegenzug weniger Verkehr und weniger zahlende Kunden bedeutet.

Was beinhaltet die Bildoptimierung?

Die Optimierung aller Bilder auf Ihrer Website ist eine hochkomplexe Aufgabe, die Fachwissen und einige Stunden erfordert, um sie richtig zu machen.

Plugins können helfen, Zeit zu sparen, aber sie können auch Ihre gesamte Website-Struktur zerstören und einige Ihrer Medien dauerhaft löschen, wenn sie nicht richtig gehandhabt werden.

Um zu sehen, warum wir dies für eine komplexe Aufgabe halten, finden Sie hier eine 20-Punkte-Checkliste dessen, was Cloudimage für eine ordnungsgemäße Bildoptimierung als wesentlich erachtet:

1. Integrieren Sie die CDN-Bereitstellung
2. Optimieren Sie die TTFB
3. Verwenden Sie die 360-Grad-Produktansicht
4. Stellen Sie sicher, dass Ihre Bilder responsive sind
5. Bilder richtig skalieren
6. Verwenden Sie das richtige Bildformat
7. Bilder komprimieren
8. Alt-Attribute optimieren
9. Beschriften Sie die Bilder deutlich
10. Achten Sie auf Ihre Produktwinkel
11. Wissen, wie man Farben mischt
12. Erstellen Sie emotional verschmolzene Visuals
13. Verwenden Sie Produkt entsprechende Hintergründe
14. Optimieren Sie Ihre Thumbnails
15. Bild-Sitemap verwenden
16. Wenden Sie Chroma-Subsampling an
17. Lazy-Load unkritische Bilder
18. Bereitstellen von Image-Spriting
19. Beginnen Sie mit dem Caching von Bild-Assets
20. Laden Sie kritische Bild-Assets vorab

Aus technischer Sicht sind die wichtigsten Punkte aus der obigen Liste Größenänderung, Formatoptimierung, Lazy Load, Bildkomprimierung, Reaktionsfähigkeit und CDN-Bereitstellung.

Wenn Sie beispielsweise 11.000 Bilder auf Ihrer Website haben.

Wie lange dauert es, bis die Optimierung abgeschlossen ist?

Stellen Sie sich nun vor, Sie könnten das automatisch tun!

Das macht Cloudimage.

Sie können alle Bilder in großen Mengen über unsere Software hochladen und sie werden automatisch eingelöst und in die Cloud hochgeladen.

Danach kommt die Optimierung.

Bildgröße ändern

Die Größenänderungsserver von Cloudimage, die sich in drei Rechenzentren weltweit (Kanada, Frankreich und Singapur) befinden, laden Ihr Originalbild von origin_image_url herunter, transformieren es basierend auf den Betriebs- und Filterparametern und zeigen es schließlich über eine Rakete auf Ihrer Website oder mobilen App an -schnelles CDN.

Ein Beispiel mit einem Originalbild, das auf Ihrem Webserver, Amazon S3-Bucket oder einem anderen über HTTP zugänglichen Speicher gehostet wird.

Wenn Sie sowohl Breite als auch Höhe angeben, können die Originalbildproportionen entweder ignoriert oder beibehalten werden. Sie können das Bild auch auffüllen. Cloudimage bietet die folgenden Größenänderungsmodi:

Ernte

Behält die Bildproportionen bei und schneidet das Bild so, dass es der definierten Breite und Höhe entspricht.

Fit

Ändert die Größe des Bildes unter Beibehaltung der Proportionen und fügt Polsterung hinzu, um die gewünschten Abmessungen zu erfüllen.

Gebunden

Versucht, die Größe des Bildes unter Beibehaltung der Proportionen zu ändern. Passform ähnlich, jedoch ohne Polsterung.

Abdeckung

Ändert die Größe des Bildes auf die angegebene Breite und Höhe, wobei die ursprünglichen Bildproportionen ignoriert werden.

Drehen

Dreht das Bild um einen bestimmten Winkel gegen den Uhrzeigersinn

Trimmen

Entfernt einen einfarbigen Rahmen um das Bild.

Bildkompression

Sie können die Komprimierung (Ausgabeformat und Qualität) Ihres Bildes ändern, indem Sie Komprimierungsfilter verwenden.

Sie können die Komprimierungsfilter zusammen mit Größenänderungen und Bildfiltern verwenden.

Standardmäßig liefert Cloudimage die Bilder als WebP. Wenn das Format vom Client-Browser nicht unterstützt wird, greift es auf JPEG oder PNG zurück.

Optipress – Machine Learning-basierte Bildkomprimierung

Die größte Herausforderung bei der JPEG-Komprimierung besteht darin, den optimalen Komprimierungsfaktor für jedes einzelne Bild zu finden.

Unterschiedliche Bilder, die mit denselben Komprimierungsparametern komprimiert wurden, können zu einer unterschiedlich wahrgenommenen Qualität führen.

Darüber hinaus kann dasselbe Bild in unterschiedlichen Größen unterschiedliche Komprimierungsstrategien erfordern, um einen maximalen Größengewinn ohne sichtbaren Qualitätsverlust zu erzielen.

Um dies zu überwinden, haben wir den Optipress JPEG-Komprimierungsalgorithmus entwickelt.

Optipress findet den besten JPG-Komprimierungsansatz durch die Analyse spezifischer Bildmerkmale und aktueller Komprimierungsparameter.

Ein maschinelles Lernmodell bestimmt die beste Komprimierungsstrategie für dieses Bild.

Die Qualität wird dann basierend auf einem Simulationsmodell des menschlichen visuellen Systems bewertet, um eine optimale Komprimierung ohne wahrnehmbare Qualitätsverschlechterung zu erreichen.

Transformationsvorgaben

Wenn Sie dieselben Transformationen auf viele Bilder anwenden möchten, können Sie Voreinstellungen definieren und Transformationen nur unter Verwendung des Voreinstellungsnamens (X) anwenden.

p=X

Jede Transformation zur Größenänderung oder Bildfilter kann in eine Voreinstellung aufgenommen werden, ebenso wie Wasserzeichen und Bildkomprimierungsparameter.

Dies ermöglicht den Massenoptimierungsprozess, der über 50 % der Bildoptimierungszeit einspart und von allen Beteiligten einfach durchgeführt werden kann.

Responsive Bilder leicht gemacht

Responsive Bilder passen die Bildgröße an die Bildschirmgröße des Endbenutzers an, sodass Ihre Website oder mobile App auf verschiedenen Bildschirmgrößen schneller geladen werden kann.

Das Cloudimage-Team hat ein JS-Plugin entwickelt, um alles für Sie zu automatisieren.

Die Cloudimage JS-Bibliothek passt alle Ihre URLs automatisch an und bietet integriertes Responsive Design, Lazyloading und viele weitere Funktionen, um Ihre Website reaktionsschnell und schnell zu machen und Ihren Bildern schöne Ladeeffekte hinzuzufügen.

Mit Lazy Loading und aktiviertem Cache können Sie sicher sein, dass sich die Ladezeit Ihrer Website um mindestens 40 % verbessert. Fügen Sie CDN hinzu und der Prozentsatz steigt sogar auf 60 %.

Content-Delivery-Netzwerk

Cloudimage nutzt Content Delivery Networks, um die weltweite Bereitstellung Ihrer Bilder zu beschleunigen. Wir arbeiten mit mehreren CDN-Anbietern zusammen, um die Bereitstellung Ihrer Bilder zu optimieren und eine hervorragende Zuverlässigkeit zu bieten.

Neben der Beschleunigung Ihrer Bilder bietet das CDN DDoS-Schutz (Distributed Denial of Service), der als Schutzschild für Ihre Server fungiert und Ausfallzeiten vermeidet.

CDNs speichern Bilder normalerweise so lange, wie die Bilder von Endbenutzern angefordert werden.

In wenigen Minuten implementiert

Was Cloudimage so einzigartig macht, ist, dass seine Dienste sehr schnell implementiert werden können.

Wenn Ihre Website verrückte Traffic-Spitzen erlebt, können Sie sich jederzeit an cloudimage wenden, Ihre Bilder optimieren und sicher sein, dass diese Spitzen sofort absorbiert werden.

Dadurch erhalten Sie eine einwandfreie Leistung und eine schnelle Seitenladegeschwindigkeit auf verschiedenen Geräten.

Darüber hinaus ist die Implementierung sehr einfach und macht den Prozess der Zusammenarbeit zwischen Teams (Teams, die für die Website verantwortlich sind, von der Inhaltserstellung bis zur Veröffentlichung und Überwachung) einfach und effizient.

Dies ist besonders wichtig, wenn die meisten von uns in der nächsten Zeit gezwungen sind, ihr Home Office zu nutzen.
Weitere Informationen zur Funktionsweise der Cloudimage-Dienste finden Sie unter cloudimage.io