Vorteile von Bild-CDN
Content Delivery Networks (CDNs) für Bilder eignen sich hervorragend zur Optimierung von Bildern. Der Wechsel zu einem Bild-CDN kann zu Einsparungen von 40 bis 80% bei der Bilddateigröße führen. Theoretisch können dieselben Ergebnisse nur mit Build-Skripts erzielt werden, dies ist jedoch in der Praxis selten.
Was ist ein Image-CDN?
Bild-CDNs sind auf die Transformation, Optimierung und Bereitstellung von Bildern spezialisiert. Sie können sie sich auch als APIs für den Zugriff auf und die Bearbeitung der Bilder auf Ihrer Website vorstellen. Bei Bildern, die aus einem Bild-CDN geladen werden, gibt eine Bild-URL nicht nur an, welches Bild geladen werden soll, sondern auch Parameter wie Größe, Format und Qualität. So können Sie ganz einfach Varianten eines Bildes für verschiedene Anwendungsfälle erstellen.
Image-CDNs unterscheiden sich von Skripts zur Bildoptimierung beim Erstellen dadurch, dass sie bei Bedarf neue Versionen von Images erstellen. Daher eignen sich CDNs im Allgemeinen besser zum Erstellen von Images, die stark an jeden einzelnen Client angepasst werden als Build-Scripts.
So werden in Bild-CDNs Optimierungsoptionen mithilfe von URLs angegeben
Von Bild-CDNs verwendete Bild-URLs vermitteln wichtige Informationen zu einem Bild sowie die Transformationen und Optimierungen, die darauf angewendet werden sollten. URL-Formate variieren je nach Bild-CDN, aber auf übergeordneter Ebene haben sie alle ähnliche Funktionen. Sehen wir uns einige der am häufigsten verwendeten Funktionen an.
Ursprung
Ein Bild-CDN kann sich in Ihrer eigenen Domain oder in der Domain Ihres Bild-CDN befinden. Bild-CDNs von Drittanbietern bieten in der Regel die Möglichkeit, gegen eine Gebühr eine benutzerdefinierte Domain zu verwenden. Wenn Sie Ihre eigene Domain verwenden, ist es später einfacher, die Bild-CDNs zu wechseln, da keine URL-Änderungen erforderlich sind.
Im obigen Beispiel wird die Domain des Image-CDN ("example-cdn.com") mit einer personalisierten Subdomain anstelle einer benutzerdefinierten Domain verwendet.
Bild
Bild-CDNs können in der Regel so konfiguriert werden, dass Bilder bei Bedarf automatisch von ihren vorhandenen Speicherorten abgerufen werden. Dazu wird häufig die vollständige URL des vorhandenen Bildes in die URL für das vom Bild-CDN erzeugte Bild aufgenommen. Die URL könnte zum Beispiel so aussehen: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Mit dieser URL wird das Bild unter https://flowers.com/daisy.jpg abgerufen und optimiert.
Eine weitere weithin unterstützte Methode zum Hochladen von Bildern in ein Bild-CDN besteht darin, die Bilder über eine HTTP-POST-Anfrage an die API des Bild-CDN zu senden.
Sicherheitsschlüssel
Ein Sicherheitsschlüssel verhindert, dass andere Personen neue Versionen Ihrer Images erstellen. Wenn diese Funktion aktiviert ist, ist für jede neue Version eines Images ein eindeutiger Sicherheitsschlüssel erforderlich. Wenn jemand versucht, die Parameter der Bild-URL zu ändern, aber keinen gültigen Sicherheitsschlüssel angibt, kann er keine neue Version erstellen. Das CDN für Bilder übernimmt die Generierung und das Tracking von Sicherheitsschlüsseln für Sie.
Transformationen
Bild-CDNs bieten Dutzende und teilweise Hunderte verschiedener Bildtransformationen. Diese Transformationen werden über den URL-String angegeben und es gibt keine Einschränkungen bei der gleichzeitigen Verwendung mehrerer Transformationen. Im Hinblick auf die Leistung im Web sind die wichtigsten Bildtransformationen Größe, Pixeldichte, Format und Komprimierung. Diese Transformationen sind der Grund, warum der Wechsel zu einem Bild-CDN in der Regel zu einer deutlichen Reduzierung der Bildgröße führt.
Da es in der Regel eine objektiv beste Einstellung für Leistungstransformationen gibt, unterstützen einige Bild-CDNs den "automatischen" Modus für diese Transformationen. Anstatt beispielsweise anzugeben, dass Bilder in das WebP-Format transformiert werden sollen, könnten Sie zulassen, dass das CDN automatisch das optimale Format auswählt und bereitstellt. Zu den Signalen, mit denen ein Bild-CDN die beste Möglichkeit zur Umwandlung eines Bildes ermitteln kann, gehören:
- Client-Hinweise, z. B. Breite des Darstellungsbereichs, DVR und Bildbreite
- Der
Save-Data-Header - Der User-Agent-Anfrageheader
- Die Network Information API
Das CDN für Bilder könnte beispielsweise AVIF für einen Chrome-Browser, WebP für einen Edge-Browser und JPEG für einen sehr alten Browser bereitstellen. Automatische Einstellungen sind beliebt, weil Sie damit das umfassende Fachwissen von Bild-CDNs zum Optimieren von Bildern nutzen können, ohne dass Codeänderungen zur Implementierung neuer Technologien erforderlich sind, sobald diese vom Bild-CDN unterstützt werden.
Typen von Bild-CDNs
Image-CDNs lassen sich in zwei Kategorien unterteilen: selbstverwaltet und von Drittanbietern verwaltet.
Selbstverwaltete Bild-CDNs
Selbstverwaltete CDNs sind eine gute Wahl für Standorte mit Engineering-Mitarbeitern, die sich mit der Verwaltung ihrer eigenen Infrastruktur auskennen.
- Thumbor ist das beliebteste selbstverwaltete Image-CDN. Obwohl es Open Source ist und kostenlos genutzt werden kann, hat es in der Regel weniger Funktionen als die meisten kommerziellen CDNs und seine Dokumentation ist etwas begrenzt. Wikipedia, Square und 99designs sind drei Websites, die Thumbor nutzen. Eine Anleitung zur Einrichtung findest du im Beitrag CDN für Thumbor Image installieren.
- Fantasievoll
- Imagor
Bild-CDNs von Drittanbietern
Bild-CDNs von Drittanbietern stellen Bild-CDNs als Dienst bereit. So wie Cloud-Anbieter Server und andere Infrastrukturen gegen Gebühr zur Verfügung stellen, bieten Image-CDNs gegen Gebühr die Bildoptimierung und -bereitstellung. Da Bild-CDNs von Drittanbietern die zugrunde liegende Technologie beibehalten, sind die ersten Schritte relativ einfach und können in der Regel innerhalb von 10 bis 15 Minuten erledigt werden. Eine vollständige Migration einer großen Website kann jedoch weitaus länger dauern. Die Preise für Bild-CDNs von Drittanbietern richten sich in der Regel nach Nutzungsstufen. Die meisten Bild-CDNs bieten Ihnen entweder eine kostenlose Stufe oder eine kostenlose Testversion an, damit Sie das Produkt testen können.
Image-CDN auswählen
Es gibt viele gute Optionen für Bild-CDNs. Einige bieten mehr Funktionen als andere, aber alle helfen Ihnen wahrscheinlich, Byte bei Ihren Bildern zu sparen und so Ihre Seiten schneller zu laden. Neben den Funktionen sind weitere Faktoren, die bei der Auswahl eines CDN für Bilder berücksichtigt werden sollten, Kosten, Support, Dokumentation und einfache Einrichtung bzw. Migration.
Es kann auch hilfreich sein, die Tools selbst auszuprobieren, bevor Sie eine Entscheidung treffen. Unten finden Sie Codelabs mit Anweisungen, wie Sie schnell mit mehreren Bild-CDNs starten können.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder sind auf vielen Websites ein wichtiger Bestandteil der Nutzererfahrung und wirken sich daher auf die Leistung von Websites im Hinblick auf Largest Contentful Paint aus. Hier sind einige Dinge, die Sie beachten sollten, wenn Sie sich für die Verwendung eines Image-CDN entscheiden:
- Von CDNs bereitgestellte Bilder können von einem ursprungsübergreifenden Server stammen, wofür zusätzliche Verbindungszeit erforderlich ist. Versuchen Sie nach Möglichkeit, ein Bild-CDN zu verwenden, das über den primären Ursprung weitergeleitet wird, damit Sie keine zusätzlichen Ursprünge hinzufügen, zu denen der Browser eine Verbindung herstellen kann. Dies hat denselben Effekt wie das Selbsthosting von Bildern im primären Ursprung.
- Sie können für das LCP-Bildelement den
fetchpriority-Attributwert"high"verwenden, damit der Browser mit dem Laden des Bildes so schnell wie möglich beginnen kann. - Wenn ein Bild im ersten HTML-Code nicht sofort sichtbar ist, sollten Sie einen
rel=preload-Hinweis für Ihr LCP-Kandidatenbild verwenden, damit der Browser dieses Bild im Voraus laden kann. - Wenn keine Proxy-Weiterleitung über Ihren Ursprung möglich ist und das genaue Bild, das geladen werden soll, erst später beim Seitenaufbau bekannt ist, sollten Sie so früh wie möglich eine Verbindung zum ursprungsübergreifenden Bild-CDN einrichten, um die Ladephase der Ressource des möglichen LCP-Kandidatenbilds Ihrer Seite zu verkürzen.
Image-CDNs sind unverzichtbare Tools, die den Aufwand für die manuelle Bildoptimierung eliminieren und sollten in Betracht gezogen werden. Dabei müssen wie immer einige Nachteile berücksichtigt werden. Wenn Sie die LCP-Kandidaten-Images Ihrer Website im Auge behalten und gegebenenfalls Hinweise hinzufügen, kann die Latenz dieser Schlüsselanfragen verringert werden.