Content Delivery Networks (CDNs) für Bilder eignen sich hervorragend, um Bilder für das Web zu optimieren. Wenn Sie Ihre Website auf ein Bild-CDN umstellen, können Sie die Dateigröße von Bildern um 40–80 % reduzieren. In den meisten Fällen können Ihre Bilder so besser optimiert werden als mit einem Skript zur Bildoptimierung während der Erstellung.
Was ist ein Bild-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 die auf Ihrer Website verwendeten Bilder und deren Bearbeitung vorstellen. Bei Bildern, die von 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 Variationen eines Bildes für verschiedene Anwendungsfälle erstellen.
Bild-CDNs unterscheiden sich von Skripts zur Bildoptimierung während der Build-Zeit, da sie bei Bedarf neue Versionen von Bildern erstellen. Daher eignen sich CDNs im Allgemeinen besser als Build-Skripts, um Images zu erstellen, die stark auf einzelne Clients zugeschnitten sind.
Wie Bild-CDNs URLs verwenden, um Optimierungsoptionen anzugeben
Bild-URLs, die von Bild-CDNs verwendet werden, enthalten wichtige Informationen zu einem Bild und den Transformationen und Optimierungen, die darauf angewendet werden sollen. Die URL-Formate variieren je nach verwendetem Bild-CDN, aber im Großen und Ganzen haben sie alle ähnliche Funktionen. Hier sind einige der häufigsten Funktionen:
Ursprung
Ein Bild-CDN kann auf Ihrer eigenen Domain oder der Domain Ihres Bild-CDNs gehostet werden. 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, das Bild-CDN zu wechseln, da keine URL-Änderungen erforderlich sind.
Im vorherigen Beispiel wird die Domain des Bild-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. Diese Funktion wird häufig erreicht, indem die vollständige URL des vorhandenen Bildes in die URL für das vom Bild-CDN generierte Bild eingefügt wird. Beispiel: 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.
Das angeforderte Dateiformat (im Beispiel JPG) stimmt möglicherweise nicht mit dem zurückgegebenen Bilddateiformat (im Beispiel WebP) überein. Der HTTP-Header content-type teilt dem Browser mit, in welchem Format die URL vorliegt, damit er sie entsprechend verarbeiten kann. Das kann zu Verwirrung führen, wenn die Datei auf dem Laufwerk gespeichert und von einem anderen Programm verwendet wird, das erwartet, dass das Format mit der Dateiendung übereinstimmt.
Eine weitere weit verbreitete Methode zum Hochladen von Bildern in ein Bild-CDN besteht darin, sie in einer HTTP-POST-Anfrage an die API des Bild-CDNs zu senden.
Sicherheitsschlüssel
Ein Sicherheitsschlüssel verhindert, dass andere Personen neue Versionen Ihrer Bilder 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. Ihr Image-CDN kümmert sich um die Details der Generierung und Verfolgung von Sicherheitsschlüsseln für Sie.
Transformationen
Bild-CDNs bieten Dutzende und in einigen Fällen Hunderte von verschiedenen Bildtransformationen. Diese Transformationen werden im URL-String angegeben. Es gibt keine Einschränkungen für die gleichzeitige Verwendung mehrerer Transformationen. Für die Webleistung sind die wichtigsten Bildtransformationen Größe, Pixeldichte, Format und Komprimierung. Diese Transformationen sind der Grund dafür, dass die Bilddateien Ihrer Website durch den Wechsel zu einem Bild-CDN in der Regel kleiner werden.
Da es für Leistungstransformationen in der Regel eine objektiv beste Einstellung gibt, unterstützen einige Bild-CDNs einen „automatischen“ Modus für diese Transformationen. Anstatt beispielsweise anzugeben, dass Bilder in das WebP-Format umgewandelt werden sollen, können Sie das CDN automatisch das optimale Format auswählen und bereitstellen lassen. Ein Bild-CDN kann unter anderem anhand der folgenden Signale die beste Methode zur Transformation eines Bildes ermitteln:
- Client Hints (z. B. Breite des Darstellungsbereichs, DPR und Bildbreite)
- Der
Save-Data-Header - Der Anfrageheader User-Agent
- Die Network Information API
Das Bild-CDN kann 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 die Fachkenntnisse von Bild-CDNs bei der Optimierung von Bildern nutzen können, ohne Ihren Code ändern zu müssen, um neue Technologien zu übernehmen, wenn das Bild-CDN diese unterstützt.
Arten von Bild-CDNs
Es gibt zwei Hauptkategorien von Bild-CDNs: selbstverwaltete und von Drittanbietern verwaltete.
Selbstverwaltete Bild-CDNs
Selbstverwaltete CDNs können eine gute Wahl für Websites mit Entwicklern sein, die ihre eigene Infrastruktur verwalten möchten.
- Thumbor ist das beliebteste selbstverwaltete Bild-CDN. Es ist Open Source und kostenlos, hat aber weniger Funktionen als die meisten kommerziellen CDNs und die Dokumentation ist etwas eingeschränkt. Zu den Websites, die Thumbor verwenden, gehören Wikipedia, Square und 99designs. Eine Anleitung zur Einrichtung finden Sie unter Thumbor-Image-CDN installieren.
- Fantasievoll
- Imagor
CDNs von Drittanbietern für Bilder
Drittanbieter-Bild-CDNs stellen Bild-CDNs als Dienst bereit. Genauso wie Cloud-Anbieter Server und andere Infrastruktur gegen eine Gebühr bereitstellen, bieten Bild-CDNs Bildoptimierung und -bereitstellung gegen eine Gebühr an. Da die zugrunde liegende Technologie von Drittanbieter-Bild-CDNs verwaltet wird, können Sie in der Regel recht schnell mit der Verwendung beginnen. Eine vollständige Migration für eine große Website kann jedoch länger dauern. Die Preise für Bild-CDNs von Drittanbietern richten sich in der Regel nach Nutzungsstufen. Die meisten Bild-CDNs bieten entweder eine kostenlose Stufe oder eine kostenlose Testversion an, damit Sie das Produkt ausprobieren können.
Bild-CDN auswählen
Es gibt viele gute Optionen für Bild-CDNs. Einige haben mehr Funktionen als andere, aber alle können Ihnen helfen, Bytes bei Ihren Bildern zu sparen und so Ihre Seiten schneller zu laden. Neben den Feature-Sets sind weitere Faktoren, die bei der Auswahl eines Bild-CDNs berücksichtigt werden sollten, die Kosten, der Support, die Dokumentation und die Einfachheit der Einrichtung oder Migration.
Auswirkungen auf den Largest Contentful Paint (LCP)
Bilder sind auf vielen Websites ein wichtiger Bestandteil der Nutzererfahrung und daher ein wichtiger Faktor für den Largest Contentful Paint einer Website. Hier sind einige Dinge, die du beachten solltest, wenn du ein Bild-CDN verwendest:
- Bilder, die von CDNs bereitgestellt werden, können von einem ursprungsübergreifenden Server stammen, was die Verbindungsaufbauzeit Ihrer Website erhöhen kann. Versuchen Sie nach Möglichkeit, ein Image-CDN zu verwenden, das über den primären Ursprung weitergeleitet wird, damit Sie keine zusätzlichen Ursprünge hinzufügen, mit denen der Browser eine Verbindung herstellen muss. Dies hat denselben Effekt wie das Selbsthosten von Bildern auf dem primären Ursprung.
- Verwenden Sie für das LCP-Bildelement den
fetchpriority-Attributwert"high", damit der Browser das Bild so schnell wie möglich laden kann. - Wenn ein Bild im ursprünglichen HTML-Code nicht sofort sichtbar ist, kannst du einen
rel=preload-Hinweis für das LCP-Kandidatenbild verwenden, damit der Browser dieses Bild im Voraus laden kann. - Wenn Sie keinen Proxy über Ihren Ursprung verwenden können und der Browser erst später beim Seitenaufbau weiß, welches Bild geladen werden soll, richten Sie so früh wie möglich eine Verbindung zum ursprungsübergreifenden Bild-CDN ein, um die Phase des Ladens von Ressourcen für potenzielle LCP-Kandidatenbilder zu verkürzen.