Bilder sind ein wichtiger Bestandteil modernen Websites: Sie sind informativ, attraktiv, verbessern die Interaktionen mit einer Seite und wirken sich positiv auf den Umsatz und die Konversionskennzahlen aus. Unabhängig davon, wie viele Bilder auf einer Website verwendet werden, haben sie aufgrund ihrer Größe immer noch einen erheblichen Einfluss auf die Gesamtleistung der Website. Viele Bilder im Internet werden jedoch in veralteten Formaten, in zu hoher Auflösung und mit zusätzlichem Ballast an unkomprimierten Metadaten geliefert. Ein Bild-CDN ist ein moderner, cloudbasierter Dienst, der diese Herausforderungen angeht und die Bildverarbeitung im Web rationalisiert.
Was ist ein Bild-CDN?
Ein Bild-CDN ist ein Content Delivery Network mit zusätzlichen Funktionen für die Komprimierung und Umwandlung von Bildern in Echtzeit. Es hat zwei Hauptfunktionen:
- Blitzschnelle, globale Verteilung von Inhalten, genau wie ein traditionelles CDN die Bereitstellung von Inhalten beschleunigt. Dies erfordert ein globales Netzwerk von Caching-Servern.
- Dynamische Konvertierung, Komprimierung und Umwandlung von Bildern in der Cloud, wodurch eine Bearbeitung vor dem Upload überflüssig wird. Dies geschieht dank der zusätzlichen Software-Mechanismen eines Bild-CDNs.
Während ein herkömmliches CDN auf eine schnelle Bereitstellung von Inhalten abzielt, unabhängig von deren Format und Parametern, konzentriert sich ein Bild-CDN auf Bilder (wobei es ebenfalls auf eine schnelle Bereitstellung abzielt). Ein Bild-CDN berücksichtigt alle Besonderheiten und Herausforderungen, die Bilder für die Bereitstellung von Inhalten mit sich bringen, und bietet maßgeschneiderte Tools für die häufigsten Anwendungsfälle.
Wie funktioniert ein Bild-CDN?
Der Herkunftsserver speichert hierbei Bilder einer Webanwendung (Website). Nach der Anfrage des Kunden holt ein CDN-Server das angeforderte Bild aus der Quelle, nimmt alle notwendigen Änderungen vor, erstellt eine Kopie auf dem Server und überträgt die bearbeitete Version des Bildes an den Kunden, wie in Abbildung 2 dargestellt. 2. Mit anderen Worten: Ein Bild-CDN funktioniert als Reverse Proxy zwischen einem Herkunftsserver (Webhosting oder Bildspeicher) und dem Browser des Kunden.
Wenn die nächste Anfrage für dieses Bild die gleichen Parameter hat, antwortet der CDN-Server mit der gleichen Version des Bildes, ohne die Quelle abzufragen und ohne zusätzliche Verarbeitung. Falls nicht, beginnt der oben beschriebene Prozess von Neuem.
Schauen wir uns genauer an, wie die Bildumwandlung und -bereitstellung mit einem Bild-CDN abläuft.
Bildumwandlung
Sämtliche Manipulationen an Bildern werden durch bestimmte Parameter bestimmt, die ein Website-Administrator bei der Gestaltung einer Webseite in der URL des Bildes einstellt. So könnte dieser Link aussehen:
https://assets.gcore.pro/site/image-stack/transform.png?width=400&height=600&fit=fit
Die Abfragezeichenfolgen in der URL des Bildes definieren die Operationen, die auf das Bild angewendet werden. Wenn der Kunde eine Website besucht, fordert er alle Dateien der Seite, einschließlich Bilder, über deren URLs an. Dabei sendet der Browser des Kunden eine Anfrage an den Herkunftsserver, dass „transform.png“ mit „width=400“, „height=600“ und „fit=fit“ bereitgestellt werden soll. Aber zuerst geht diese Anfrage an den nächstgelegenen CDN-Server, um zu prüfen, ob die Version dieser Datei bereits im Cache des CDNs existiert.
Wenn es kein Bild mit den angegebenen Parametern im Cache gibt, geht die Anfrage an den Herkunftsserver, um die Originaldatei „transform.png“ abzurufen, sie an den CDN-Server zu übertragen und dort alle erforderlichen Parameter anzuwenden. Anschließend wird die verkleinerte „transform.png“ übermittelt und im Browser angezeigt.
Hinweis: In Abbildung 2 hat die „finale“ Version des Bildes das WebP-Format, aber das wurde im Query-String nicht erwähnt. Das liegt an den internen Einstellungen dieses speziellen Bild-CDNs.
Die endgültige Qualität der Umwandlung im Bild-CDN hängt davon ab, wie viele Funktionen es auf den zu verarbeitenden Inhalt anwenden kann. Weitere Informationen dazu finden Sie in der Programmbeschreibung des Anbieters, in der Produktdokumentation oder ähnlichem. Zu den Grundfunktionen gehören in der Regel die Konvertierung in das WebP-Format, die Größenänderung und die Bildkomprimierung. Fortgeschrittene Dienste sind in der Lage, in das AVIF-Format zu konvertieren, Wasserzeichen anzubringen und Manipulationen wie Drehen und Weichzeichnen durchzuführen.
Bildbereitstellung
Um den Aspekt der „Bereitstellung“ eines Bild-CDNs zu erklären, müssen wir uns zunächst das traditionelle CDN ansehen. Die Hauptfunktion eines herkömmlichen CDN besteht darin, die Auslieferung zu beschleunigen, indem die physische Entfernung zwischen geografisch verteilten Zielgruppen und dem Herkunftsserver mithilfe eines großen Netzwerks von Edge-Servern (Caching) verringert wird.
Im Allgemeinen gilt: Je mehr Edge-Server Sie haben, desto geringer ist die Latenz für Ihre Kunden. Zwischengespeicherte Kopien des Webinhalts werden näher an den Benutzern bereitgestellt, sodass Anfragen viel schneller bearbeitet werden können, da nicht die ganze Strecke zum Herkunftsserver zurückgelegt werden muss und die meisten Abfragen an der Edge abgeschlossen werden.
Ein weiteres Merkmal der „Bereitstellung“ im Bild-CDN ist die Möglichkeit, eine bestimmte Version des Inhalts an einen bestimmten Client zu liefern. Das heißt, dass ein CDN-Server auf der Grundlage des HTTP-Headers der Anfrage die Anforderungen des Browsers erkennen und die am besten geeignete Version des Bildes zurückgeben kann.
Folgendes Szenario mit Bildformaten veranschaulicht den Fall: Wenn der Browser das AVIF-Format nicht akzeptiert, erhält er das Bild in WebP, wenn der Browser weder AVIF noch WebP unterstützt, erhält er JPG.
Wann ist ein Bild-CDN sinnvoll?
Die auffälligsten Branchen und Bereiche, in denen ein Bild-CDN hilfreich sein kann, sind jene Webdienste, in denen visuelle Medien eine Schlüsselrolle bei der Kommunikation zwischen ihren Kunden und Produkten spielen. In der Regel handelt es sich dabei um bildreiche Websites aus Branchen wie z. B.:
- E-Commerce und Einzelhandel
- Digitale Medien und Blogs
- Online-Reisebüros
- Immobilien-Websites
- Websites für Kleinanzeigen
- Fotobibliotheken
Es gibt mehrere verschiedene Anwendungsfälle, in denen diese Lösung von Vorteil sein kann. Schauen wir uns diese genauer an.
Produktbilder für den E-Commerce
Ansprechende Produktbilder sind für Webshops, Einzelhändler und alle anderen kommerziellen Dienste im Internet von entscheidender Bedeutung. Sie sollten jedes noch so kleine Detail deutlich zeigen, wenn Benutzer das Bild vergrößern. Das bedeutet, dass Sie Bilder in hoher Auflösung hochladen müssen.
Und genau hier liegt das Dilemma: Hochauflösende Bilder erhöhen die Dateigröße und beeinträchtigen die Geschwindigkeit der Webseite, während kleinere Bilder in der Regel weniger attraktiv und ansprechend aussehen.
Ein Bild-CDN kann diese Herausforderung elegant lösen. Durch die Verwendung moderner Bildformate wie WebP und AVIF wird ein Bild-CDN zu einer leistungsstarken Lösung, um die Größe der Bilder mit ihrer Qualität in Einklang zu bringen und das Beste aus beiden Welten zu nutzen. Ein Bild-CDN kann ein Bild auf bis zu 80 KB komprimieren und dabei die sichtbare Qualität auf dem Niveau von 960 KB halten, wodurch das in Abbildung 4 dargestellte Problem umgangen wird.
Verarbeitung von benutzergenerierten Inhalten
Websites wie Kleinanzeigen, Immobilien oder Fotogalerien verwenden oft einen Crowdsourcing-Ansatz, um Bilder für ihre Dienste zu liefern. Auf diese Weise müssen sie eine riesige Menge an eingehenden Inhalten verarbeiten, die von ihren Benutzern erstellt und hochgeladen werden.
Da jedes Bild viele Vorschaufassungen (wie Miniaturansichten) haben kann, ist es fast unmöglich, all diese Bilder manuell zu verwalten. Da kommt ein CDN-Dienst für Bilder gerade recht. Die Entwicklung einer Integration zwischen Ihren Bild-Upload-Diensten und dem Bild-CDN kann den Prozess rationalisieren und alle Vorgänge automatisieren.
Unsplash.com ist eine bekannte kostenlose Fotobibliothek, die sich auf benutzergenerierte Inhalte stützt. Wenn Sie sich verschiedene Versionen desselben Bildes auf dieser Website ansehen, werden Sie feststellen, dass in jeder URL unterschiedliche Bild-CDN-Befehle eingebettet sind.
Allgemeine Website-Wartung
Ein Bild-CDN kann auch den Betrieb einer Website vereinfachen, die nicht mit bildreichen Plattformen verbunden ist, wie z. B. E-Commerce oder Fotobibliotheken. Hier sind einige Beispiele, wie dieser Mechanismus für jeden Website-Administrator nützlich sein kann.
Keine Bearbeitung vor dem Hochladen. Mit einem Bild-CDN können Sie mühsame Photoshop-Rituale und Aufgaben für Ihr Designerteam vergessen. Laden Sie einfach ein Bild auf das Webhosting (oder den Speicher) hoch und geben Sie alle erforderlichen Parameter in der URL an.
Rationalisierte Abläufe im Webdesign. Sie brauchen nur das Originalbild zu speichern, ohne verschiedene Kopien für jedes mögliche Szenario zu erstellen. Dies hilft bei der Optimierung für Mobilgeräte und Tablets und macht es einfacher, Änderungen vorzunehmen, wenn Sie das Design dringend aktualisieren müssen.
Geringere Bandbreitenkosten. Im Durchschnitt machen Bilder 50-60 % des Website-Traffics aus. Indem Sie die Größe der einzelnen Bilder verringern, reduzieren Sie das Gesamtvolumen des Traffics, der über Ihre CDN-Server läuft. Weniger Traffic bedeutet weniger Geld für diesen Dienst.
Wenn Sie mehr darüber erfahren möchten, wie die Bildoptimierung für die Pflege Ihrer Website nützlich sein kann, lesen Sie unseren Artikel über Anwendungsfälle der Bildoptimierung.
Zusätzliche Vorteile eines Bild-CDNs
Abgesehen von den bildbezogenen Funktionen eines Bild-CDN bietet es eine Fülle von zusätzlichen Vorteilen, die sich aus seinen herkömmlichen CDN-Möglichkeiten ergeben.
Allgemeine Verbesserung der Web-Performance
Ein CDN beschleunigt die Bereitstellung statischer Inhalte auf globaler Ebene. Es verbessert die Performance nicht nur durch die Verringerung der Dateigröße von Bildern, sondern auch durch die Verringerung der physischen Entfernung zwischen Server und Benutzer. Dies ermöglicht einen schnelleren Verbindungsaufbau (niedrigeres TTFB) und eine schnellere Datenübertragung.
Die dedizierte Netzwerkkapazität eines CDNs und die zusätzliche Konnektivität können Netzwerküberlastungen verhindern und das Routing beschleunigen. Der Effekt wird global verstärkt, wenn sich Ihr Publikum auf der ganzen Welt verteilt befindet.
Bessere Verfügbarkeit
Ein weiteres natives Merkmal eines CDNs ist seine Fähigkeit, Datenverkehrsspitzen während der Spitzenzeiten sowie DDoS-Angriffe abzumildern. Der Einsatz eines globalen Netzwerks von Edge-Servern kann Unterbrechungen Ihrer Webdienste verhindern und dazu beitragen, dass Ihr Unternehmen im Internet verfügbar bleibt – auch unter herausfordernden Bedingungen.
Datensicherheit
Ein ordnungsgemäß integriertes CDN bedeutet, dass der Großteil Ihres Website-Traffics darüber läuft. Um die Sicherheit Ihres CDNs zu gewährleisten und es vor böswilligen Aktivitäten zu schützen, verfügen viele CDNs über eingebettete Web-Sicherheitsmechanismen wie SSL/TLS-Datenverschlüsselung, Zugriffskontrollregeln und -richtlinien und sogar eine Web Application Firewall (WAF) zum Schutz vor Hackerangriffen.
Auswahl eines Bild-CDN-Anbieters
Wenn Sie einen CDN-Anbieter für das nächste Projekt Ihres Unternehmens in Erwägung ziehen, sollten Sie auf diese wichtigen Merkmale achten, um sicherzustellen, dass Sie den besten Service erhalten:
- Vielfältige Bildumwandlungsfunktionen. Überlegen Sie, welche Funktionen Sie für die Bildtransformation benötigen. Die meisten Websites benötigen keine Unschärfe in Fotos, keine Wasserzeichen und keine Bilddrehung. Aber für einige Webdienste könnte ein solches Tool ein großer Vorteil sein und möglicherweise Tausende von Dollar pro Monat sparen.
- WebP, AVIF und Bildkomprimierung. Der häufigste Grund für die Optimierung von Bildern ist die Reduzierung der Datengröße für eine bessere Web-Performance. Wenn Sie beispielsweise Bilder im AVIF-Format bereitstellen, können Sie durchschnittlich 60–70 % der ursprünglichen Dateigröße einsparen.
- Funktionen zur Bereitstellung von Inhalten. Ein robuster CDN-Dienst mit vielen Präsenzpunkten auf der ganzen Welt kann die Ladezeit Ihrer Website verkürzen, die Verfügbarkeit Ihres Webdienstes verbessern und sie sicherer machen.
- Erweiterte API. Eine API ist für die Automatisierung von Prozessen und Abläufen unerlässlich. Was die Bildoptimierung betrifft, so sind erweiterte API-Funktionen für die Verarbeitung von benutzergenerierten Inhalten für Dienste wie Kleinanzeigen, Fotogalerien und Bewertungsplattformen notwendig.
- Drittanbieter oder eigene Infrastruktur. In vielen Fällen ist es nicht wichtig, wer hinter der Infrastruktur Ihres Bild-CDNs steht. Wenn Sie jedoch einen großen Webdienst mit strengen SLAs betreiben, ist es sinnvoll, dafür zu sorgen, dass Ihre Daten ordnungsgemäß verarbeitet werden und Ihr Dienstanbieter die volle Kontrolle über seine Server hat.
Images Stack (Bildstapel) von Gcore
Der Image Stack ist ein Modul zur Bildoptimierung, das auf dem Gcore CDN läuft, einer robusten Plattform zur Bereitstellung von Inhalten mit Hunderten von Edge-Servern auf der ganzen Welt. Es ermöglicht die Umwandlung von WebP und AVIF, die Kontrolle der Bildqualität, die Größenänderung und andere Manipulationen, indem Sie einfach ein paar Abfragezeichenfolgen zu Ihren URLs hinzufügen. Testen Sie unseren Service kostenlos, inklusive 100.000 kostenlosen Bildoptimierungsanfragen pro Monat.
