Übersicht

Bilder sind normalerweise die „schwersten“ Komponenten einer Webseite, sowohl was die Anzahl der Byte als auch die Anzahl der HTTP-Anfragen angeht. Die Optimierung von Bildern auf Ihrer Website ist entscheidend, um das Nutzererlebnis zu steigern, die Bereitstellungskosten zu senken und Ihre Position im Suchmaschinenranking zu verbessern. Die Metrik Largest Contentful Paint im Suchranking-Algorithmus von Google wird beispielsweise stark davon beeinflusst, wie sehr Sie die Bilder auf Ihrer Website optimieren.

Architektur-Entscheidungen

Eine Bildoptimierungslösung kann auf verschiedene Arten konzipiert werden, je nach Ihren Anforderungen in Bezug auf Kosten, Flexibilität und Leistung. Bei der Entwicklung müssen Sie die folgenden technischen Entscheidungen treffen:

  • Welche Bildtransformationen sind erforderlich? Formatierung, Ändern der Größe, Zuschneiden usw.?
  • Wo entscheiden wir, welche Transformation für eine bestimmte Bildanfrage angewendet werden soll? Im Frontend auf der Clientseite (statisches, responsives Design usw.), auf der Serverseite (basierend auf dem Anfrageinhalt wie dem Gerät) oder eine Kombination aus beidem?
  • Wo führen wir die Transformation durch? An einem zentralen Ort oder verteilt?
  • Wann führen wir die Transformation durch? Jedes Mal neu oder speichern wir transformierte Bilder für eine kurze Zeit? Erfolgt die Ausführung synchron oder asynchron?

Eine weitere wichtige Entscheidung ist, ob Sie die Lösung mithilfe von AWS-Services erstellen oder eine von einem Drittanbieter verwaltete Lösung kaufen möchten.

Häufige Anwendungsfälle

Vom Kunden verwaltete Lösung auf Basis von CloudFront, S3 und Lambda

Der häufigste Anwendungsfall für die Bildoptimierung erfordert eine automatische Formatierung, die auf den Funktionen des Benutzerbrowsers basiert und dem Frontend die Möglichkeit gibt, die Größe des Bildes zu ändern. Beliebte Frameworks für die Webentwicklung wie Next.JS bieten responsive Bildkomponenten, mit denen die Bildgröße automatisch anhand des Geräte-Viewports ausgewählt werden kann. Die empfohlene Architektur für diesen gängigen Anwendungsfall wird in der folgenden Abbildung erklärt:

  1. Der Benutzer sendet eine HTTP-Anfrage für ein Bild mit bestimmten Transformationen wie Kodierung und Größe. Die Transformationen sind in der URL kodiert, genauer gesagt als Abfrageparameter. Eine Beispiel-URL würde so aussehen: https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200.
  2. Die Anfrage wird von einem CloudFront-Edge-Standort in der Nähe verarbeitet, der die beste Leistung bietet. Bevor die Anfrage weitergeleitet wird, wird eine CloudFront-Funktion für ein Betrachter-Anfrageereignis ausgeführt, um die Anfrage-URL umzuschreiben. CloudFront-Funktionen ist ein Feature von CloudFront, mit dem Sie einfache Funktionen in JavaScript für hochskalierte, latenzempfindliche CDN-Anpassungen schreiben können. In unserer Architektur schreiben wir die URL um, um die angeforderten Transformationen zu validieren, und normalisieren die URL, indem wir Transformationen ordnen und in Kleinbuchstaben konvertieren, was die Cache-Trefferquote erhöht. Wenn eine automatische Transformation angefordert wird, entscheidet das Feature auch, welche am besten angewendet werden soll. Wenn der Benutzer beispielsweise mithilfe der Anweisung format=auto das beste Bildformat abfragt (JPEG, WebP oder AVIF), wählt CloudFront-Funktionen das beste Format auf der Grundlage des in der Anfrage enthaltenen Accept-Headers aus.
  3. Wenn das angeforderte Bild bereits in CloudFront zwischengespeichert ist, erfolgt ein Cache-Treffer und das Bild wird aus dem CloudFront-Cache zurückgegeben. Um die Cache-Trefferquote zu erhöhen, aktivieren wir Origin Shield, eine Funktion von CloudFront, die als zusätzliche Cache-Ebene vor dem Ursprung fungiert, um diesen weiter von Anfragen zu entlasten. Befindet sich das Bild nicht im CloudFront-Cache, wird die Anfrage an einen S3-Bucket weitergeleitet, der zum Speichern der transformierten Bilder erstellt wird. Wenn das angeforderte Bild bereits transformiert und in S3 gespeichert ist, wird es einfach in CloudFront bereitgestellt und zwischengespeichert.
  4. Anderenfalls reagiert S3 mit einem 403-Fehlercode, der vom Origin Failover von CloudFront erkannt wird. Dank dieser nativen Funktion versucht, CloudFront dieselbe URL noch einmal aufzurufen, diesmal jedoch mithilfe des sekundären Ursprungs, der auf der URL der Lambda-Funktion basiert. Wenn die Lambda-Funktion aufgerufen wird, lädt sie das Originalbild aus einem anderen S3-Bucket herunter, in dem Originalbilder gespeichert werden, transformiert es mithilfe der Sharp-Bibliothek, speichert das transformierte Bild in S3 und stellt es dann über CloudFront bereit, wo es für zukünftige Anfragen zwischengespeichert wird.


Folgen Sie den Schritten in diesem Blog, um diese Lösung bereitzustellen. Darüber hinaus wird im Blog gezeigt, wie Sie sie in Kombination mit der Bildkomponente von Next.JS verwenden können. Die Lösung gibt Ihnen die Möglichkeit, die Speicherung transformierter Bilder in S3 zu deaktivieren, um für die Bereitstellung transformierter Bilder ausschließlich auf den CloudFront-Cache zu setzen.

Verwaltete Lösungen von Drittanbietern

Wenn Sie es vorziehen, eine von einem Drittanbieter verwaltete Bildoptimierungslösung zu verwenden, können Sie im AWS Marketplace verfügbare Lösungen wie Cloudinary, ImageKit.io oder Cloudimage in Betracht ziehen. CloudFront wird in den drei Lösungen entweder direkt oder per Integration verwendet. Das ist nützlich, wenn Sie Ihre eigene CloudFront-Distribution verwalten möchten. Auf Bildoptimierung spezialisierte Drittanbieter wie diese können erweiterte SaaS-Funktionen bereitstellen, die allerdings mit zusätzlichen Kosten verbunden sind.

Ressourcen

War diese Seite hilfreich?

 Feedback