Ihr Browser untersützt kein Javascript! Bitte aktivieren Sie dies, um die Website nutzen zu können.

FEICHT.media

Cloud Computing

3 Gründe für Serverseitige Bildoptimierung

3 Gründe für Serverseitige Bildoptimierung

Wir bei FEICHT.media werden von unseren Kunden immer wieder gefragt, wie man Bilder am besten für eine Website optimiert, um schnelle Ladezeiten und eine kleine Dateigröße zu erreichen. Oft helfen hier nur Programme wie Adobe Photoshop, welche allerdings eine Einarbeitung und Übung erfordern. Abhilfe schafft jetzt die Serverseitige Bildoptimierung. Eine Technologie, die man immer öfter antrifft.

Was ist Serverseitige Bildoptimierung?

Bevor wir zu den Vorteilen der Serverseitigen Bildoptimierung kommen, möchte ich kurz darauf eingehen, was eigentlich dahinter steckt und was im Hintergrund abläuft. Bei der Serverseitigen Bildoptimierung findet, wie der Name schon sagt, die Optimierung von Bildern in jeglicher Hinsicht nicht manuell beim Nutzer, sondern auf dem Server statt.

So funktioniert die Serverseitigen Bildoptimierung

Um die Serverseitige Bildoptimierung umzusetzen, gibt es mehrere Möglichkeiten, die je nach den Anforderungen an die Technologie variieren. Eines haben aber alle gemeinsam: Bei der Anforderung der Datei vom Server werden in der URL zusätzliche Parameter angegeben, die z.B. die gewünschte Auflösung und Qualität oder auch Fotofilter angeben.

Das sieht dann so aus:
https://bilder.meinedomain.de/fit-in/1920x1080/filters:blur(20)/produkte/produktbild.jpg

Im oben gezeigten Beispiel wird das Bild mit den Dateinamen “produktbild.jpg” aus dem Verzeichnis “produkte” angefordert. Die Parameter ”fit-in/1920x1080/filters:blur(20)/” geben an, dass das Bilder auf eine Auflösung von 1920x1080px zugeschnitten werden und einen Weichzeichnungsfilter mit 20% Stärke bekommen soll.

Diese Parameter werden von einem Script auf dem Server ausgelesen und auf das Bild angewendet. Anschließend gibt der Server die neue Datei an den Client zurück. Und an diesem Punkt trennen sich die Wege der Möglichkeiten bei der Serverseitigen Bildoptimierung, denn das neue Bild kann nun auf dem Server gespeichert werden oder auch nur in einem Cache verbleiben. Letzteres ist meisten die empfehlenswertere Möglichkeit, denn ein Speichern aller optimierten Bilder auf dem Server erfordert schnell unmengen an Speicherplatz. Dieser Speicherplatzbedarf lässt wiederum die Kosten steigen. Deshalb ist es wesentlich effektiver die neu generierten Bilddateien lediglich in einem CDN-Cache verbleiben zu lassen und nach deren Ablauf neu zu erstellen. 

Welche Vorteile Ihnen ein Content Delivery Network, kurz CDN, für Ihre Website bringt, erfahren Sie in unserem Artikel “Vorteile eines CDN”.

Das sind die Vorteile der Serverseitigen Bildoptimierung

Serverseitige Bildoptimierung spart Zeit und damit Kosten

Den ersten Vorteil habe ich eigentlich schon weiter oben ein wenig verraten, aber möchte nun noch einmal im Detail darauf eingehen.

Normalerweise öffnet man ein Bild in Photoshop und speichert es anschließend in den benötigten Auflösungen für die Website heraus. Das kann schnell zu einer nervigen und zeitaufwändigen Arbeit werden, die nicht sein muss. Vor allem bei zentralen Medien-Verzeichnissen, wo die Bilder nicht nur auf einer Website in zwei bis drei verschiedenen Auflösungen gebraucht werden, sondern auch z.B. auf Smart TV und Smart Watch benötigt werden.

Hier schafft die Serverseitige Bildoptimierung kostengünstige Abhilfe und ist flexibel auf allen Endgeräten den Bedürfnissen entsprechend einsetzbar. Die “Rohdaten” der Bilder können ganz einfach im Originalformat auf dem Server abgelegt und dann über die Parameter in der URL aufgerufen werden. Die nötigen Parameter können direkt im Ausgabe Script der Ansicht für die Website o. ä. hinterlegt werden.

Serverseitige Bildoptimierung ist optimal für mobile Endgeräte

Wie im vorherigen Punkt schon angesprochen, kommt es immer öfter vor, dass Bilder in einer Vielzahl von verschiedenen Auflösungen benötigt werden. Auch auf Websites werden bereits unterschiedliche Bilder in unterschiedlichen Breakpoints verwendet. Das hat einen einfachen Grund: die Optimierung für mobile Endgeräte, die wichtiger ist, als je zuvor. So wird auf Smartphones beispielsweise ein anderes Bild wie auf dem Tablet ausgegeben. Diese verschiedenen Auflösungen können nun ganz einfach über die URL vom Server abgefragt werden und müssen nicht in mühevoller Handarbeit selbst erstellt werden. Und ändert sich einmal eine Auflösung, passt man einfach ein paar Zeilen Code anstatt tausende Bilder neu zu exportieren.

Bessere SEO-Ergebnisse mit Serverseitige Bildoptimierung

Fast nichts ist heute bei einer Website wichtiger als das Ranking in den Google Suchergebnisse. Dabei spielen viele Faktoren von On- und Off-Page-SEO eine Rolle. Einer davon ist die technische Optimierung im On-Page-Bereich, welcher u.a. die Ladezeit und komplette Größe der Website beinhaltet. Diese steigen schnell an, wenn die verwendeten Bilder zu groß und unnötig große Daten übertragen werden müssen. Deshalb ist es ratsam Bilder für jedes Mobilgerät einzeln auszugeben und so nur die maximale Auflösung bei den Bildern zu haben.

Auch wenn man es kaum glauben möchte, aber die Ladezeit einer Website ist ein wichtiger Faktor zur Beurteilung der Qualität einer Website von Suchmaschinen. Lädt eine Website zu langsam, landet diese ganz schnell weiter unten in den Suchergebnissen, egal wie gut der Inhalt ist.

Messbare Erfolge der Serverseitigen Bildoptimierung

Wir haben bereits begonnen die Serverseitige Bildoptimierung erfolgreich in die Websites einiger Kunden zu integrieren. Lassen Sie mich kurz einen Fall vorstellen, in dem wir sehr deutliche Ergebnisse erzielt haben: Es handelt sich um eine Website, die durch ein Content-Team mit News-Beiträgen und immer wieder kleineren Aktualisierungen auf Unterseiten gepflegt wird. Leider verfügt das Content-Team nicht über die nötigen Mittel, um die Bilder aufwändig in Photoshop für die Website zu optimieren und anzupassen. Deshalb wurden die Originaldateien auf dem Server abgelegt, welche zum Teil über 2 MB groß waren. Definitiv zu groß für eine Website. Das schaukelte sich schnell nach oben, denn das war kein Einzelfall und so war die Startseite schnell über 15 MB groß. Man möchte sich kaum vorstellen, was das für das Datenvolumen am Smartphone bedeutet.

GTmetrix Report der Startseite ohne Verwendung der Serverseitigen Bildoptimierung
GTmetrix Report der Startseite ohne Verwendung der Serverseitigen Bildoptimierung

Also war es höchste Zeit zu handeln und hierbei kam nur die Serverseitige Bildoptimierung als dauerhafte Lösung in fragen.

GTmetrix Report der Startseite unter Verwendung der Serverseitigen Bildoptimierung
GTmetrix Report der Startseite unter Verwendung der Serverseitigen Bildoptimierung

Die Implementierung lief mit wenigen Stunden Ausfallzeit reibungslos ab und die untenstehenden Ergebnisse unter Verwendung der Serverseitige Bildoptimierung sprechen wahrscheinlich für sich: Eine Reduktion der Seitengröße um fast das 14-fache und eine Halbierung der Ladezeit.

Auf unserer Website verwenden wir Cookies, auch von Drittanbietern, um Informationen über die Nutzung des Angebots zu sammeln. Diese helfen uns dabei, Anpassungen an der Usability und dem Inhalt vorzunehmen. Weitere Informationen und Details zu den verwendeten Cookies und dem Datenschutz erhältst du in der Datenschutzerklärung. Weitere Informationen