WebP-Unterstützung für hochoptimierte Bilder
Veröffentlichungsdatum: 08. April 2019
Änderungsdatum: 01. Juli 2024
Projektgrundlage: BASE
Ab Weblication® CMS Version 14 können Sie die zusätzliche Generierung von WebP-Bildern beim Einsatz von JPEG-Bildern einfach über CSS-Only aktivieren. Unterstützt werden neben Bildelementen auch Bildergalerien und Bannerbilder.
WebP-Bilder ermöglichen in der Regel eine erheblich reduzierte Dateigröße ohne Qualitätsverluste. Lesen Sie hierzu den Artikel "WebP-Unterstützung für hochoptimierte Bilder in fast allen Browsern" in den weiterführenden Links am Artikelende.
Grundvoraussetzung für WebP ist, daß der Server dies unterstützt, was Sie aus den Weblication® CMS Serverinformationen auslesen können.
WebP für das Bild-Element
Um in bestehenden BASE (Mobile First) Projekten WebP nutzen zu können, müssen Sie ggf. die CSS-Only-Eigenschaft -w-createWebp zum Aktivieren nachrüsten (siehe nebenstehenden Screen und Quelltext-Beispiel).
Gleiches gilt für Bildergalerien (CSS-Only-Eigenschaft -w-option-picture-createwebp) und das Banner-Weblic (CSS-Only-Eigenschaft -w-option-createWebp).
Weiterhin müssen die Regeln in den .htaccess Dateien des Projektes (vorrangig dem Assets-Projekt) die Dateiendung webp auch berücksichtigen. Hierfür steht mit aktivierter Version 14 in den weiteren Werkzeugen innerhalb des "BASE Analyzer / Updater" die Funktion "WebP Unterstützung in .htaccess ergänzen" zur Verfügung, um dies schnell nachtragen zu können.
Auszug aus elementPicture.scss
/* Bilder */ /*@wCssFragment{class:elementPicture;caption:Bild allgemein;caption-en:Picture default}*/ .elementPicture { /* ... */ -w-createWebp:1; /* Zusätzliches webp-Bild generieren (ab Version 14) [1(Ja)|0(Nein)]*/ /* ... */ }
Webp für Hintergrundbilder
Mit aktuellen Weblic® Versionen unterstützen auch Inhaltsbereiche und Inhaltsboxen Webp Hintergrundbilder.
Über
-w-option-backgroundimageCreateWebp:1;
lässt sich in der CSS des jeweiligen Elementes einstellen, ob bei
entsprechender Browser-Unterstützung eine automatisch generierte
Webp-Version des Bildes genutzt werden soll.
Webp für Vorschaubilder in Listen
Die aktuelle BASE hat bereits im Standard auch für Vorschaubilder in Listen die WebP-Generierung aktiviert. Dies nehmen Sie in den allgemeinen Einstellungen der Liste vor:
Beispiel: Auszug aus der listDefault.scss
/*@wCssFragment{class:listDefault;caption:Liste allgemein;caption-en:List default}*/ .listDefault { @extend .clearAfter; /* Allgemeine Einstellungen */ /* ... */ -w-option-picture-createwebp:1; /* Zusätzliches webp-Bild generieren [1(Ja)|0(Nein)]*/ /* ... */ }
Webp für PNG-Bilder
Ab CMS-Version 015.001.005.000 wird WebP neben JPEG-Dateien auch als alternatives Format für PNGs unterstützt, um Bilder schneller darzustellen.
Über die Systemeinstellungen (Bilder) lässt sich dies aktivieren.