Avif-Unterstützung für hochoptimierte Bilder

Ab Weblication® CMS Version 20 können Sie die zusätzliche Generierung von Avif-Bildern beim Einsatz von JPEG-Bildern einfach über CSS-Only aktivieren.

Das Bildformat AVIF (AV1 Image File Format) bietet eine sehr gute Effizienz bei der Komprimierung von Bildern und bietet dabei eine hohe Bildqualität. Auch bei höheren Komprimierungsraten bietet das Format eine sichtbar gute Bildqualität. Dazu unterstützt das Format auch transparente Hintergründe und Animationen.

Grundvoraussetzung für Avif ist Weblication® CMS ab Version 020.001.198.000 und, daß der Server dies unterstützt, was Sie aus den Weblication® CMS Serverinformationen auslesen können.

Avif für das Bild-Element

Um in bestehenden BASE (Mobile First) Projekten Avif nutzen zu können, müssen Sie ggf. die CSS-Only-Eigenschaft -w-createAvif zum Aktivieren nachrüsten (siehe nebenstehenden Screen und Quelltext-Beispiel).

Gleiches gilt für Bildergalerien (CSS-Only-Eigenschaft -w-option-picture-createAvif) und das Banner-Weblic (CSS-Only-Eigenschaft -w-option-createAvif).

Weiterhin müssen die Regeln in den .htaccess Dateien des Projektes (vorrangig dem Assets-Projekt) die Dateiendung avif auch berücksichtigen. Hierfür steht in den weiteren Werkzeugen innerhalb des "BASE Analyzer / Updater" die Funktion "Avif 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-createAvif:1; /* Avif-Bild generieren [only(Ausschließlich)|1(Zusätzlich)|0(Nein)]*/
  /* ... */
}