Was ist Bildoptimierung?

Unter Bildoptimierung versteht man die Bearbeitung und Bereitstellung hochwertiger Bilder im optimalen Format und in der richtigen Größe und Auflösung für das jeweilige Gerät. Dabei wird die Dateigröße so gering wie möglich gehalten, um keine Kompromisse bei der Bildqualität einzugehen.

Klingt unmöglich? Mag sein, aber um eine reaktionsschnelle Website bereitzustellen, lässt sich die Bildoptimierung leider nur schwer umgehen. Moderne Nutzer besuchen Websites von vielen verschiedenen Geräten aus – von Mobilgeräten bis hin zu PCs – und verwenden dabei eine Vielzahl von Browsern. Nutzer verlangen reaktionsschnelle Erlebnisse, und die Bildoptimierung ist ein entscheidender Teil dieses Prozesses, da sie sich auf die Bereitstellungsgeschwindigkeit sowie auf die Performance Ihrer Website bei Suchmaschinen auswirken kann.

Die Bedeutung der Bildoptimierung

Bildoptimierung ist wichtig für ein gutes Nutzererlebnis, aber nicht zwingend erforderlich. Zumindest sollten Sie aber ein Bildformat wählen, das Ihre Bilder unabhängig vom verwendeten Gerät korrekt anzeigt. Außerdem gilt es Dinge wie die Auflösung und die Kodierung des Bildes zu beachten, die sich beide auf die Qualität und Größe Ihrer Bilder auswirken. 

Neben der physischen Bildumwandlung müssen Sie auch den Dateinamen, die ALT-Tags und die Bildmetadaten berücksichtigen, um in den Suchmaschinenrankings (Search Engine Optimization, SEO) gut abzuschneiden.

Diese Aufgabe können Sie mit externen Tools zwar selbst übernehmen, aber je größer Ihr Unternehmen, desto höher der Skalierungsbedarf und desto schwieriger, kostspieliger und zeitaufwändiger wird das Ganze. Eine Bildoptimierungslösung – insbesondere eine edgebasierte Lösung – kann dabei helfen, den Aufwand bei der Bildoptimierung auf Ihrer Website zu automatisieren und zu skalieren und gleichzeitig die Compute-Kosten zu senken oder komplett einzusparen, ganz zu schweigen von den Kosten für die manuelle Verwaltung. In Kombination mit einem CDN-Service können optimierte Bilder gecacht und schneller an ihre Betrachter ausgeliefert werden.

So funktioniert die Bildoptimierung

Mit Bildoptimierungslösungen können Sie hochauflösendes Bilder hochladen und anschließend verschiedene Einstellungen vornehmen, um Bilder möglichst effizient an die Besucher Ihrer Website auszuliefern. Bildoptimierungslösungen sind in der Regel als Plug-ins oder Erweiterungen für Ihr Content Management System oder als eigenständige Services verfügbar, sowohl als lokale Lösung als auch online. Mit diesen Lösungen können Sie Einstellungen für die Bearbeitung festlegen und diese dann vor der Bereitstellung des Bildes serverseitig anwenden.

Gängige Verfahren bei der Bildoptimierung für die Auslieferung sind:

• Geräteerkennung im laufenden Betrieb, um die optimale Bilddatei für die Bildschirmgröße Ihres Nutzers auszuliefern

• Bildkomprimierung für eine optimierte Bereitstellung je nach Plattform, Konnektivität, Kompatibilität und weiteren Parametern

• Skalierung von Bildern auf eine bestimmte Größe

Beim Laden Ihrer Website und beim Senden einer Bildanfrage verwendet der Web-Client des Nutzers das CSS der Website, um zu bestimmen, welche Version des Bildes für das jeweilige Gerät geeignet ist. Er sendet eine Anfrage für ein bestimmtes Bild mit den festgelegten Parametern an Ihre Server, und die Bildoptimierungslösung gibt als Antwort ein entsprechend bearbeitetes Bild zurück.

Anstatt zu versuchen, jedes Gerät, das auf Ihre Website zugreifen könnte, im Voraus zu bestimmen und Parameter für jedes dieser Szenarien festzulegen, können Sie JavaScript APIs verwenden, um codebasiert Informationen über den Browser und die Versionsnummer des Clients zu ermitteln und dementsprechend die optimale Bildbearbeitung in die Wege zu leiten.

Außerdem können Sie Ihre Bildoptimierungslösung mit einerm CDN-Service verknüpfen, um die Auslieferung Ihrer optimierten Bilder weiter zu beschleunigen. Nachdem die erste Anfrage für das Bild bearbeitet wurde, werden sowohl das Originalbild als auch das bearbeitete Bild auf dem CDN-Server gecacht, sodass zukünftige Anfragen für dieselben Bildversionen direkt aus dem Cache bedient werden können, ohne dass eine Änderung erforderlich ist. Anfragen für andere Bildversionen werden mit dem Originalbild im Cache bedient, wodurch der Traffic und die Auslastung des Origin-Servers reduziert werden.

Vorteile einer Bildoptimierungslösung

Mithilfe einer Bildoptimierungslösung können Sie Zeit sparen, Infrastrukturkosten senken, das Nutzererlebnis verbessern und Ihre SEO optimieren.

1. Optimierte Workflows

Je nach Anzahl der Bilder auf deiner Website kann sich die Optimierung und Verwaltung von Bildern als zeitaufwändige und mühsame Aufgabe erweisen. Heutzutage ist es üblich, dass ein einzelnes Bild in 10 oder mehr Versionen umgewandelt wird, wobei bei jeder Version eine separate Datei für die gängigsten Bildschirmauflösungen erstellt wird. Eine Bildoptimierungslösung spart Zeit, indem sie die benötigten Bilder aus einer einzigen, hochwertigen Quelldatei erstellt. Durch die Integration einer Bildoptimierungslösung in Ihren Workflow können Sie diesen Vorgang automatisieren. So müssen Sie nie wieder mehrere Bilddateien manuell erstellen oder Vorverarbeitungsskripte verwenden!

2. Geringere Kosten

Der Einsatz einer Bildoptimierungslösung trägt auch zur Einsparung von Infrastrukturkosten bei, da nicht mehrere Versionen jeder Datei auf dem Server gespeichert werden müssen oder Geld für Computing-Ressourcen zur Durchführung der Bildbearbeitung ausgegeben werden muss. Durch die Nutzung eines CDN-Service können Sie sogar noch mehr sparen: Indem Sie Bilder aus dem Cache ausliefern und die Skalierung an Ihre wachsenden Anforderungen anpassen, können Sie Ihre Egress-Kosten senken.

3. Schnellere Auslieferung

Der größte Vorteil einer Bildoptimierungslösung in Kombination mit einem CDN ist die schnelle Auslieferung. Mit einem CDN können Sie Bilder aus dem Cache ausliefern und durch die Nähe zu Ihren Nutzern die Zeit bis zur Auslieferung und damit die Zeit bis zum Laden Ihrer Website verkürzen.

Die Ladezeit Ihrer Website ist nicht nur für das allgemeine Nutzererlebnis wichtig, sondern wirkt sich auch auf die SEO aus. Suchmaschinen wie Google crawlen Ihre Website und berücksichtigen die Ladegeschwindigkeit als Faktor für die Platzierung in den Suchergebnissen. Wenn Bilder Ihre Website ausbremsen, kann dies also zu einem schlechteren Suchmaschinenranking führen. Dank Bilderoptimierung erhalten Nutzer das richtige Bild für ihr Gerät. Die Bilder werden schneller gerendert und sorgen so für Suchmaschinenoptimierung.

Durch die Anwendung von Bildoptimierungsverfahren können Unternehmen die Ladezeiten ihrer Websites erheblich verbessern, ihre Origin-Server entlasten und letztlich die Zufriedenheit der Nutzer steigern. Die positive Korrelation zwischen optimierten Bildern und Suchmaschinen-Rankings unterstreicht die Bedeutung der Bildoptimierung zusätzlich. Da Nutzer immer schnellere und reibungslosere Onlineerlebnisse verlangen, wird die Bildoptimierung immer wichtiger, um im virtuellen Bereich wettbewerbsfähig zu bleiben.

Weitere Informationen zur Bildoptimierung finden Sie in folgenden Quellen:

• Produktseite mit Livedemo: /products/image-optimization

• E-Book: Image Optimizer: https://learn.fastly.com/de-network-services-Performance-ebook-Image-Optimization.html 

• Blogpost zur Automatisierung mit Image Optimizer: /blog/its-about-time-to-value-announcing-self-service-image-optimization

• Kundenstimmen: /video/fastly-image-optimizer 

Tutorial zum Fastly Image Optimizer: https://docs.fastly.com/en/tutorials/fastly-io