Content Delivery Networks (CDNs) für Bilder eignen sich hervorragend zur Optimierung von Bildern für das Web. Wenn Sie Ihre Website auf ein Bild-CDN umstellen, können Sie die Größe der Bilddateien um 40 bis 80% senken. In den meisten Fällen lassen sich Ihre Bilder besser optimieren als mit einem Skript zur Bildoptimierung für die Build-Erstellung.
Was ist ein Image-CDN?
Bild-CDNs sind auf das Transformieren, Optimieren und Bereitstellen 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 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 einzelne Clients angepasst sind als Build-Skripts.
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 verwendetem Bild-CDN, aber auf übergeordneter Ebene haben sie alle ähnliche Funktionen. Hier sind einige der am häufigsten verwendeten Funktionen.
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, eine benutzerdefinierte Domain gegen eine Gebühr zu verwenden. Wenn Sie Ihre eigene Domain verwenden, ist es später einfacher, Bild-CDNs zu wechseln, da keine URL-Änderungen erforderlich sind.
Im vorherigen 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 generierte Bild aufgenommen. Die URL kann beispielsweise 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.
Das angeforderte Dateiformat (im Beispiel JPG) entspricht möglicherweise nicht dem zurückgegebenen Bilddateiformat (im Beispiel WebP). Der HTTP-Header content-type teilt dem Browser mit, in welchem Format die URL vorliegt, damit sie die URL entsprechend verarbeiten kann. Dies kann Verwirrung stiften, wenn die Datei auf der Festplatte gespeichert und von einem anderen Programm verwendet wird, das erwartet, dass das Format mit der Dateiendung übereinstimmt.
Eine weitere weithin unterstützte Methode zum Hochladen von Bildern in ein Bild-CDN besteht darin, sie in einer 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 dieses Feature aktiviert ist, benötigt jede neue Version eines Images einen eindeutigen Sicherheitsschlüssel.
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 übernimmt die Details zum Generieren und Tracking von Sicherheitsschlüsseln für Sie.
Transformationen
Bild-CDNs bieten Dutzende und manchmal Hunderte verschiedene Bildtransformationen. Diese Transformationen werden im URL-String angegeben und es gibt keine Einschränkungen für die gleichzeitige Verwendung mehrerer Transformationen. Für die Leistung im Web sind die wichtigsten Bildtransformationen Größe, Pixeldichte, Format und Komprimierung. Diese Transformationen sind der Grund dafür, dass ein Wechsel zu einem Bild-CDN die Bilddateien Ihrer Website in der Regel kleiner macht.
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önnen Sie das optimale Format automatisch vom CDN auswählen und bereitstellen lassen. Ein Bild-CDN kann unter anderem anhand der folgenden Signale ermitteln, wie ein Bild am besten transformiert werden kann:
- Client-Hinweise (z. B. Breite des Darstellungsbereichs, DPR 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 Fachwissen von Bild-CDNs zur Optimierung von Bildern nutzen können, ohne Ihren Code auf neue Technologien umstellen zu müssen, wenn das Bild-CDN diese unterstützt.
Typen von Bild-CDNs
Es gibt zwei Hauptkategorien von Bild-CDNs: selbstverwaltet und von Drittanbietern verwaltet.
Selbstverwaltete Bild-CDNs
Selbstverwaltete CDNs können eine gute Wahl für Standorte mit Engineering-Mitarbeitern sein, die sich mit der Verwaltung ihrer eigenen Infrastruktur vertraut machen.
- Thumbor ist das beliebteste selbstverwaltete Image-CDN. Sie ist Open-Source-Software und kostenlos nutzbar, hat aber weniger Funktionen als die meisten kommerziellen CDNs und die Dokumentation ist etwas begrenzt. Zu den Websites, die dafür den Daumen verwenden, gehören Wikipedia, Square und 99designs. Eine Anleitung zur Einrichtung findest du unter Thubor-Image-CDN installieren.
- Fantasievoll
- Imagor
Bild-CDNs von Drittanbietern
Bild-CDNs von Drittanbietern stellen Bild-CDNs als Dienst bereit. So wie Cloud-Anbieter Server und andere Infrastruktur gegen Gebühr zur Verfügung stellen, bieten Image-CDNs die Bildoptimierung und -bereitstellung gegen eine Gebühr an. Da Image-CDNs von Drittanbietern die zugrunde liegende Technologie aufrechterhalten, können Sie in der Regel relativ schnell mit der Verwendung beginnen, auch wenn eine vollständige Migration für eine große Website länger dauern kann. Die Preise für Image-CDNs von Drittanbietern richten sich in der Regel nach Nutzungsstufen. Die meisten Image-CDNs bieten entweder eine kostenlose Stufe oder eine kostenlose Testversion an, damit Sie das Produkt testen können.
Bild-CDN auswählen
Es gibt viele gute Optionen für Bild-CDNs. Einige bieten mehr Funktionen als andere, aber jede davon kann Ihnen helfen, Byte bei Ihren Bildern zu sparen und Ihre Seiten damit schneller zu laden. Neben den Features sind weitere Faktoren, die bei der Auswahl eines Image-CDN zu berücksichtigen sind, Kosten, Support, Dokumentation und einfache Einrichtung oder Migration.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder sind auf vielen Websites ein wichtiger Bestandteil der Nutzererfahrung. Daher sind sie ein wichtiger Faktor beim Largest Contentful Paint einer Website. 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. Dadurch kann sich die Einrichtungszeit für die Verbindung Ihrer Website verlängern. 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, zu denen der Browser eine Verbindung herstellen kann. Dies hat denselben Effekt wie das Selbsthosting von Images im primären Ursprung.
- Sie können den
fetchpriority-Attributwert"high"für das LCP-Bildelement 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 vorab laden kann. - Wenn Sie nicht über Ihren Ursprung weitergeleitet werden 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 Ladephase der Ressourcen für potenzielle LCP-Kandidatenbilder zu verkürzen.