Content Delivery Networks (CDNs) für Bilder eignen sich hervorragend zur im Web. Die Umstellung Ihrer Website auf ein CDN für Bilder kann zu einem 40–80% Einsparungen im Bild und in den meisten Fällen eine bessere Bildoptimierung als mit Skript zur Image-Optimierung bei der Erstellung.
Was ist ein Bild-CDN?
Bild-CDNs sind auf die Transformation, Optimierung und Bereitstellung von Bildern spezialisiert. Ich Sie können sie sich auch als APIs für den Zugriff auf und die Manipulation der Bilder auf Ihrer Website. Bei Bildern, die von einem Bild-CDN geladen wurden, gibt eine Bild-URL an, dass nur 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.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Bild-CDNs unterscheiden sich von Skripten zur Bildoptimierung bei der Erstellung darin, dass sie und erstellen bei Bedarf neue Versionen von Bildern. Daher sind CDNs im Allgemeinen eignet sich besser zum Erstellen von Bildern, die stark an individuelle als Build-Skripts.
Wie Bild-CDNs mithilfe von URLs Optimierungsoptionen angeben
Von Bild-CDNs verwendete Bild-URLs vermitteln wichtige Informationen zu einem Bild und Transformationen und Optimierungen, die darauf angewendet werden sollen. URL-Formate variieren je nach verwendetem CDN-Bild. Auf übergeordneter Ebene haben alle mit ähnlichen Funktionen. Hier sind einige der gängigsten Funktionen.
<ph type="x-smartling-placeholder">
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 für ein Gebühr. Wenn Sie Ihre eigene Domain verwenden, ist es später einfacher, sind keine Änderungen an der URL erforderlich.
Im vorherigen Beispiel wird die CDN-Domain des Bildes ("example-cdn.com") mit einem Parameter personalisierte Subdomain statt einer benutzerdefinierten Domain.
Bild
Bild-CDNs können normalerweise so konfiguriert werden, dass Bilder automatisch von ihrem
vorhandenen Standorten, wenn sie gebraucht werden. Diese Fähigkeit wird oft durch
Vollständige URL des bestehenden Bildes in die URL des Bildes einfügen
die vom Bild-CDN generiert wurden. Die URL sieht beispielsweise so aus:
Dies: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Diese URL würde das Bild unter https://flowers.com/daisy.jpg abrufen und optimieren.
Das angeforderte Dateiformat (in diesem Beispiel JPG) ist möglicherweise nicht dasselbe wie das
zurückgegebenes Bilddateiformat (im Beispiel WebP). Das content-type-HTTP
-Header teilt dem Browser mit, in welchem Format die URL vorliegt, damit er die URL verarbeiten kann.
angemessen. Dies kann zu Verwirrung führen, wenn die Datei auf der Festplatte gespeichert ist und von
ein anderes Programm erwartet,
das mit der Dateiendung übereinstimmt.
Eine weitere weit verbreitete Methode zum Hochladen von Bildern in ein Bild-CDN ist das Senden der Bilder in einer HTTP-POST-Anfrage an die CDN-API des Bildes.
Sicherheitsschlüssel
Mit einem Sicherheitsschlüssel wird verhindert, dass andere Personen neue Versionen Ihrer Images erstellen. Wenn diese Funktion aktiviert ist, erfordert jede neue Version eines Bildes eine eindeutige Sicherheitsschlüssel.
Wenn jemand versucht, die Parameter der Bild-URL zu ändern, keinen gültigen Sicherheitsschlüssel bereitstellt, kann er keinen neuen Version. Ihr Bild-CDN kümmert sich um die Details beim Generieren und Tracking Sicherheitsschlüssel für Sie.
Transformationen
Bild-CDNs bieten Dutzende, in einigen Fällen Hunderte von unterschiedlichen Bildern Transformationen. Diese Transformationen werden im URL-String angegeben. Es gibt keine Einschränkungen für die gleichzeitige Verwendung mehrerer Transformationen. Für die Leistung im Web sind die wichtigsten Bildtransformationen Größe, Pixel Dichte, Format und Komprimierung. Diese Transformationen sind der Grund, Durch den Wechsel zu einem CDN für Bilder werden die Bilddateien Ihrer Website in der Regel kleiner.
In der Regel gibt es eine objektiv beste Einstellung für die Leistung. unterstützen einige Bild-CDNs eine automatische für diese Nutzer Transformationen. Anstatt beispielsweise anzugeben, dass Bilder transformiert werden, auf das WebP-Format umstellen, können Sie das CDN automatisch das des optimalen Formats. Ein Bild-CDN kann die beste Methode zum Transformieren eines Bildes bestimmen unter anderem anhand der folgenden Signale:
- Kundenhinweise (z. B. Breite des Darstellungsbereichs, DPR und Bildbreite)
- Die
Save-DataÜberschrift - Den User-Agent Anfrageheader
- Network Information API
Beispielsweise kann das CDN-Bild AVIF an einen Chrome-Browser und WebP an einen Edge-Server bereitstellen. und JPEG in einem sehr alten Browser ändern. Automatische Einstellungen sind beliebt, weil sie können Sie Bild-CDNs zur Optimierung von Bildern, Sie Ihren Code für neue Technologien ändern müssen, wenn das Bild-CDN beginnt zu unterstützen.
Arten von Bild-CDNs
Es gibt zwei Hauptkategorien von Bild-CDNs: selbstverwaltete und von Drittanbietern verwaltet werden.
Selbstverwaltete Bild-CDNs
Selbstverwaltete CDNs sind eine gute Wahl für Standorte mit Engineering-Mitarbeitern, die ihre eigene Infrastruktur pflegen können.
- Thumbor ist die beliebteste selbstverwaltete App. Bild-CDN. Es ist eine Open-Source-Software und kostenlos nutzbar, bietet aber weniger Funktionen als der meisten kommerziellen CDNs, und die Dokumentation ist etwas begrenzt. Websites, die diesen Daumen verwenden, sind z. B. Wikipedia, Quadratformat, und 99designs. So installieren Sie das Thumbor-Image-CDN Anleitung zur Einrichtung.
- Fantasievoll
- Imagor
Drittanbieter-Bild-CDNs
Bild-CDNs von Drittanbietern stellen Bild-CDNs als Dienst bereit. Genauso wie Cloud-Anbieter stellen Server und andere Infrastruktur gegen Gebühr zur Verfügung, Bild-CDNs die Bildoptimierung und Bereitstellung gegen eine Gebühr. Da Drittanbieter-Bild CDNs verwalten die zugrunde liegende Technologie. In der Regel können Sie damit beginnen, eine zu verwenden. auch wenn eine vollständige Migration einer großen Website länger dauert. Die Preise für Bild-CDNs von Drittanbietern basieren in der Regel auf Nutzungsstufen, wobei Die meisten Bild-CDNs bieten entweder eine kostenlose Stufe oder einen kostenlosen Testzeitraum zum Ausprobieren für ihr Produkt.
Bild-CDN auswählen
Für Bild-CDNs gibt es viele gute Optionen. Einige haben mehr Funktionen als andere, Aber jede einzelne kann Ihnen helfen, Bytes für Ihre Bilder zu sparen und Ihre Seiten schneller machen. Neben den Funktionen gibt es noch weitere Faktoren, die bei der Auswahl eines Image CDN sind Kosten, Support, Dokumentation und einfache Einrichtung oder Migration.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder sind ein wichtiger Bestandteil der Nutzererfahrung auf vielen Websites und daher Largest Contentful Paint einer Website. Hier sind Beachten Sie Folgendes, wenn Sie sich für ein Bild-CDN entscheiden:
- Von CDNs bereitgestellte Bilder können von einem ursprungsübergreifenden Server stammen, der um die Einrichtungszeit für Ihre Website zu verlängern. Verwenden Sie nach Möglichkeit ein Bild. CDN, das über den primären Ursprung weitergeleitet wird, sodass Sie keine zusätzlichen Ursprünge hinzufügen mit dem der Browser eine Verbindung herstellen kann. Dies hat denselben Effekt wie bei selbst gehosteten Bildern. für den primären Ursprung.
- Sie können einen
fetchpriority-Attributwert von"high"verwenden auf dem LCP-Bildelement, damit der Browser das Bild sofort laden kann wie möglich. - Wenn ein Bild im ersten HTML-Code nicht sofort gefunden werden kann, verwenden Sie
rel=preloadeinen Hinweis für das Bild Ihres LCP-Kandidaten, damit der Browser dieses Bild vor der . - Wenn Sie Ihren Ursprung nicht über einen Proxy verbinden können und der Browser nicht weiß, welches Bild bis zum späteren Laden der Seite geladen werden, so früh wie möglich eine Verbindung zum ursprungsübergreifenden Bild-CDN einrichten um die Ladephase der Ressourcen für Bilder potenzieller LCP-Kandidaten zu verkürzen.