Möglicherweise sind Sie bereits mit dem Kernkonzept eines Content Delivery Network (CDN) vertraut: einem Netzwerk aus verteilten, aber miteinander verbundenen Servern, das schnell und effizient Assets an Nutzer liefert. Beim Hochladen einer Datei zu einem CDN-Anbieter wird weltweit auf den anderen Knoten des CDN-Netzwerks ein Duplikat erstellt. Wenn ein Nutzer eine Datei anfordert, werden die Daten von dem Knoten gesendet, der diesem Nutzer geografisch am nächsten liegt, wodurch die Latenz reduziert wird. Die verteilte Natur der CDNs sorgt auch für Redundanz bei Netzwerkausfällen oder Hardwarefehlern sowie für Load-Balancing, um Traffic-Spitzen abzuschwächen.
Ein Bild-CDN kann all diese Vorteile bieten, mit einem wichtigen Unterschied: Es besteht die Möglichkeit, den Inhalt eines Bildes basierend auf Strings, über die der Zugriff erfolgt, zu transformieren und zu optimieren.
Ein Nutzer lädt ein kanonisches Bild mit hoher Auflösung auf den Anbieter hoch, wodurch eine URL für den Zugriff auf das Bild generiert wird:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Auch wenn die genaue Syntax je nach Anbieter unterschiedlich ist, können Sie mit allen Bild-CDNs mindestens die Abmessungen, Codierung und Komprimierungseinstellungen eines Quellbildes ändern. Mit Cloudinary wird beispielsweise eine dynamische Größenänderung eines hochgeladenen Bildes mithilfe der folgenden Syntaxen durchgeführt: h_ gefolgt von der numerischen Höhe in Pixeln, w_ gefolgt von der Breite und einem Wert c_, mit dem Sie detaillierte Informationen darüber angeben können, wie das Bild skaliert oder zugeschnitten werden soll.
Es kann eine beliebige Anzahl von Transformationen angewendet werden, indem vor dem Dateinamen und der Erweiterung kommagetrennte Werte zur URL hinzugefügt werden. So kann das hochgeladene Bild nach Bedarf über die src des img-Elements, das es anfordert, bearbeitet werden.
<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 generiert und gesendet, die proportional auf eine Breite von 400 Pixeln skaliert ist (w_400). Diese neu erstellte Datei wird dann im gesamten CDN im Cache gespeichert, sodass sie an jeden Nutzer gesendet werden kann, der dieselbe URL anfordert, anstatt sie bei Bedarf neu zu erstellen.
Bild-CDN-Anbieter bieten zwar nicht selten Software Development Kits an, die eine erweiterte Nutzung und Integration mit verschiedenen Technology Stacks ermöglichen, aber mit diesem vorhersehbaren URL-Muster allein können wir eine einzelne hochgeladene Datei problemlos in ein funktionsfähiges srcset-Attribut umwandeln, ohne dass weitere 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="…">
Wir können die gewünschte Komprimierungsstufe manuell mit einer üblichen Syntax festlegen: q_, kurz für „quality“, gefolgt von der numerischen Abkürzung für „Komprimierungsstufe“:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Es ist selten, dass Sie diese Informationen manuell hinzufügen müssen. Dies liegt jedoch an einer Reihe von extrem leistungsstarken Funktionen, die die meisten Bild-CDNs bieten: vollständig automatische Komprimierung, Codierung und Inhaltsverhandlung.
Automatische Komprimierung
Die Bild-CDNs mit Rechenleistung bieten eine unglaublich leistungsstarke Funktion: Sie analysieren den Inhalt eines Bildes, um mithilfe von Algorithmen die ideale Komprimierungsstufe und die Codierungseinstellungen zu bestimmen – so wie Sie oder ich die Komprimierung für jedes unserer Bilder manuell anpassen würden.
Diese Algorithmen automatisieren die Entscheidungen, die Sie treffen können, wenn Sie ein ausgewogenes Verhältnis zwischen Dateigröße und Wahrnehmung der Bildqualität treffen. Dabei werden Bildinhalte auf messbare Anzeichen von Verschlechterung analysiert und die Komprimierungseinstellungen entsprechend angepasst. Dies bedeutet häufig eine erhebliche Reduzierung der Dateigröße im Vergleich zur manuellen Anpassung der Komprimierungseinstellungen.
So komplex dieser Vorgang auch klingen mag, die Implementierung könnte gar nicht viel einfacher sein: Für Cloudinary ermöglicht das Hinzufügen von q_auto in einer Bild-URL 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-Aushandlung
Wenn Bild-CDNs eine Anfrage für ein Bild erhalten, bestimmen die CDNs die modernste Codierung, die der Browser unterstützt. Dies geschieht über die HTTP-Header, die der Browser zusammen mit den Anfragen für Assets gesendet hat, insbesondere den Accept-Header. Dieser Header gibt die Codierungen an, die der Browser verstehen kann. Dabei werden dieselben Medientypen verwendet, die wir auch zum Auffüllen des Attributs type der <source> eines <picture>-Elements verwenden würden.
Wenn Sie beispielsweise den Parameter f_auto zur Liste der Bildtransformationen in einer Asset-URL hinzufügen, weisen Sie Cloudinary ausdrücklich an, die effizienteste Codierung bereitzustellen, 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 Bildversion mit dieser Codierung und speichert das Ergebnis für alle nachfolgenden Nutzer mit derselben Browserunterstützung im Cache. Diese Antwort enthält einen Content-Type-Header, um den Browser unabhängig von der Dateiendung explizit über die Codierung der Datei zu informieren. Auch wenn ein Nutzer mit einem modernen Browser eine Anfrage für eine Datei mit der Endung .jpg sendet, enthält diese Anfrage einen Header, der den Server darüber informiert, dass AVIF unterstützt wird. Der Server sendet dann eine AVIF-codierte Datei mit einer expliziten Anweisung, sie als AVIF zu behandeln.
Das Endergebnis ist ein Prozess, bei dem Sie nicht nur alternativ codierte Dateien erstellen und Ihre Komprimierungseinstellungen manuell anpassen müssen (oder ein System verwalten müssen, das diese Aufgaben für Sie übernimmt), sondern auch die Verwendung von <picture> und dem Attribut type zur effektiven Bereitstellung dieser Dateien an Nutzer überflüssig wird. Wenn Sie also die Syntax srcset und sizes verwenden, können Sie Ihren Nutzern weiterhin Bilder bereitstellen, die z. B. als AVIF codiert sind und auf WebP (oder JPEG-2000, in Safari ausschließlich) zurückgreifen und auf die vernünftigste alte Codierung zurückgreifen.
Die Verwendung eines Image-CDNs hat mehr Nachteile als technischer Natur. Hauptsächlich sind die Kosten. Bild-CDNs bieten zwar häufig kostenlose Tarife für den privaten Gebrauch an, aber die Erstellung von Bild-Assets erfordert Bandbreite und Speicherplatz für Uploads, die Verarbeitung auf dem Server zum Transformieren von Bildern sowie zusätzlichen Speicherplatz für die im Cache gespeicherten Transformationsergebnisse. Für erweiterte Nutzung und Anwendungen mit hohem Traffic ist daher möglicherweise ein kostenpflichtiger Tarif erforderlich.