#138 avif support, fix issues with responsive background images, fix …

…an issue with image conversion

bgstyles.es6

@@ -58,13 +58,13 @@ LIB.ready(function (undef) {
             while (i--) {
 
                 el = elements[i];
-                k = Object.keys(styles[i]);
+                k = Object.keys(styles[i]).map(key => +key).sort((a, b) => b - a);
 
                 mql = undef;
 
                 for (j = 0; j < k.length; j++) {
 
-                    mql = window.matchMedia('(max-width: ' + k[j] + 'px)');
+                    mql = window.matchMedia('(min-width: ' + k[j] + 'px)');
 
                     if (mql.matches) {
 

bgstyles.js

@@ -18,30 +18,30 @@ LIB.ready((function(e) {
     // responsive css background-image in [style] attribute
         if (t.length > 0) {
         // or use resizeObserver
-        const c = t.map((function(e) {
+        const o = t.map((function(e) {
             return JSON.parse(e.dataset.bgStyle);
         }));
-        let o = [];
+        let c = [];
         function n() {
-            let n, i, a, r, u, l = o.length;
+            let n, i, a, r, u, l = c.length;
             for (l = t.length; l--; ) {
-                for (i = t[l], a = Object.keys(c[l]), u = e, r = 0; r < a.length && (u = window.matchMedia("(max-width: " + a[r] + "px)"), 
-                !u.matches); r++) ;
+                for (i = t[l], a = Object.keys(o[l]).map(e => +e).sort((e, t) => t - e), u = e, 
+                r = 0; r < a.length && (u = window.matchMedia("(min-width: " + a[r] + "px)"), !u.matches); r++) ;
                 if (u == e || !u.matches || r == a.length) continue;
-                if (n = "url(" + c[l][a[r]] + ")", i.style.backgroundImage == n) continue;
-                let o = new Image, d = function(e) {
+                if (n = "url(" + o[l][a[r]] + ")", i.style.backgroundImage == n) continue;
+                let c = new Image, s = function(e) {
                     return function() {
                         i.style.backgroundImage = e;
                     };
                 }(n);
-                o.src = c[l][a[r]], o.width > 0 && o.height > 0 ? d() : "decode" in o ? o.decode().then(d) : o.onload = d;
+                c.src = o[l][a[r]], c.width > 0 && c.height > 0 ? s() : "decode" in c ? c.decode().then(s) : c.onload = s;
             }
         }
-        Object.values(c).forEach((function(e) {
+        Object.values(o).forEach((function(e) {
             Object.keys(e).forEach((function(e) {
-                e = +e, -1 == o.indexOf(e) && o.push(e);
+                e = +e, -1 == c.indexOf(e) && c.push(e);
             }));
-        })), o.sort((function(e, t) {
+        })), c.sort((function(e, t) {
             return t - e;
         })), window.addEventListener("resize", n, !1), setTimeout(n, 25);
     }

helper.php

@@ -38,6 +38,7 @@
 use function strtolower;
 use function ucwords;
 
+define('AVIF', function_exists('imageavif') && isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/avif') !== false);
 define('WEBP', function_exists('imagewebp') && isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false);
 
 class GZipHelper

helpers/Images.php

@@ -31,8 +31,8 @@ class ImagesHelper
 	 * @since 2.9.0
 	 * supported extensions
 	 */
-	const EXTENSIONS = ['png', 'gif', 'jpg', 'jpeg', 'webp'];
-	const CONVERT_TO = 'webp';
+	const EXTENSIONS = ['png', 'gif', 'jpg', 'jpeg', 'webp', 'avif'];
+	const CONVERT_TO = ['avif', 'webp'];
 
 	public function postProcessHTML($html, array $options = [])
 	{
@@ -310,18 +310,20 @@ public static function convert($file, array $options = [])
 	{
 
 		$basename = GZipHelper::sanitizeFileName(preg_replace('/(#|\?).*$/', '', pathinfo($file, PATHINFO_FILENAME)));
-		$pathinfo = strtolower(pathinfo($basename, PATHINFO_EXTENSION));
+		$pathinfo = strtolower(pathinfo($file, PATHINFO_EXTENSION));
 
-		if ($pathinfo == static::CONVERT_TO) {
+		if (in_array($pathinfo, static::CONVERT_TO)) {
 
 			return $file;
 		}
 
-		if (!empty($options['imageconvert']) && WEBP && $pathinfo != 'webp') {
+		if (!empty($options['imageconvert']) && ((AVIF && $pathinfo != 'avif') || (WEBP && $pathinfo != 'webp'))) {
+
+			$ext = AVIF ? 'avif' : 'webp';
 
 			$img = null;
 			$path = $options['img_path'];
-			$newFile = $path . $basename.substr(md5($file), 6) . '.webp';
+			$newFile = $path . $basename.substr(md5($file), 6) . '.'.$ext;
 
 			if (!is_file($newFile)) {
 
@@ -341,11 +343,23 @@ public static function convert($file, array $options = [])
 
 						$img = imagecreatefromjpeg($file);
 						break;
+
+					case 'webp':
+
+						$img = imagecreatefromwebp($file);
+						break;
 				}
 
 				if ($img) {
 
-					imagewebp($img, $newFile);
+					if (AVIF) {
+
+						imageavif($img, $newFile);
+					}
+					else {
+
+						imagewebp($img, $newFile);
+					}
 				}
 			}
 
@@ -394,6 +408,12 @@ public static function generateSrcSet($file, array $sizes = [], array $options =
 
 			$width = $dim[0];
 
+			// getimagesize does not yet support avif https://github.com/php/php-src/pull/5127
+			if ($width == 0 && strtolower(pathinfo($file, PATHINFO_EXTENSION)) == 'avif') {
+
+				$width = (new Image($file))->getWidth();
+			}
+
 			$sizes = array_values(array_filter($sizes, function ($size) use ($width) {
 
 				return $width > $size;

language/en-GB/en-GB.plg_system_gzip.ini

@@ -257,8 +257,8 @@ JOPTION_IMAGESVGPLACEHOLDER_LQIP="Low quality image"
 PLG_GZIP_FIELD_IMAGE_CSS_RESIZE_LABEL="Responsive CSS background Images"
 PLG_GZIP_FIELD_IMAGE_CSS_RESIZE_DESCRIPTION=""
 
-PLG_GZIP_FIELD_IMAGE_CONVERT_LABEL="Convert to Webp"
-PLG_GZIP_FIELD_IMAGE_CONVERT_DESCRIPTION="Webp produce smaller images"
+PLG_GZIP_FIELD_IMAGE_CONVERT_LABEL="Convert to Webp or Avif"
+PLG_GZIP_FIELD_IMAGE_CONVERT_DESCRIPTION="Webp and Avif produce smaller images"
 
 PLG_GZIP_FIELD_INLINE_IMAGE_CONVERT_LABEL="Convert Inline Background Images"
 PLG_GZIP_FIELD_INLINE_IMAGE_CONVERT_DESCRIPTION="Convert inline css background images"

lib/Image/Image.php

@@ -18,9 +18,15 @@
 
  defined('_JEXEC') or die;
 
+ // php 8.1
+ if (!defined('IMAGETYPE_AVIF') && function_exists('imagecreatefromavif')) {
+
+	 define('IMAGETYPE_AVIF', 'avif');
+ }
+
  // php 7.1
  if (!defined('IMAGETYPE_WEBP') && function_exists('imagecreatefromwebp')) {
-	 
+
 	 define('IMAGETYPE_WEBP', 'webp');
  }
 
@@ -61,7 +67,7 @@ public function getExtension() {
 
 	public function getMimetype() {
 
-		return image_type_to_mime_type  ($this->_image_type);
+		return image_type_to_mime_type($this->_image_type);
 	}
 
 	/**
@@ -95,6 +101,10 @@ public function load ($file) {
             $this->_image = imagecreatefromwebp($file);
 			$this->_image_type = IMAGETYPE_WEBP;
         }
+		elseif(function_exists('imagecreatefromavif') && strtolower(pathinfo($file, PATHINFO_EXTENSION)) == 'avif') {
+			$this->_image = imagecreatefromavif($file);
+			$this->_image_type = IMAGETYPE_AVIF;
+		}
         else {
 
 			$image_string = file_get_contents($file);
@@ -193,9 +203,15 @@ public function save($abspath = null, $compression=75) {
                     if (defined('IMAGETYPE_WEBP')) {
 
                         $type = IMAGETYPE_WEBP;
-
 					    break;
                     }
+				case 'avif':
+
+					if (defined('IMAGETYPE_AVIF')) {
+
+						$type = IMAGETYPE_AVIF;
+						break;
+					}
 			}
 		}
 
@@ -208,9 +224,12 @@ public function save($abspath = null, $compression=75) {
         elseif($type == IMAGETYPE_PNG) {
             imagepng($this->_image, $abspath);
         }
-        elseif($type == IMAGETYPE_WEBP) {
-            imagewebp($this->_image, $abspath, $compression);
-        }
+		elseif($type == IMAGETYPE_WEBP) {
+			imagewebp($this->_image, $abspath, $compression);
+		}
+		elseif($type == IMAGETYPE_AVIF) {
+			imageavif($this->_image, $abspath, $compression);
+		}
 
         else {