Vielleicht sind Sie bereits mit dem Kernkonzept eines Content Delivery Network (CDN) vertraut: einem Netzwerk aus verteilten, aber miteinander verbundenen die schnell und effizient Assets an Nutzer liefern. Beim Hochladen einer Datei zu einem CDN-Anbieter wird ein Duplikat erstellt. auf den anderen Knoten des CDN-Netzwerks weltweit. Wenn ein Nutzer eine Datei anfordert, werden die Daten vom Knoten geografisch gesendet die dem Nutzer am nächsten sind, was die Latenz verringert. Die verteilte Natur von CDNs sorgt auch für Redundanz bei Netzwerkausfällen oder und Load-Balancing, um Traffic-Spitzen abzumildern.
Ein Bild-CDN bietet all diese Vorteile, mit einem wesentlichen Unterschied: die Fähigkeit, den Inhalt eines Bildes basierend auf den Zeichenfolgen der URL optimieren, über die auf das Bild zugegriffen wurde.
Ein Nutzer lädt ein kanonisches Bild mit hoher Auflösung auf den Anbieter hoch, der eine URL für den Zugriff darauf generiert:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Obwohl die genaue verwendete Syntax von Anbieter zu Anbieter unterschiedlich ist, können Sie mit allen Bild-CDNs zumindest eine Quelle ändern.
der Abmessungen, der Codierung und der Komprimierung. Cloudinary, zum Beispiel:
eine dynamische Größenanpassung eines
mit den folgenden Syntaxen hochgeladen: h_ gefolgt von der numerischen Höhe in Pixeln, w_ gefolgt von der Breite,
und einen c_-Wert, mit dem Sie detaillierte Informationen dazu angeben können, wie das Bild skaliert oder zugeschnitten werden soll.
Sie können eine beliebige Anzahl von Transformationen anwenden, indem Sie der URL vor dem Dateinamen und der Erweiterung kommagetrennte Werte hinzufügen.
Das hochgeladene Bild kann also nach Bedarf über das src des img-Elements bearbeitet werden, das es anfordert.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Wenn ein Nutzer zum ersten Mal die URL mit diesen Transformationen aufruft, wird eine neue Version des Bildes proportional zu einem Wert von
mit einer Breite von 400 Pixeln (w_400) generiert und gesendet. Diese neu erstellte Datei wird dann im gesamten CDN im Cache gespeichert, damit sie gesendet werden kann.
an jeden Nutzer, der dieselbe URL anfordert, anstatt bei Bedarf neu zu erstellen.
Auch wenn es nicht ungewöhnlich ist, dass Bild-CDN-Anbieter Software Development Kits anbieten
um eine erweiterte Nutzung und Integration mit verschiedenen Technologie-Stacks zu ermöglichen, allein durch dieses vorhersehbare URL-Muster
wandeln Sie eine einzelne hochgeladene Datei in ein funktionsfähiges srcset-Attribut um, ohne dass zusätzliche Entwicklungstools erforderlich sind:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Mit der nun bekannten Syntax können wir die gewünschte Komprimierungsstufe manuell angeben: q_, kurz
für „Qualität“, gefolgt von der numerischen Abkürzung für Komprimierungsgrad:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Dank einer Reihe unglaublich leistungsstarker Funktionen ist es selten, dass du diese Informationen manuell eingeben musst. die von den meisten Bild-CDNs bereitgestellt werden: vollautomatische Komprimierung, Codierung und Inhaltsverhandlung.
Automatische Komprimierung
Dank der Rechenleistung, die CDNs zur Verfügung stehen, können sie eine unglaublich leistungsstarke Funktion bieten: die Analyse den Inhalt eines Bildes, um mithilfe eines Algorithmus die ideale Komprimierungsstufe und die Codierungseinstellungen zu bestimmen, genau wie Sie oder ich die Komprimierung für jedes einzelne Bild manuell anpassen.
Diese Algorithmen automatisieren die Entscheidungen, die Sie beim Ausgleich von Dateigröße und Wahrnehmungsqualität treffen, indem Sie Bildinhalte für und die Komprimierungseinstellungen entsprechend anzupassen. Dies führt häufig zu einer enormen Reduzierung der im Vergleich zum manuellen One-Size-fits-all-Ansatz für die Komprimierung.
So komplex dieser Prozess klingen mag, aber die Implementierung könnte nicht viel einfacher sein: Für Cloudinary könnte das Hinzufügen von q_auto in einem
Bild-URL aktiviert diese Funktion:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Automatische Codierung und Content-Verhandlung
Beim Empfang einer Bildanforderung ermitteln die CDNs für Bilder die modernste Codierung, die der Browser über das
HTTP-Header, die vom Browser zusammen mit Asset-Anfragen gesendet werden, insbesondere
Accept-Header. Dieser Header gibt die Codierungen an, die der Browser verarbeiten kann.
Medientypen, die wir für die type verwenden würden,
<source>-Attribut eines <picture>-Elements.
Wenn Sie beispielsweise den Parameter f_auto zur Liste der Bildtransformationen in einer Asset-URL hinzufügen, wird Cloudinary angewiesen,
stellen die effizienteste Codierung bereit, die der Browser verstehen kann:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Der Server generiert dann eine Version des Bildes mit dieser Codierung und speichert das Ergebnis für alle nachfolgenden Nutzer mit derselben
unterstützt werden. Diese Antwort enthält einen Content-Type-Header.
um den Browser explizit über die Codierung der Datei zu informieren, unabhängig von der Dateiendung. Auch wenn ein Nutzer mit einem modernen Browser
für eine Datei mit der Endung .jpg angefordert wird, wird bei dieser Anfrage ein Header gesendet, mit dem der Server darüber informiert wird, dass AVIF unterstützt wird.
sendet eine AVIF-codierte Datei zusammen mit einer ausdrücklichen Anweisung, sie als AVIF zu behandeln.
Das Endergebnis ist ein Prozess, der Sie nicht nur von der Erstellung alternativer codierte Dateien und der manuellen Feinabstimmung Ihrer Komprimierungseinstellungen abhebt.
(oder ein System betreiben, das diese Aufgaben für Sie erledigt), aber keine <picture> und das Attribut type mehr verwenden müssen, um
diese Dateien den Nutzenden zur Verfügung zu stellen. Wenn Sie nur die Syntax srcset und sizes verwenden, können Sie Ihren Nutzern also weiterhin Bilder bereitstellen, die beispielsweise als AVIF,
Fallback auf WebP (oder JPEG-2000, nur für Safari) und auf die sinnvollste alte Codierung zurück.
Die Verwendung eines CDN für Bilder hat eher logistische als technische Nachteile, vor allem die Kosten. Es ist zwar üblich, dass Bild-CDNs bieten funktionsrobuste kostenlose Tarife für den persönlichen Gebrauch an. Das Generieren von Bild-Assets erfordert Bandbreite und Speicherplatz für Uploads, Verarbeitung auf den Server zum Transformieren von Bildern und zusätzlichen Speicherplatz für die im Cache gespeicherten Transformationsergebnisse, sodass eine erweiterte Nutzung und Anwendungen mit hohem Traffic möglicherweise einen kostenpflichtigen Tarif erfordern.