W-PF-01 — Bildoptimierung

Worum es geht

Bilder sind auf den meisten Webseiten der größte einzelne Posten — in Bytes, in Ladezeit, in Energie. Ein Foto, das mit dem Smartphone aufgenommen und ungeprüft hochgeladen wurde, kann fünf Megabyte und mehr wiegen, obwohl der Browser es ohnehin nur in einer Größe anzeigt, die ein Dreißigstel davon braucht.

Der Baustein optimiert alle Bilder Ihrer Webseite einmal vollständig: jedes Bild wird in das richtige Format gebracht und mit einem <picture>-Wrapper ausgestattet. Bilder, die im Layout breit dargestellt werden — Hero-Bilder, Standort-Aufnahmen, Header-Motive — bekommen zusätzlich passende Auflösungs-Stufen, sodass Smartphone und Desktop jeweils die schlanke Variante laden.

Was technisch passiert

Jedes Bild durchläuft zwei oder drei Schritte, je nach Größe und Rolle.

Erstens, für alle Bilder: Konvertierung in WebP. Neben dem Original (JPG oder PNG) entsteht eine WebP-Variante mit deutlich kleinerer Dateigröße bei gleicher Bildqualität.

Zweitens, für alle Bilder: Einbettung in einen <picture>-Wrapper. Der Wrapper sagt dem Browser: „nimm die WebP-Variante, falls du sie verstehst — sonst das Original". Moderne Browser nehmen WebP, ältere fallen automatisch auf das Original zurück.

Drittens, für große Bilder und Hero-Bilder: zusätzliche Auflösungs-Stufen. Bilder, die im Layout größer als 1200 Pixel dargestellt werden, bekommen zwei zusätzliche Stufen (typischerweise 800 und 1200 Pixel Breite). Hero-Bilder — die meist vollbreit auf Mobile dargestellt werden — bekommen zusätzlich eine 400-Pixel-Stufe für kleine Bildschirme. So lädt ein Smartphone die schlanke Variante, ein Desktop-Bildschirm die volle Auflösung.

Inline-Bilder, die ohnehin nur 400 bis 1000 Pixel breit dargestellt werden, bleiben bei einer einzigen WebP-Variante. Eine zusätzliche Halbgröße bringt dort kaum messbare Einsparung — der Werkzeug-Lauf bleibt schlank, wo er nichts bringt.

Im Ergebnis ist das, was beim Besucher ankommt, oft ein Zehntel bis ein Zwanzigstel der ursprünglichen Datenmenge — bei unverändertem Aussehen.

Was inkludiert ist

Im Preis von 99 € enthalten ist die einmalige Komplett-Optimierung aller auf der Webseite gefundenen Bilder. Zusätzlich sind fünf Bild-Austauschplätze inkludiert: Falls Sie mit dem Lauf einzelne Motive durch neue ersetzen möchten — bessere Aufnahme, anderes Produktfoto, aktualisiertes Team-Bild — sind die ersten fünf solcher Tausche inklusive. Weitere Tausche werden mit 9 € pro Bild abgerechnet.

Falls Sie später nach der Auslieferung einzelne Bilder austauschen möchten, gibt es dafür den Folge-Baustein W-PF-01-U (Bild-Update, 19 € pro Bild, mindestens 39 €), der die <picture>-Wrapper neu generiert.

Selbst machen — geht das nicht auch?

Es gibt kostenlose Online-Tools, mit denen einzelne Bilder komprimiert werden können. Für eine Webseite mit fünf Bildern ist das ein gangbarer Weg. Sobald es um Dutzende oder Hunderte Bilder geht, wird das Selbst-Machen aus zwei Gründen schwierig.

Erstens: Die einfachen Tools komprimieren nur. Sie erzeugen keine mehreren Auflösungen und keine <picture>-Wrapper. Damit wird das Bild zwar kleiner, das Smartphone bekommt aber weiter dasselbe Bild wie der Desktop — nur eben das kleinere. Der größte Hebel wird nicht gehoben.

Zweitens: Auch wenn ein Werkzeug die Mehr-Größen-Variante mit Wrapper kann, müssen die Wrapper anschließend in den HTML-Code eingebaut werden — auf jeder Seite, an der richtigen Stelle, im richtigen Format. Bei einer 50-Seiten-Webseite ist das eine Tagesarbeit für jemanden, der weiß, was er tut.

Pflege-Ehrlichkeit

Eine Sache, die wir nicht verschweigen: Nach dem Lauf ist die Webseite einmal optimiert. Wenn Sie später ein Bild auf gewohntem Weg ersetzen — etwa weil Sie noch direkten Datei-Zugriff haben — dann steht das neue Bild ohne Wrapper an der Stelle. Es funktioniert, aber es nutzt die Optimierung nicht.

Für solche Fälle ist der Folge-Baustein W-PF-01-U gedacht: 19 € pro Bild, mindestens 39 €. Wenn Sie regelmäßig viele Bilder tauschen, ist nach einer Weile ein Komplett-Lauf günstiger als die Einzel-Tausche. Wir sagen Ihnen Bescheid, sobald die Schwelle erreicht ist.

Was wir nicht machen

Wir verändern den Bildinhalt nicht. Kein Zuschnitt, keine Farbkorrektur, kein Hintergrund-Tausch. Wenn ein Bild gestalterisch nicht funktioniert, ist das Aufgabe einer Bildbearbeitung — wir liefern die optimierte Variante des bestehenden Motivs.

Wir prüfen auch nicht, ob ein Bild urheberrechtlich für die Webseite genutzt werden darf. Was auf der Webseite steht, gehen wir davon aus, dass es dort stehen darf.

Was Sie tun müssen

Nichts, wenn Sie nur die bestehenden Bilder optimieren möchten. Falls Sie die fünf Austauschplätze nutzen wollen, schicken Sie uns die neuen Bilder per Mail oder über den Bearbeitungsbereich, sobald die Spiegelung steht — sie werden dann mit denselben drei Schritten behandelt wie die übrigen Bilder.