WebP-Unterstützung für hochoptimierte Bilder

Mit der 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 DevBlog-Artikel 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.

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.

elementPicture.scss zu WebP
elementPicture.scss zu WebP

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 auch 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.