In diesem Artikel erkläre ich, warum Sie Bilder auf Ihren Websites skalieren sollten und wie Sie Google Cloud Functions zusammen mit dem GCP Load Balancer und Cloud CDN nutzen, um Bilder dynamisch in der passenden Größe auszuliefern. So steigern Sie die Performance Ihrer Website, sparen teuren Speicherplatz und verkürzen die Ladezeiten.
Bild generiert mit ChatGPT 5
Nahezu jede große Website skaliert die angezeigten Bilder – und das aus drei wesentlichen Gründen:
- Das Herunterladen großer Bilder verursacht hohen Bandbreitenverbrauch und teure Datentransferkosten.
- Wird ein Bild erst per HTML im Browser herunterskaliert, muss der Client das gesamte Bild laden und anschließend CPU-Zeit für die Skalierung aufwenden – das bremst die Ladezeit Ihrer Website spürbar aus.
- Ohne dynamische Skalierung müssen Sie für Desktop, Mobile, Tablet und E-Mail (Newsletter) jeweils eigene Bildvarianten vorhalten. Da Speicher in der Cloud bei 0,02 $/GB pro Monat beginnt, kann das schnell ins Geld gehen.
Mehr zur Bildoptimierung lesen Sie in Steve Souders’ Buch Even Faster Web Sites, Kapitel 10.
Mit dem Google Cloud Content Delivery Network (CDN) lassen sich statische Inhalte schneller ausliefern, da die Objekte im weltweit verteilten Edge-Netzwerk zwischengespeichert werden.
Die in diesem Artikel vorgestellte Lösung nutzt folgende Dienste:
- Google Cloud Storage – zum Ablegen der Bilder in voller Größe.
- Cloud Function – zum dynamischen Skalieren der Objekte.
- Google Cloud Load Balancer mit aktiviertem Cloud CDN – über ihn rufen die Nutzer die Bilder ab.
Wir richten einen GCP Cloud Load Balancer (LB) ein und konfigurieren ihn so, dass er eine Cloud Function aufruft. Die Function holt das Bild aus Google Cloud Storage (GCS), skaliert es, und der LB liefert das Ergebnis aus und legt es für künftige Anfragen am Edge ab.
So gehen Sie beim Deployment vor
Wir legen einen Google Cloud Storage (GCS) Bucket an und laden alle Objekte (Bilder) in ihrer Originalgröße hoch.
Wir vergeben einen Namen für den Bucket, wählen einen regionalen Standort und klicken auf Erstellen:
Als Beispiel haben wir nasdaq.jpg (das Nasdaq-Gebäude am Times Square, aufgenommen 2019) in seiner Originalgröße von 6,3 MB in den Bucket geladen.
Im nächsten Schritt erstellen wir eine Function. Öffnen Sie die Cloud Functions-Konsole und klicken Sie auf Write a function.
Wenn Sie Cloud Functions zum ersten Mal nutzen, erscheint möglicherweise die Meldung "Cloud Functions API is enabled". Damit werden die Cloud Functions-Funktionen ohne Zusatzkosten in Ihrem Projekt aktiviert.
In diesem Schritt konfigurieren wir die Function:
- Wir nutzen den Inline-Editor.
- Vergeben Sie einen Namen für die Function.
- Wählen Sie die Region – sie muss identisch mit der GCS-Region sein.
- Legen Sie die Runtime fest. In dieser Demo arbeiten wir mit Python.
- Deaktivieren Sie die IAM-Authentifizierung, damit der LB die Function aufrufen kann.
Klicken Sie nun auf Erstellen. Wenn Sie GCP-Dienste zum ersten Mal nutzen, müssen Sie eventuell weitere APIs freischalten:
In diesem Beispiel müssen wir Cloud Build aktivieren, damit der Container für die Function gebaut werden kann.
Jetzt kommt der spannende Teil: Wir schreiben den Code, der die Datei aus GCS lädt, skaliert und das Ergebnis zurückgibt.
Wir wollten herausfinden, ob ChatGPT das vollständig allein erledigt. Nach folgenden Prompts ergaben sich mehrere Iterationen mit dem LLM:
"Write Python code to resize jpg png images to x,y based on the string provided."
"Let’s assume it’s google cloud function that pass the params as query string and the file needs to be loaded from gcs and the result should be sent to a load balancer with the appropriate mime type."
"What should I put in requirements.txt for this code?"
"Now I'm getting ‘Error processing image: module ‘PIL.Image’ has no attribute ‘ANTIALIAS’’"
Das Ergebnis sehen Sie im folgenden Code. In Zeile 9 tragen Sie den Bucket ein, den wir verwenden:
Die requirements.txt sagt Cloud Functions, welche Python-Bibliotheken beim Bau des Containers benötigt werden:
Sobald wir den Code in main.py und die Bibliotheken in requirements.txt aktualisieren, erscheint die Warnung "The specified function (entry point) might not be present in your source code. Please ensure the entry point in your code matches the input field."
Der Grund: Die Function ruft resize_image auf, der Standardname in Cloud Functions ist aber hello_http:
Wir setzen den Function entry point auf resize_image und klicken auf Save and redeploy.
Cloud Functions baut nun den Container für unseren Code. Das kann ein paar Minuten dauern; den Status sehen Sie oben im Dashboard:
Hinweis: Cloud Function ruft eine Funktion auf. Diese verwendet den Compute Engine Default Service Account, der ihr Zugriff auf alle GCS Buckets im Projekt gewährt. Wir gehen darauf in diesem Artikel nicht weiter ein – als Best Practice empfiehlt sich aber ein dedizierter Service Account nach dem Least-Privilege-Prinzip.
Im nächsten Schritt erstellen wir einen Load Balancer. Suchen Sie in der Konsole nach "Load Balancer", öffnen Sie das Load Balancer-Dashboard und klicken Sie auf Create load balancer:
Wir möchten einen globalen, öffentlich erreichbaren Application Load Balancer erstellen. Wählen Sie als Typ Application Load Balancer (HTTP/HTTPS):
Damit Nutzer aus aller Welt auf den Load Balancer zugreifen können, wählen wir Public Facing (external):
Wir entscheiden uns für den globalen Load Balancer, um das Google Cloud CDN zu nutzen, das die skalierten Bilder ohne Zusatzkosten am Edge-Server vorhält.
Anschließend wählen wir die neueste Load-Balancer-Generation und klicken auf Weiter sowie auf Erstellen.
Um diesen Schritt schlank zu halten, richten wir einen HTTP-Frontend-Endpoint für den Load Balancer ein.
Vergeben Sie einen Namen für den Load Balancer und die Frontend-IP.
Klicken Sie auf Backend Configuration und im Feld Backend services & backend buckets auf Create a backend service.
Der Backend-Service teilt dem Load Balancer mit, an welche Ressource die Anfrage weitergeleitet werden soll – in unserem Setup ist das eine Cloud Function.
Vergeben Sie Name und Beschreibung für den Backend-Service und stellen Sie den Backend type auf Serverless network endpoint group.
Scrollen Sie zum Bereich Backends. Klicken Sie unter "New backend" auf "Serverless network endpoint groups" und anschließend auf Create Serverless network endpoint group.
Vergeben Sie einen Namen für den Endpoint und wählen Sie die Region, in der Sie die Cloud Function angelegt haben.
Falls Sie die Function noch nie aufgerufen haben, erscheint folgende Fehlermeldung:
Folgen Sie dem Link in der Fehlermeldung und aktivieren Sie die Cloud Function API:
Kehren Sie zur Seite "Serverless network endpoint" zurück, vergeben Sie einen Namen für den Endpoint, wählen Sie die Region der Function und entscheiden Sie sich für Cloud Run. (Das mag verwirren, aber Cloud Functions heißen mittlerweile Cloud Run Functions und basieren auf derselben Technologie.)
Wählen Sie die Function aus und klicken Sie auf Erstellen.
Auf der Backend-Seite konfigurieren wir die Cache-Einstellungen für Cloud CDN:
Wir können das CDN so einstellen, dass es die Antwort für eine bestimmte Zeit (1 Stunde laut Zeile 54 im Skript) oder länger zwischenspeichert.
Wichtig zu wissen: Das CDN arbeitet mit einem Warm Cache – nur häufig angefragte Inhalte bleiben im Cache. Wenn Sie eine Cache-Dauer von einem Jahr festlegen, die Inhalte aber nur selten abgerufen werden, lädt das CDN sie nach einiger Zeit erneut von der Quelle (also der Function).
Beachten Sie die Logging-Funktion (oben mit dem Pfeil markiert). Sie ist hervorragend zum Debuggen und für die Nutzungsanalyse, aber kostenintensiv (512 $ pro 1 TB Logs).
Bei vielen Anfragen können Sie die Sample rate auf 0.01 setzen, sodass nur jede 100. Anfrage geloggt wird.
Scrollen wir weiter zu Security:
Standardmäßig aktiviert Google Cloud Armor, die Web Application Firewall (WAF), für unser Backend. Da dafür Zusatzkosten anfallen und es sich hier nur um eine Demo handelt, deaktivieren wir die WAF: Klicken Sie auf Cloud Armor backend security policy und stellen Sie auf None um.
Klicken Sie nun auf Erstellen und im Load Balancer-Dashboard erneut auf Erstellen.
Hinweis: Das Anlegen und Aktualisieren eines Load Balancers in GCP kann bis zu 15 Minuten dauern, bis die Änderungen vollständig propagiert sind.
Sobald der Load Balancer bereit ist, klicken Sie auf seinen Namen und sehen die generierte IP:
Wir rufen diese IP auf und übergeben den Bildnamen sowie Höhe und Breite:
http://34.49.21.153/?image=nasdaq.jpg&size=500x600
Das Ergebnis: Statt einer 6,5 MB großen Datei erhalten wir ein skaliertes Bild mit nur 63 KB.
Meine Aufgabe ist es, Kunden auf ihrem Weg in die Cloud zu begleiten. Schauen Sie unter doit.com/services vorbei und entdecken Sie, was wir für Sie tun können.