WebP Support

mit der EXT:webp "Create a WebP copy for images"

Bildschirmfoto_2020-07-30_um_18
PHP Info

Die EXT:webp konvertiert und erstellt automatisiert WebP-Kopien von allen JPEG- und PNG-Bildern im _processed_-Ordner.

Bevor du die EXT:webp installierst und aktivierst, solltest du prüfen, ob ImageMagick das WebP-Bildformat ausliefern kann.
Dieses kannst du unter "Environment" -> "PHP Info" einsehen (s. Screenshot).

Wenn unter den unterstützten Formaten auch webp angezeigt wird, kann ImageMagick das WebP-Bildformat ausliefern.

Wenn nicht, musst du webP für ImageMagick noch installieren.

Die EXT:webp kann in der EM config bei Bedarf konfiguriert werden.
Infos hierzu findest du hier: EXT:webp konfigurieren.

Eine Anpassung der .htaccess-Datei (wie dort beschrieben) ist nicht notwendig, da wir hier das WebP-Format per HTML im Picture Tag bereitstellen!
Vereinfacht sieht der Quelltext für ein Bild dann so aus:

<picture>
    <source srcset="/pfad/image.webp" type="image/webp">
    <source srcset="/pfad/image.png">
    <img src="/pfad/image.png" alt="insert alt text here">
</picture>

Moderne Browser lesen das Picture Element und nutzen das WebP-Format.
Sollte der Browser das Format nicht kennen, wird in diesem Fall das PNG-Format ausgegeben.

WebP-Unterstützung für die Verwendung der Standardkonfiguration EXT:webp .htaccess aktivieren:

Folgende Konstante setzen:
bootstrap.extconf.webp = 0

Info: https://github.com/plan2net/webp#apache-htaccess-example

Bildschirmfoto_2020-07-19_um_11
Bildschirmfoto_2020-07-19_um_11

Die Extension "webp"  installieren & aktivieren

Alle _processed_-Bilder im TYPO3-Backend löschen
(s. Screenshots)

TYPO3- und PHP-Cache löschen

Die Website neu laden

Das erste neue Laden der Seite wird nun einige Zeit in Anspruch nehmen, da jedes Bild erst einmal konvertiert und erstellt werden muss.

... hier meine Einstellungen als Beispiel:

Bildschirmfoto_2020-07-29_um_09

Damit ich WebP Bilder mit Fallback, für Browser die WebP nicht unterstützen, auch als Background-Image per CSS Befehl ausgeben kann, benutze ich den "Modernizr".

Unterhalb des  "Modernizr-Scripts" habe ich folgendes eingefügt:

Modernizr.on('webp', function (result) {
	if (result) {
		document.body.classList.add('webp');
	} else {
		document.body.classList.add('no-webp');
	}
});

Jetzt wird der Browser beim Aufruf der Seite überprüft ob dieser WebP unterstützt. Sollte dem so sein wird dem Body-Tag die Klasse "webp" hinzugefügt. Wenn WebP nicht unterstützt wird, wird die Klasse "no-webp" angefügt. 

Somit hast du die Möglichkeit, eigene Hintergrundbilder als WebP auszugeben.
Hier ein Beispiel:

.no-webp .elementWithBackgroundImage {
    background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
    background-image: url("image.webp");
}