Sonderfunktion: Bildoptimierung

bee.tools optimiert die Bilder auf Ihrer Webseite auf 2 verschiedene Arten.

Im ersten Schritt sorgt das System dafür, dass ein Bild wirklich nur in dem Format und in der Größe angezeigt wird, in der es auch benötigt wird. Bereits bei der Umsetzung Ihres Designs sorgen wir für die notwendige Konfiguration. Das bedeutet, dass Bilder nicht wie bei vielen WordPress-Templates per CSS beschnitten und verkleinert werden, sondern wirklich auf die benötigte Größe verkleinert und beschnitten werden. Dies verhindert, dass nicht angezeigte Bildteile oder zu große Bilder geladen werden. Es werden nur die Bilddaten übertragen, die der Besucher sieht und benötigt.

Das CMS bee.tools legt für jedes Bild, das Sie in die Mediathek geladen haben, verschiedene Bildversionen an. Unterschiedliche Bildgrößen, -formate und Beschnitte sind dann der Grund für viele Versionen eines einzigen Bildes. Dies benötigt zwar mehr Speicherplatz auf dem Server, verringert aber die Ladelast für den Besucher.

Im zweiten Schritt optimiert bee.tools diese Bildversionen und konvertiert das Bild in neue, moderne Bildformate. Die Optimierung umfasst dabei 3 Schritte:

Die Schritte 2 und 3 der Optimierung finden auf einem eigens dafür von uns bereitgestellten Server statt. Daher kann es vorkommen, dass Ihre Bilder eine gewisse Zeit benötigen, bis sie komplett optimiert sind.

Auch heute noch gibt es vielerorts – vor allem in ländlichen Gegenden – Probleme mit der Versorgung von schnellem Internet. Auch das mobile Internet ist nicht immer flächendeckend schnell. Daher ist es sinnvoll, die Ladelast einer Webseite möglichst gering zu halten, da in der Folge dann die Ladezeit sinkt.

Nimmt man an, dass eine einzelne Seite Ihres Internetauftritts bspw. 5MB Speicherplatz benötigt, so müssen diese 5MB beim Aufruf dieser Seite an den Besucher übertragen werden. Geht man nun davon aus, dass 80% davon Bilddateien sind, kommen wir auf einen Speicherplatz von 4MB.

Im Optimalfall kann mit der Verwendung neuester Bildformate gut 90% Speicherplatz eingespart werden. Das hieße dann, dass aus den ursprünglichen 4MB nur noch 0,4MB werden. Die Gesamtlast der Seite beträgt am Schluss dann nur noch 1,4MB anstatt 5MB. Dies verringert die Ladezeit der Seite um 66%.

In der Freigabe-Maske sehen Sie nun 3 Spalten:

Da das TinyPNG-optimierte Bild nicht verlustbehaftet ist, wird dieses automatisch verwendet und muss nicht freigegeben werden.

Die Formate WebP und AVIF können jedoch verlustbehaftet sein. Daher wird eine Sichtprüfung hier empfohlen.

Die Maske ist außerdem in 3 Reihen unterteilt:

bee.tools bietet auch die Möglichkeit einer Massenfreigabe aller Bilder, dabei gibt es jedoch Fallstricke:

Die Massenfreigabe erreichen Sie im Modul “seo”. Dort wählen Sie den Punkt SEO Tools -> Bildoptimierung -> Massen-Freigabe Guetzli-, WebP-, AVIF-Bilder.

Dort erhalten Sie einen Überblick über den aktuellen Freigabestatus.

Mit einem Klick auf “save” werden alle Bilder freigegeben.

Stellen Sie im Nachhinein fest, dass ein Bild fälschlicherweise freigegeben wurde, können Sie Ihre Entscheidung über das Modul “media” widerrufen.

Dazu öffnen Sie das Modul “media” und navigieren in der Struktur zu Ihrem gewünschten Bild. (Verwenden Sie alternativ die Backoffice-Suche)

Per Klick auf das Thumbnail oder auf die drei Punkte -> “Bearbeiten des Media-Datensatzes" öffnet sich die Bearbeiten-Maske. Im Abschnitt “Datei-Version(en)” finden Sie alle erstellen Versionen dieses Bildes. An dieser Stelle können Sie für jede Version die Bildfreigabe anpassen.